Content Security Policies: Let's Break Stuff

A presentation at WordCamp London 2018 in April 2018 in London, UK by Matt Brunt

Slide 1

Slide 1

@Brunty CSP: Let’s Break Stuff Content Security Policies Let’s Break Stuff

Slide 2

Slide 2

@Brunty CSP: Let’s Break Stuff Because you all totally care about this, right?! About me ▸ Senior Software Engineer at Viva IT 
 (those folks in orange hoodies at some conferences & events you may have been to) ▸ @Brunty ▸ @PHPem ▸ mfyu.co.uk ▸ matt@mfyu.co.uk

Slide 3

Slide 3

@Brunty CSP: Let’s Break Stuff Blah blah … just get on with the talk Things I do ▸ Dungeon master for D&D campaigns ▸ Mentor, lead & teach apprentices & junior developers ▸ Run & organise PHP East Midlands ▸ Speak at user groups and conferences ▸ Break production sites with incorrectly configured content security policies

Slide 4

Slide 4

@Brunty CSP: Let’s Break Stuff Disclaimer: I don’t work with WordPress

Slide 5

Slide 5

@Brunty CSP: Let’s Break Stuff Oh good, finally we’re getting started A talk in 3 parts ▸ XSS 
 ▸ CSP 
 ▸ Break stuff 


Slide 6

Slide 6

@Brunty CSP: Let’s Break Stuff The scary stuff

Slide 7

Slide 7

@Brunty CSP: Let’s Break Stuff First, some background What is Cross-Site-Scripting (XSS)? ▸ XSS enables an attacker to inject client-side scripts into non- malicious web pages viewed by other users ▸ In 2016 there was a 61% likelihood of a browser-based

vulnerability being found in a web application ▸ Of those browser based vulnerabilities, 86% were found to be XSS related ▸ That’s just over 52% of all web application vulnerabilities 
 https://www.edgescan.com/assets/docs/reports/2016-edgescan-stats-report.pdf

Slide 8

Slide 8

@Brunty CSP: Let’s Break Stuff I mean, it’s just a joke vulnerability, right?! What can be done with XSS? ▸ Put pictures of cats in web pages ▸ alert(‘ ! ’); ▸ Rickroll a user ▸ Twitter self-retweeting tweet 
 https://www.youtube.com/watch?v=zv0kZKC6GAM

▸ Samy worm 
 https://en.wikipedia.org/wiki/Samy_(computer_worm)

Slide 9

Slide 9

@Brunty CSP: Let’s Break Stuff Well … maybe it’s not a joke vulnerability What can be done with XSS? ▸ Make modifications to the DOM ▸ Load additional scripts, resources, styles, images etc ▸ Access HTML5 APIs - webcam, microphone, geolocation ▸ Steal cookies (and therefore steal session cookies)

Slide 10

Slide 10

@Brunty CSP: Let’s Break Stuff

Slide 11

Slide 11

@Brunty CSP: Let’s Break Stuff It’s really not a joke vulnerability What can be done with XSS? https://www.wired.com/2008/03/hackers-assault-epilepsy-patients-via-computer/

Slide 12

Slide 12

@Brunty CSP: Let’s Break Stuff Ty p e s o f X S S a t t a c k Stored XSS (AKA Persistent or Type I) ▸ Occurs when input is stored - generally in a server-side database, but not always ▸ This could also be within a HTML5 database, thus never being sent to the server at all ▸ who.is was a site Rickrolled by a TXT record in the DNS of a website (yes, really)

Slide 13

Slide 13

@Brunty CSP: Let’s Break Stuff Ty p e s o f X S S a t t a c k Reflected XSS (AKA Non-persistent or Type II) ▸ Occurs when user input provided in the request is immediately returned - such as in an error message, search string etc ▸ Data is not stored, and in some instances, may not even reach the server (see the next type of XSS)

Slide 14

Slide 14

