A look at content security policy (with examples in Emberjs)

1. Content
Security
Policy
featuring ember.js

2. WHOAMI
Ryan LaBouve (@ryanlabouve)

4. HOLYARCHERS

5. RyanLaBouve.com

6. Thinking about a new side-project

7. Fire up `ember new`

8. (wait on NPM and Bower)

9. `ember serve`

10. Sparkling new project!

11. But wait!?!?

12. ENTER CSP
Content-Security-Policy: ‘take-that.xss’

13. What is Content
Security Policy?

14. XSS Mitigation
Strategy
using a whitelist based approach.

15. What is XSS?
people trying to execute malicious (usually?)
javascripts on your page.

16. How CSP helps?
deliver policy via http header with
information about what is allowed to execute
on your site.

17. When we request a webpage, we get a response
that has a header and a body
CSP in the wild

18. Response body (has the html/css/js)

19. Response Header has (various meta-data)

20. CSP in the wild

21. How to
implement and
customize CSP

22. Series of
Directives

23. default-src
script-src***
object-src
style-src
img-src
media-src
frame-src
font-src
connect-src
(script-src key directive for blocking
scripting)

24. Each attached
to HTML
elements

25. script-src <script>
object-src <object>, <embed>
style-src <link rel=“stylesheet”>, <style>
img-src <img>, images in css
media-src <audio>, <video>
frame-src <iframe>, <frame>
font-src @font-face
connect-src XMLHttpRequest, JS APIs

26. self
none
*
unsafe-inline
unsafe-eval
example.url.com
Values to Describe Policy

27. Space delimited sources
to match http header syntax
semi colon end of line
About the Values

28. self
Anything you’re including locally

29. unsafe-inline
Anything happening by your content
Better to “separate code and data”
This includes inline event handlers

30. unsafe-eval
setTimeout
eval
not as big a deal as unsafe inline

31. Custom Templates
Not executing. No problem.

32. Other Values
*— Anything Goes
none— Nothing Goes
url— can specify ports, protocols,
wildcards, etc
http://content-security-policy.com/

33. A few quick
examples:

34. Serve nothing at all

35. Serve everything ever

36. Only serve local assets
… a good starting spot

37. Build up slowly as needed

38. Focus on script-src
…especially if you’re worried
mostly about XSS

39. mitigate XSS
…a more complete plan
* move inline script out-of-line
* remove inline event handlers
* Remove use of eval and friends
(not as big)
* Add the script-src directive

40. Report only,
callback url,
block
Options for Enforcing

41. Wanna try it out?
Try report only
mode and tweak
as you go

42. Browser
Compatibility
Issues

43. Resources
http://www.html5rocks.com/en/tutorials/security/content-
security-policy/
https://developer.chrome.com/extensions/contentSecurityPolicy
http://en.wikipedia.org/wiki/Content_Security_Policy
https://www.youtube.com/watch?v=pocsv39pNXA
https://blog.justinbull.ca/ember-cli-and-content-security-policy-
csp/