Introduction to Content Security Policies (CSPs)

A Content Security Policy (CSP) is a great tool for helping keep your site’s users safe from common forms of front-end attack types including cross site scripting, packet sniffing, and click-jacking. During this talk you will learn:

* What are content security policies are?
* How do I implement a content security policy in WordPress?
* How to monitor your site’s content security policy reports

Delivered at WordCamp Rochester 2024

Transcript

1. Introduction to Content Security Policies (CSPs) Presented by Shawn Hooper WordCamp Rochester October 5, 2024 Rochester, New York, USA Blog & Contact Information @ ShawnHooper.ca
2. Content Security Policies 1. What are Content Security Policies 2. How do they work? 3. Attack Types Prevented 4. Supported Directives 5. Getting Started 6. Integrating in WordPress
3. What are they?
4. What is a Content Security Policy? Content Security Policy (CSP) is a computer security standard introduced to prevent: cross-site scripting (XSS) clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context.
5. How do they work? They instruct the user agent (your web browser) to only load resources from a speci fi c set of sources (domains, endpoints). If the resource doesn’t match the CSP, it is blocked from being loaded.
6. How do they work? Content Security Policies can be set as an HTTP Response Header: cache-control: no-cache, must-revalidate, max-age=0, no-store, private content-type: text/html;charset=UTF-8 content-security-policy: default-src ‘self’; script-src https://cdn.example.com/; link: <https://shawnhooper.ca/wp-json/>; rel="https://api.w.org/" vary: Accept-Encoding
8. Supported by all major browsers: Chrome Firefox Safari Edge
9. What do they protected against?
10. Cross Site Scripting (XSS) Attacks
11. Clickjacking
12. How do they work?
13. Fetch Directives Specify the locations (sources) from which resources can loaded on a page
14. Fetch Directives default-src child-src connect-src font-src frame-src img-src manifest-src media-src object-src script-src script-src-attr script-src-elem style-src style-src-attr style-src-elem worker-src
15. Fetch Directive Sources *.example.com https://*.example.com/img/ https://*.example.com:8080/path/to/ fi le.jpg
16. Fetch Directive Special Values ‘self’ ‘unsafe-eval’ ‘unsafe-inline’ ‘nonce-<base64-value>’
17. default-src This is the fallback directive. If you specify values for this directive, they will be used in cases where you haven’t speci fi ed another directive, like img-src or script-src
18. child-src Speci fi es the URLs that can be loaded via iframe or the URL of Web Worker processes.
19. child-src Content-Security-Policy: child-src https://example.com/
20. child-src <iframe src="https://example.ca"></iframe> <script> let worker = new Worker("data:application/javascript,…"); </script>
21. connect-src Speci fi es destinations to which your site can open a connection
22. connect-src Content-Security-Policy: connect-src https://example.com/
23. connect-src • <a> ping • fetch() • XMLHttpRequest • WebSocket • EventSource • Navigator.sendBeacon()
24. font-src URLs where fonts can be loaded from
25. font-src Content-Security-Policy: font-src ‘self’ https://fonts.gstatic.com/
26. font-src <style> @font-face { font-family: "MyFont"; src: url("https://not-example.com/font"); } body { font-family: "MyFont"; } </style>
27. frame-src Resources that can be loaded in <frame> or <iframe> elements
28. frame-src Content-Security-Policy: frame-src https://landingpage.example.com/
29. frame-src <iframe src=“https://example.com/"></iframe>
30. img-src Resources that can be loaded using <img> elements
31. img-src Content-Security-Policy: img-src https://cdn-example.com/
32. img-src <img src=“https://example-cdn.com/“ />
33. manifest-src Speci fi es where Web Application Manifests can be loaded from.
34. manifest-src Content-Security-Policy: manifest-src https://example.com/manifests/ Content-Security-Policy: manifest-src ’none’
35. manifest-src <link rel="manifest" href=“https://example.com/ manifests/manifest/” />
36. media-src Speci fi es where the <video> and <audio> media elements can load content from
37. media-src Content-Security-Policy: media-src https://example.com/podcast/*.mp3 Content-Security-Policy: media-src ’none’
38. media-src <audio src=“https://example.com/podcast/ep1.mp3“>
 </audio>
39. object-src Speci fi es where the <object> and <embed> elements can load content from
40. object-src Content-Security-Policy: object-src https://example.com/apps/ Content-Security-Policy: object-src ’none’
41. object-src <embed src=“https://example.com/media/videos/welcome.mp4“>
 </embed>
42. script-src Speci fi es valid sources for JavaScript
43. script-src Content-Security-Policy: script-src https://example.com/js/ Content-Security-Policy: script-src ’none’
44. script-src Replace event handlers (blocked) <button id="btn" onclick=“doSomething()"></button> With addEventListener calls: document.getElementById("btn").addEventListener("click", doSomething);
45. script-src Content-Security-Policy: script-src ‘unsafe-hashes’ https:// example.com/js/ <button id="btn" onclick=“doSomething()"></button>
46. script-src Content-Security-Policy: script-src ‘unsafe-eval’ 
 Allows the eval() and Function() methods to be used.
