Content Security
Policyfeaturing ember.js
WHOAMIRyan LaBouve (@ryanlabouve)
Thinking about a new side-project
Fire up `ember new`
(wait on NPM and Bower)
Sparkling new project!
ENTER CSPContent-Security-Policy: ‘take-that.xss’
What is Content Security Policy?
XSS Mitigation Strategy
using a whitelist based approach.
What is XSS?people trying to execute malicious (usually?)
javascripts on your page.
How CSP helps?deliver policy via http header with
information about what is allowed to execute on your site.
When we request a webpage, we get a response that has a header and a body
CSP in the wild
Response body (has the html/css/js)
Response Header has (various meta-data)
How to implement and customize CSP
Series of Directives
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)
Each attached to HTML elements
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
self none *
unsafe-inline unsafe-eval
example.url.com
Values to Describe Policy
Space delimited sources to match http header syntax
semi colon end of line
About the Values
selfAnything you’re including locally
unsafe-inlineAnything happening by your content
Better to “separate code and data”This includes inline event handlers
unsafe-eval
setTimeouteval
not as big a deal as unsafe inline
Custom TemplatesNot executing. No problem.
Other Values
*— Anything Goes
none— Nothing Goes
url— can specify ports, protocols, wildcards, etc
http://content-security-policy.com/
A few quick examples:
Serve nothing at all
Serve everything ever
Only serve local assets … a good starting spot
Build up slowly as needed
Focus on script-src …especially if you’re worried
mostly about XSS
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
Report only, callback url,
block
Options for Enforcing
Wanna try it out? Try report only mode and tweak
as you go
Browser Compatibility
Issues
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/