implementing a content-security-policy - metal toad · 2016-12-08 · @grendzy implementing a...
TRANSCRIPT
Implementing aContent-Security-Policy
Dylan Tack @grendzy
#DrupalCampLA 2015
@grendzy Implementing a Content-Security-Policy
Cross-site scripting (XSS)
<script>alert("xss")</script>
2
<script src="http://evil.com"></script>
@grendzy Implementing a Content-Security-Policy
Demo
3
@grendzy Implementing a Content-Security-Policy 4
47% of sites have an XSS vulnerability
[ White Hat Website SecurityStatistics Report 2015 ]
@grendzy Implementing a Content-Security-Policy 5
[ White Hat Website SecurityStatistics Report 2015 ]
Evil robots: attacks are automated
@grendzy Implementing a Content-Security-Policy
CSP to the rescue!
7
<script src="http://evil.com"></script>
Content-Security-Policy: script-src 'self'
⛔ Refused to load the script 'http://evil.com/' because it violates the following Content Security Policy directive: "script-src 'self'".
@grendzy Implementing a Content-Security-Policy
CSP to the rescue!
8
Content-Security-Policy: script-src 'self' google-analytics.com
https: *://*.example.com:*
⚠ 'unsafe-eval' 🚫 'unsafe-inline'
Everything is going to break
Everything is going to break
@bcrypt
@grendzy Implementing a Content-Security-Policy
Replace variables with data-* attributes 1 <script> 2 var theAnswer = 42; // Bad 3 </script> 4 5 <body data-answer="42"> <!-- Good!! -->
13
@grendzy Implementing a Content-Security-Policy
Use JSON blocks for larger objects 1 <!-- Bad --> 2 <script> 3 var settings = {"answer": 42, "question": null}; 4 </script> 5 6 <!-- Good!! --> 7 <script type="application/json" id="settings"> 8 {"answer": 42, "question": null} 9 </script>
14
@grendzy Implementing a Content-Security-Policy
Use JSON blocks for larger objects 1 <!-- Good!! --> 2 <script type="application/json" id="settings"> 3 {"answer": 42, "question": null} 4 </script>
1 var settings = JSON.parse( document.getElementById('settings').innerHTML);
15
@grendzy Implementing a Content-Security-Policy
Look for document.createElement() 1 // Bad 2 (function() { 3 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 4 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 5 var s = document.getElementsByTagName('script')[0];s.parentNode .insertBefore(ga, s); 6 })();
16
7 <!-- Good!! --> 8 <script src="//www.google-analytics.com/ga.js" async></script>
@grendzy Implementing a Content-Security-Policy
Replace inline event handlers 1 <!-- Bad --> 2 <a onclick="deepThought()"></a> 3 4 <!-- Good!! --> 5 <a class="ask"></a>
1 $('.ask').click(deepThought);
17
@grendzy Implementing a Content-Security-Policy
Going to productionContent-Security-Policy: script-src 'self'; report-uri https://report-uri.io/report/a83af30
Content-Security-Policy-Report-Only: script-src 'self'; report-uri https://report-uri.io/report/a83af30
18
@grendzy Implementing a Content-Security-Policy
https://report-uri.io/19
@grendzy Implementing a Content-Security-Policy
https://report-uri.io/20
@grendzy Implementing a Content-Security-Policy
Inside a CSP report 1 { 2 "csp-report": { 3 "document-uri": "http://www.metaltoad.com/blog/successful-digital-pm", 4 "referrer": "", 5 "violated-directive": "script-src 'self' 'unsafe-eval' *.metaltoad.com *.google-analytics.com", 6 "effective-directive": "script-src", 7 "original-policy": "script-src 'self' 'unsafe-eval' *.metaltoad.com *.google-analytics.com; report-uri https://report-uri.io/report/..", 8 "blocked-uri": "http://indexx.org", 9 "source-file": "http://dfwu1019.info", 10 "line-number": 1, 11 "column-number": 10002, 12 "status-code": 200 13 } 14 }
21
@grendzy Implementing a Content-Security-Policy
YouTube22
Content-Security-Policy: child-src https://youtube.com
@grendzy Implementing a Content-Security-Policy
Google Analytics23
Content-Security-Policy: script-src google-analytics.com
@grendzy Implementing a Content-Security-Policy
Twitter24
Source: https://dev.twitter.com/web/overview/widgets-webpage-properties Case study: https://blog.twitter.com/2011/improving-browser-security-csp
Content-Security-Policy: script-src https://platform.twitter.com; child-src https://platform.twitter.com;
@grendzy Implementing a Content-Security-Policy
Facebook25
Content-Security-Policy: child-src https://facebook.com
@grendzy Implementing a Content-Security-Policy
CKEditor26
@grendzy Implementing a Content-Security-Policy
Unsafe tags<script><object><embed><style>
<iframe><img> (maybe)
27
@grendzy Implementing a Content-Security-Policy
Additional Directivesbase-uri ⚠child-src ⚠connect-src font-src form-action ⚠frame-ancestors ⚠
28
img-src media-src object-src plugin-types ⚠script-srcstyle-src
@grendzy Implementing a Content-Security-Policy
CSP Level 2Content-Security-Policy: script-src 'sha256-sha256-qznLcsROx4GACP2dm0UCKCzCG-HiZ1guq6ZZDob_Tng='
29
1 <script nonce=EDNnf03nceIOfn39fn3e9h3sdfa> 2 // Some inline code I cant remove yet, but need to asap. 3 </script>
@grendzy Implementing a Content-Security-Policy
Browser support30
caniuse.com
@grendzy Implementing a Content-Security-Policy
Browser support31
caniuse.com
@grendzy Implementing a Content-Security-Policy
A note about page speed32
@grendzy Implementing a Content-Security-Policy
Questions?33
Further reading:html5rocks.com/en/tutorials/security/content-security-policy