47. script-src Content-Security-Policy: script-src ‘unsafe-inline’ 
 <script type=“text/javascript”> alert(‘x’); </script>
48. script-src Content-Security-Policy: script-src nonce-YmVlMTAwYzhkZjMzNmMxNQ== <script type=“text/javascript” nonce=“YmVlMTAwYzhkZjMzNmMxNQ==“> alert(‘x’); </script>
49. Strict-dynamic Content-Security-Policy: script-src ‘strict-dynamic’ nonce- YmVlMTAwYzhkZjMzNmMxNQ== <script type=“text/javascript” ‘strict-dynamic’ nonce=“YmVlMTAwYzhkZjMzNmMxNQ==“> // fetches document from external URL </script>
50. script-src-attr Speci fi es valid sources for JavaScript used in attributes like onclick=“”
51. script-src-attr Content-Security-Policy: script-src-attr ‘none’
52. script-src-attr Content-Security-Policy: script-src-attr ‘none’ <button id="btn" onclick=“doSomething()"></button> Would fail
53. script-src-attr Content-Security-Policy: script-src-attr ‘none’ <button id="btn" onclick=“doSomething()"></button> Would fail
54. script-src-elem Speci fi es where external scripts can be loaded from using the <script> element.
55. script-src-elem Content-Security-Policy: script-src-elem ’none’
56. script-src-elem Content-Security-Policy: script-src-elem js.example.com <script src=“https://js.example.com/app.js"></script>
57. script-src-elem Content-Security-Policy: script-src-elem ‘none’ <script src=“https://js.example.com/app.js"></script> would fail
58. style-src Speci fi es valid sources for stylesheets
59. style-src Content-Security-Policy: style-src https://example.com/css/ Content-Security-Policy: style-src ’none’
60. style-src <link href=“https://example.com/css/app.css" rel="stylesheet" />
61. style-src Content-Security-Policy: style-src ‘unsafe-inline’ <style> #inline-style { background: red; } </style>
62. style-src Content-Security-Policy: style-src nonce-abcde12345 <style nonce=“abcde12345"> #inline-style { background: red; } </style>
63. style-src Content-Security-Policy: style-src ‘unsafe-eval’ 
 CSSStyleSheet.insertRule() CSSGroupingRule.insertRule() CSSStyleDeclaration.cssText
64. style-src-attr Speci fi es whether styles can be used inline
65. style-src-attr Content-Security-Policy: style-src-attr ‘none’
66. style-src-attr Content-Security-Policy: style-src-attr ‘none’ <button style=“border:2px solid blue;”>Send</buttton>
67. style-src-elem Speci fi es sources where styles can be loaded from
68. style-src-elem Content-Security-Policy: style-src-elem example.com <link rel=“stylesheet” href=“https://example.com/app.css" />
69. worker-src Speci fi es sources for Worker, SharedWorker and ServiceWorker scripts
70. worker-src Content-Security-Policy: worker-src example.com <script> let blockedWorker = new Worker("data:application/javascript,…"); blockedWorker = new SharedWorker("https://not-example.com/"); navigator.serviceWorker.register("https://not-example.com/sw.js"); </script>
71. Document Directives base-uri sandbox
72. base-uri Restrict the values that can be used in the HTML <base> element.
73. base-uri Content-Security-Policy: base-uri example.com; <base href=“https://cdn.example.com/" />
74. sandbox Loads the resources in a sandboxed environment like the <iframe sandbox> attribute. The sandboxed environment can restrict what the page can do.
75. sandbox Content-Security-Policy: sandbox; Content-Security-Policy: sandbox allow-downloads allow-forms allow- orientation-lock;
76. Navigation Directives form-action frame-ancestors
77. form-action Restricts the URLs where you can send the results of an HTML <form>
78. form-action Content-Security-Policy: form-action ‘self’ https://forms.example.com/
79. form-action <form action=“/form-handlers/intake/“> </form> <form action=“https://forms.example.com/handle“> </form>
80. frame-ancestors Restricts which pages are allowed to embed this page as a frame
81. frame-ancestors Content-Security-Policy: frame-ancestors ‘none’;
82. Additional Features upgrade-insecure-requests monitoring
83. upgrade-insecure-requests Will automatically treat HTTP URLs as HTTPS URLs Content-Security-Policy: upgrade-insecure-requests;
84. report-to Sends a report with the contents of each CSP violation to the speci fi ed URL as a POST request.
85. report-to https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/report-to
87. Content-Security-Report-Only Content-Security-Policy-Report-Only will only report violations to the policy, but it won’t block the resources from loading. Great for development!
88. WordPress Plugins for CSPs
89. Getting Started
90. Getting Started Add the Content-Security-Policy-Report-Only with a sensible defaults like default-src ‘self’; and set it to send violation reports. Update your Content Security Policy based on the violation reports When you’re happy you’ve addressed any violations, change the header to Content-Security-Policy and it will start blocking resources that don’t match your policy. Use the Content-Security-Policy-Report-Only header to test changes
91. Thank You.
92. Questions?
93. Shawn Hooper Blog and Contact Information @ ShawnHooper.ca (Which doesn’t have a CSP yet….)