@Brunty CSP: Let’s Break Stuff Ty p e s o f X S S a t t a c k DOM-Based XSS (AKA Type-0) ▸ The entire flow of the attack takes place within the browser ▸ For example, if JavaScript in the site takes input, and uses something like document.write based on that input, it can be vulnerable to a DOM-based XSS attack

Slide 15

Slide 15

@Brunty CSP: Let’s Break Stuff Ty p e s o f X S S a t t a c k Self XSS ▸ Social-engineering form of XSS ▸ Requires the user to execute code in the browser ▸ Doing so via the console can’t be protected by a lot of methods ▸ Not considered a ‘true’ XSS attack due to requiring the user to execute the code

Slide 16

Slide 16

@Brunty CSP: Let’s Break Stuff

Slide 17

Slide 17

Title Text Body Level One Body Level Two Body Level Three @Brunty CSP: Let’s Break Stuff @Brunty CSP: Let’s Break Stuff Let’s fight back

Slide 18

Slide 18

@Brunty CSP: Let’s Break Stuff HTTP response header to help reduce XSS risks What is a CSP?

Slide 19

Slide 19

@Brunty CSP: Let’s Break Stuff It is not a silver bullet What is a CSP?

Slide 20

Slide 20

@Brunty CSP: Let’s Break Stuff It is an extra layer of security What is a CSP?

Slide 21

Slide 21

@Brunty CSP: Let’s Break Stuff It declares what resources are allowed to load How does a CSP work?

Slide 22

Slide 22

@Brunty CSP: Let’s Break Stuff Browser support

Slide 23

Slide 23

@Brunty CSP: Let’s Break Stuff Meh, it’s alright(ish) Sorry IE users

Slide 24

Slide 24

@Brunty CSP: Let’s Break Stuff CSP to the rescue! What can we protect? ▸ default-src ▸ script-src ▸ style-src ▸ img-src ▸ form-action ▸ update-insecure-requests

Slide 25

Slide 25

@Brunty CSP: Let’s Break Stuff Full reference: https://content-security-policy.com 
 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy

Slide 26

Slide 26

@Brunty CSP: Let’s Break Stuff img-src * Allows any URL except data: blob: filesystem: schemes.

Slide 27

Slide 27

@Brunty CSP: Let’s Break Stuff object-src 'none' Don’t load resources from any source

Slide 28

Slide 28

@Brunty CSP: Let’s Break Stuff style-src ‘self' Allow loading from same scheme, host and port

Slide 29

Slide 29

@Brunty CSP: Let’s Break Stuff script-src 'unsafe-inline'

Allows use of inline source elements such as style attribute, onclick, or script tag bodies

Slide 30

Slide 30

@Brunty CSP: Let’s Break Stuff Don’t use unsafe-inline

Slide 31

Slide 31

@Brunty CSP: Let’s Break Stuff

<script nonce="$RANDOM">...</script>

script-src 'self' 'nonce-$RANDOM'

Slide 32

Slide 32

@Brunty CSP: Let’s Break Stuff Content-Security-Policy: default-src 'none'; script- src 'self' https://*.google.com 'nonce-random123'; style-src 'self'; img-src 'self'; upgrade-insecure- requests; form-action 'self';

Slide 33

Slide 33

@Brunty CSP: Let’s Break Stuff I broke production with a bad CSP Learn from my mistakes

Slide 34

Slide 34

@Brunty CSP: Let’s Break Stuff Don’t do what I did

Slide 35

Slide 35

@Brunty CSP: Let’s Break Stuff Report-URI

Slide 36

Slide 36

@Brunty CSP: Let’s Break Stuff When a policy failure occurs, the browser sends a JSON payload to that URL

Slide 37

Slide 37

@Brunty CSP: Let’s Break Stuff { "csp-report": { "blocked-uri": "self", "document-uri": "https://mysite.com", "line-number": 1, "original-policy": "script-src 'self'", "script-sample": "try { for(var lastpass_iter=0; lastpass...", "source-file": "https://mysite.com", "violated-directive": "script-src 'self'" } }

