Content Security Policies (CSP) are an additional layer of security that you can add to your websites to protect your users from XSS attacks, but it is only used by about 2% of the Internet. This presentation was given at WordCamp Europe 2018 and explains the threats posted to website visitors, how CSPs can help, and how they work. #wceu

1. Content Security Policies
A whole new way of securing your website that
no one knows about
Miriam Schwab, WCEU 2018

3. 5x

6. '//tag.bounceexchange.com/1990/i.js
//assets.adobedtm.com/6372cf21ef88ee60bc2
977a4898dcb5c7945a212/satelliteLib-
fd2e38c2a1cccb723029dc3b607e196906c8bf93.
js
//cdn.yldbt.com/js/yieldbot.intent.js
//c.amazon-adsystem.com/aax2/apstag.js
//cdn.accelerator.arsdev.net/h/
https://pixel.condenastdigital.com/sparro
w.min.js

7. How web apps are compromised
76% of total exploits

8. XSSCross Site Scripting

9. evil.js

10. evil.js
Cookies
Web
storage
DOM
Hidden
form
inputs
Global
objects
Privileges

11. 3 types of XSS
Persistent Originates in the database Comment injection
Reflected Originates in victim’s request
http://www.goodsite.com/search
?keyword=<script>...</script>
DOM-based
Payload injected into client-
side code (not server-side)
Executed after the page has loaded

12. OWASP Top Ten

13. With XSS, the user
is the victim, not
the application.

14. • Session hijacking
• Cookie theft
• Account takeover
• Redirecting traffic
• Stealing account credentials
• Displaying unwanted ads
• Virus/malware infections
• Keylogging

19. • Slower devices
• 100% CPU
• High energy consumption
• Battery drain
• Overheating

20. 55%
8,500%
34,000%

21. Nov. 2017

23. CSP

24. fonts.google.comgoogle-analytics.commysite.com/img.jpgevilsite.com/evil.js
CSP

25. Browser support levels

26. CSP Syntax
Directives
Strings specifying type of resource,
taken from predefined list
• font-src
• frame-src
• img-src
• media-src
• object-src
• script-src
• style-src
Source expressions
Patterns describing one or more servers
that resources can be downloaded from
https://website.com
'none'
'self’
*
'unsafe-inline'
'unsafe-eval'

27. Content-Security-Policy: default-src 'self' https:;

28. Content-Security-Policy: script-src 'self’
https://www.google-analytics.com

29. Content-Security-Policy: font-src 'self’
https://fonts.googleapis.com

30. Content-Security-Policy: object-src ‘none‘

31. unsafe inline unsafe eval

32. Content-Security-Policy: script-src
‘unsafe-inline’ ’unsafe-eval’

33. Nonce
<script nonce=EDNnf03nceIOfn39fn3e9h3sdfa>
//inline code
</script>
Content-Security-Policy: script-src 'nonce-
EDNnf03nceIOfn39fn3e9h3sdfa'

34. Hashes
<script>alert('Hello, world.');</script>
Content-Security-Policy: script-src 'sha256-
qznLcsROx4GACP2dm0UCKCzCG-HiZ1guq6ZZDob_Tng='

35. Content-Security-Policy: upgrade-insecure-requests;

36. Content-Security-Policy-Report-Only: default-src
'none’;
script-src https://mysite.com;
report-uri /csp-reports

37. Subresource Integrity - SRI
<script src="https://example.com/example-framework.js"
integrity="sha384-
oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1w
x4JwY8wC" crossorigin="anonymous"></script>

38. Don’t use
X-XSS
Protection
X-Frame
Options
X-Content
Type Options

39. How to add CSPs to your site

41. functions.php
add_action('send_headers', function(){
// Prevent XSS Attack header("Content-Security-
Policy: default-src 'self';");

42. meta tag
<meta http-equiv="Content-Security-Policy"
content="default-src https://cdn.example.net;
child-src 'none'; object-src 'none'">
This can't be used for frame-ancestors, report-uri, or sandbox.

43. htaccess
Header set Content-Security-Policy ”
default-src 'self’;
script-src 'self' www.google-analytics.com
*.cloudflare.com;
img-src *.cloudflare.com "

44. Tools

57. Adoption

59. Resources
• https://developers.google.com/web/fundamentals/security/csp/
• https://scotthelme.co.uk/csp-cheat-sheet/
• https://scotthelme.co.uk/content-security-policy-an-introduction/ -
great intro tutorial with explanations of directives and what they do
• https://report-uri.com/home/tools
• https://content-security-policy.com/
• https://developer.mozilla.org/en-
US/docs/Web/HTTP/Headers/Content-Security-Policy
• https://www.troyhunt.com/

60. Media credits
• Browser icon: Icons made by Freepik from Flaticon is licensed by Creative Commons BY 3.0
• JS icons: Icons made by Vectors Market from Flaticon is licensed by Creative Commons BY 3.0
• CSS icon: Icons made by Freepik from Flaticon is licensed by Creative Commons BY 3.0
• Font icon: Icons made by Dave Gandy from Flaticon is licensed by Creative Commons BY 3.0
• Image icon: Icons made by Smashicons from Flaticon is licensed by Creative Commons BY 3.0
• Grumpy Sheep: https://pixabay.com/en/sheep-grumpy-animal-humor-funny-2825100/
• Frustrated filmmaker: https://pixabay.com/en/filmmaker-youtuber-screenwriter-2838945/
• Pile of bitcoin: https://pixabay.com/en/bitcoin-crypto-virtual-money-3024279/
• Snail: https://pixabay.com/en/snail-rainy-day-spring-animal-slow-3385348/
• Cryptomining guy: https://pixabay.com/en/bitcoin-mining-crypto-currency-2714192/
• Smiley icon: Icons made by Roundicons from Flaticon is licensed by Creative Commons BY 3.0
• Tools: https://pixabay.com/en/tools-vintage-woodworking-saw-1209764/

61. Thank you!!
Miriam Schwab | miriam@strattic.com