jQuery has made it possible for developers to move more and more complex application logic down from the server to the client. This is a huge opportunity for JavaScript developers, and at the same time presents a tempting target for folks with malicious intent. It's more critical than ever to ensure that we're doing the right things with regard to security, and happily, modern browsers are here to help. Here, we'll talk about some of the new ways in which you can mitigate the effects of cross-site scripting and other attacks.

1. Mitigate Maliciousness
Mike West
https://mikewest.org/
G+: https://mkw.st/+
Twitter: @mikewest

3. <script>
doAstoundinglyAwesomeThing();
</script>
<script>
sneakilyExfiltrateUserData();
</script>

4. XSS is scary.

5. scheme://host:port

6. https://www.owasp.org/index.php/
XSS_Filter_Evasion_Cheat_Sheet

7. <style>
p { color: {{USER_COLOR}}; }
</style>
<p>
Hello {{USER_NAME}}, view your
<a href="{{USER_URL}}">Account</a>.
</p>
<script>
var id = {{USER_ID}};
</script>
<!-- DEBUG: {{INFO}} -->

8. [][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])
[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]][([][(![]+[])[+[[+[]]]]+([][[]]+[])
[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]
+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]
+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]
+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]]+([][[]]+[])[+[[+!+[]]]]+(![]+[])[+
[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[+!+[]]]]+([][[]]+[])[+[[+[]]]]+([][(![]+[])[+
[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+
(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+
([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+
[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]
+!+[]]]]+(!![]+[])[+[[+!+[]]]]]((![]+[])[+[[+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[!+[]+!+
[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]+(!![]+[])[+[[+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+
[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+
(!![]+[])[+[[+!+[]]]]]+[])[+[[+!+[]]]+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+[+!+[]]+([][(![]+[])[+[[+[]]]]+
([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+
[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[+!+[]]]+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]])()

9. alert(1)
[][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])
[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]][([][(![]+[])[+[[+[]]]]+([][[]]+[])
[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]
+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]
+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]
+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]]+([][[]]+[])[+[[+!+[]]]]+(![]+[])[+
[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[+!+[]]]]+([][[]]+[])[+[[+[]]]]+([][(![]+[])[+
[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+
(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+
([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+
[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]
+!+[]]]]+(!![]+[])[+[[+!+[]]]]]((![]+[])[+[[+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[!+[]+!+
[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]+(!![]+[])[+[[+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+
[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+
(!![]+[])[+[[+!+[]]]]]+[])[+[[+!+[]]]+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+[+!+[]]+([][(![]+[])[+[[+[]]]]+
([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+
[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[+!+[]]]+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]])()

10. “I discount the
probability
of perfection.”
-Alex Russell

11. Not “if”, but “when”.

12. Before all else, send data securely

17. $ curl -I http://mkw.st/
HTTP/1.1 301 Moved Permanently
Server: nginx/1.3.7
Date: Sun, 11 Nov 2012 19:36:15 GMT
Content-Type: text/html
Content-Length: 184
Connection: keep-alive
Keep-Alive: timeout=20
Location: https://mkw.st/

18. Set-Cookie: ...; secure; HttpOnly

19. Strict-Transport-Security:
max-age=2592000;
includeSubDomains

20. Public-Key-Pins: max-age=2592000;
pin-sha1="4n972H…60yw4uqe/baXc=";
pin-sha1="IvGeLsbqzP…j2xVTdXgc="
http://tools.ietf.org/html/draft-ietf-websec-key-pinning

21. http://www.html5rocks.com/en/tutorials/
security/transport-layer-security/

22. Limit the browser’s capabilities
“Every program and every privileged user
of the system should operate using the
least amount of privilege necessary to
complete the job.”
Jerome H. Saltzer, "Protection and the control of information sharing in multics"

23. http://traumwerk.stanford.edu/philolog/2009/10/homers_odyssey_in_art_sirens_f.html

24. http://w3.org/TR/CSP11

26. Content-Security-Policy:
default-src 'none';
style-src https://mikewestdotorg.hasacdn.net;
frame-src https://www.youtube.com
http://www.slideshare.net;
script-src https://mikewestdotorg.hasacdn.net
https://ssl.google-analytics.com;
img-src 'self'
https://mikewestdotorg.hasacdn.net
https://ssl.google-analytics.com
data:;
font-src https://mikewestdotorg.hasacdn.net

27. Content-Security-Policy:
default-src ...;
script-src ...;
object-src ...;
style-src ...;
img-src ...;
media-src ...;
frame-src ...;
font-src ...;
connect-src ...;
sandbox ...;
report-uri https://example.com/reporter.cgi

28. <script>
function handleClick() { ... }
</script>
<button onclick="handleClick()">Click me!</button>
<a href="javascript:handleClick()">Click me!</a>

29. <!-- index.html -->
<script src="clickHandler.js"></script>
<button class="clickable">Click me!</button>
<a href="#" class="clickable">Click me!</a>
<!-- clickHandler.js -->
function handleClick() {
...
}
document.addEventListener('DOMContentLoader', function() {
for (var e in document.querySelectorAll('.clickable'))
e.addEventListener('click', clickHandler);
});

30. Content-Security-Policy-Report-Only:
default-src https:;
report-uri https://example.com/csp-violations
{
"csp-report": {
"document-uri": "http://example.org/page.html",
"referrer": "http://evil.example.com/haxor.html",
"blocked-uri": "http://evil.example.com/image.png",
"violated-directive": "default-src 'self'",
"original-policy": "...",
"line-number": "10"
}
}

31. http://www.html5rocks.com/en/tutorials/
security/content-security-policy/

32. Remember two things:
HTTPS: http://goo.gl/Pw6wU
CSP: http://goo.gl/QcuaK
Questions?
mkwst@google.com
mkw.st/+ @mikewest

33. Even fewer privileges!

34. <iframe src="page.html" sandbox></iframe>
<!--
* Unique origin
* No plugins.
* No script.
* No form submissions.
* No top-level navigation.
* No popups.
* No autoplay.
* No pointer lock.
* No seamless iframes.
-->

35. <iframe src="page.html"
sandbox="allow-forms allow-pointer-lock allow-popups
allow-same-origin allow-scripts
allow-top-navigation"></iframe>
<!--
* No plugins.
* No seamless iframes.
-->

36. <!-- User-generated content? (in The Near Future™) -->
<iframe
seamless
srcdoc="<p>This is a comment!</p>"
sandbox></iframe>

37. http://www.html5rocks.com/en/tutorials/
security/sandboxed-iframes/