Slide 38

Slide 38

@Brunty CSP: Let’s Break Stuff report-uri.io

Slide 39

Slide 39

@Brunty CSP: Let’s Break Stuff

Slide 40

Slide 40

@Brunty CSP: Let’s Break Stuff Report-only

Slide 41

Slide 41

@Brunty CSP: Let’s Break Stuff Content-Security-Policy-Report-Only: [policy]; report- uri https://app.report-uri.io/r/default/csp/reportOnly;

Slide 42

Slide 42

@Brunty CSP: Let’s Break Stuff Trial stuff before Enforcing

Slide 43

Slide 43

@Brunty CSP: Let’s Break Stuff There will be noise, lots of noise

Slide 44

Slide 44

@Brunty CSP: Let’s Break Stuff Ways to make dealing with a CSP easier Tips ▸ Have an easy and quick way to disable the CSP in production if required ▸ Better yet, have a way to switch it from enforced to report only so you can get violations reported to help you debug ▸ Add the CSP at an application level if you need a nonce

Slide 45

Slide 45

@Brunty CSP: Let’s Break Stuff Ways to make dealing with a CSP easier Multiple policies ▸ They complicate things ▸ For a resource to be allowed, it must be allowed by all policies declared (problematic if an enforced policy) ▸ I tend to avoid them where possible on enforced policies ▸ But with report-only mode they can be very useful to deploy and test multiple policies at the same time (as nothing breaks for the user)

Slide 46

Slide 46

@Brunty CSP: Let’s Break Stuff Ways to remove barriers in development Cryptographic nonces ▸ Don’t generate multiple nonces in the same request (but do

generate a new nonce on each separate request) ▸ If using a templating engine (such as twig) - add the nonce as a global so it’s available in every template by default ▸ Write a helper in your template engine to generate script tags with a nonce if it’s available

Slide 47

Slide 47

@Brunty CSP: Let’s Break Stuff The problem with CSPs and CMSs

Slide 48

Slide 48

@Brunty CSP: Let’s Break Stuff Plugins

Slide 49

Slide 49

@Brunty CSP: Let’s Break Stuff Inline scripts (without nonces) are the enemy

Slide 50

Slide 50

@Brunty CSP: Let’s Break Stuff Stop building dodgy plugins, avoid inline scripts & eval Troy Hunt

Slide 51

Slide 51

@Brunty CSP: Let’s Break Stuff [look at] making WordPress more CSP friendly Scott Helme

Slide 52

Slide 52

@Brunty CSP: Let’s Break Stuff Inline scripts (without nonces) are the enemy

Slide 53

Slide 53

@Brunty CSP: Let’s Break Stuff Demo time! Let’s break stuff

Slide 54

Slide 54

@Brunty CSP: Let’s Break Stuff @scott_helme He knows his stuff!

Slide 55

Slide 55

@Brunty CSP: Let’s Break Stuff @mr_goodwin He first introduced me to what a CSP is

Slide 56

Slide 56

@Brunty CSP: Let’s Break Stuff Homework time! Links & further reading ▸ https://www.owasp.org/index.php/Cross-site_Scripting_(XSS) ▸ https://content-security-policy.com ▸ https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy ▸ https://report-uri.io ▸ https://scotthelme.co.uk/just-how-much-traffic-can-you-generate-using-csp/ ▸ https://www.edgescan.com/assets/docs/reports/2016-edgescan-stats-report.pdf ▸ http://theharmonyguy.com/oldsite/2011/04/21/recent-facebook-xss-attacks-show-increasing- sophistication/ ▸ https://github.com/Brunty/csp-demo

Slide 57

Slide 57

@Brunty CSP: Let’s Break Stuff Thank you

Slide 58

Slide 58

@Brunty CSP: Let’s Break Stuff Questions? @Brunty @PHPem mfyu.co.uk matt@mfyu.co.uk