Slide 1
Slide 1 text
Introduction to Content
Security Policies (CSPs)
Presented by Shawn Hooper
WordCamp Rochester
October 5, 2024
Rochester, New York, USA
Blog & Contact Information @ ShawnHooper.ca
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
What are they?
Slide 4
Slide 4 text
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.
Slide 5
Slide 5 text
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.
Slide 6
Slide 6 text
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: ; rel="https://api.w.org/"
vary: Accept-Encoding
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Supported by all major browsers:
Chrome
Firefox
Safari
Edge
Slide 9
Slide 9 text
What do they protected
against?
Slide 10
Slide 10 text
Cross Site Scripting (XSS) Attacks
Slide 11
Slide 11 text
Clickjacking
Slide 12
Slide 12 text
How do they work?
Slide 13
Slide 13 text
Fetch Directives
Specify the locations (sources) from which resources can loaded on a page
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
Fetch Directive Sources
*.example.com
https://*.example.com/img/
https://*.example.com:8080/path/to/
fi
le.jpg
Slide 16
Slide 16 text
Fetch Directive Special Values
‘self’
‘unsafe-eval’
‘unsafe-inline’
‘nonce-’
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
child-src
Speci
fi
es the URLs that can be loaded via iframe
or the URL of Web Worker processes.
Slide 19
Slide 19 text
child-src
Content-Security-Policy: child-src https://example.com/
Slide 20
Slide 20 text
child-src
let worker = new Worker("data:application/javascript,…");
Slide 21
Slide 21 text
connect-src
Speci
fi
es destinations to which your site can open a connection
Slide 22
Slide 22 text
connect-src
Content-Security-Policy: connect-src https://example.com/
Slide 23
Slide 23 text
Slide 24
Slide 24 text
font-src
URLs where fonts can be loaded from
Slide 25
Slide 25 text
font-src
Content-Security-Policy: font-src ‘self’ https://fonts.gstatic.com/
Slide 26
Slide 26 text
font-src
@font-face {
font-family: "MyFont";
src: url("https://not-example.com/font");
}
body {
font-family: "MyFont";
}
Slide 27
Slide 27 text
frame-src
Resources that can be loaded in or elements
Slide 28
Slide 28 text
frame-src
Content-Security-Policy: frame-src https://landingpage.example.com/
Slide 29
Slide 29 text
frame-src
Slide 30
Slide 30 text
img-src
Resources that can be loaded using ![]()
elements
Slide 31
Slide 31 text
img-src
Content-Security-Policy: img-src https://cdn-example.com/
Slide 32
Slide 32 text
img-src
Slide 33
Slide 33 text
manifest-src
Speci
fi
es where Web Application Manifests can be loaded from.
Slide 34
Slide 34 text
manifest-src
Content-Security-Policy: manifest-src https://example.com/manifests/
Content-Security-Policy: manifest-src ’none’
Slide 35
Slide 35 text
manifest-src
Slide 36
Slide 36 text
media-src
Speci
fi
es where the and media elements can load content from
Slide 37
Slide 37 text
media-src
Content-Security-Policy: media-src https://example.com/podcast/*.mp3
Content-Security-Policy: media-src ’none’
Slide 38
Slide 38 text
media-src
Slide 39
Slide 39 text
object-src
Speci
fi
es where the and elements can load content from
Slide 40
Slide 40 text
object-src
Content-Security-Policy: object-src https://example.com/apps/
Content-Security-Policy: object-src ’none’
Slide 41
Slide 41 text
object-src
Slide 42
Slide 42 text
script-src
Speci
fi
es valid sources for JavaScript
Slide 43
Slide 43 text
script-src
Content-Security-Policy: script-src https://example.com/js/
Content-Security-Policy: script-src ’none’
Slide 44
Slide 44 text
script-src
Replace event handlers (blocked)
With addEventListener calls:
document.getElementById("btn").addEventListener("click", doSomething);
Slide 45
Slide 45 text
script-src
Content-Security-Policy: script-src ‘unsafe-hashes’ https://
example.com/js/
Slide 46
Slide 46 text
script-src
Content-Security-Policy: script-src ‘unsafe-eval’
Allows the eval() and Function() methods to be used.
Slide 47
Slide 47 text
script-src
Content-Security-Policy: script-src ‘unsafe-inline’
alert(‘x’);
Slide 48
Slide 48 text
script-src
Content-Security-Policy: script-src nonce-YmVlMTAwYzhkZjMzNmMxNQ==
alert(‘x’);
Slide 49
Slide 49 text
Strict-dynamic
Content-Security-Policy: script-src ‘strict-dynamic’ nonce-
YmVlMTAwYzhkZjMzNmMxNQ==
// fetches document from external URL
Slide 50
Slide 50 text
script-src-attr
Speci
fi
es valid sources for JavaScript used in attributes like onclick=“”
Slide 51
Slide 51 text
script-src-attr
Content-Security-Policy: script-src-attr ‘none’
Slide 52
Slide 52 text
script-src-attr
Content-Security-Policy: script-src-attr ‘none’
Would fail
Slide 53
Slide 53 text
script-src-attr
Content-Security-Policy: script-src-attr ‘none’
Would fail
Slide 54
Slide 54 text
script-src-elem
Speci
fi
es where external scripts can be loaded from using the element.
Slide 55
Slide 55 text
script-src-elem
Content-Security-Policy: script-src-elem ’none’
Slide 56
Slide 56 text
script-src-elem
Content-Security-Policy: script-src-elem js.example.com
Slide 57
Slide 57 text
script-src-elem
Content-Security-Policy: script-src-elem ‘none’
would fail
Slide 58
Slide 58 text
style-src
Speci
fi
es valid sources for stylesheets
Slide 59
Slide 59 text
style-src
Content-Security-Policy: style-src https://example.com/css/
Content-Security-Policy: style-src ’none’
Slide 60
Slide 60 text
style-src
Slide 61
Slide 61 text
style-src
Content-Security-Policy: style-src ‘unsafe-inline’
#inline-style {
background: red;
}
Slide 62
Slide 62 text
style-src
Content-Security-Policy: style-src nonce-abcde12345
#inline-style {
background: red;
}
Slide 63
Slide 63 text
style-src
Content-Security-Policy: style-src ‘unsafe-eval’
CSSStyleSheet.insertRule()
CSSGroupingRule.insertRule()
CSSStyleDeclaration.cssText
Slide 64
Slide 64 text
style-src-attr
Speci
fi
es whether styles can be used inline
Slide 65
Slide 65 text
style-src-attr
Content-Security-Policy: style-src-attr ‘none’
Slide 66
Slide 66 text
style-src-attr
Content-Security-Policy: style-src-attr ‘none’
Send
Slide 67
Slide 67 text
style-src-elem
Speci
fi
es sources where styles can be loaded from
Slide 68
Slide 68 text
style-src-elem
Content-Security-Policy: style-src-elem example.com
Slide 69
Slide 69 text
worker-src
Speci
fi
es sources for Worker, SharedWorker and ServiceWorker scripts
Slide 70
Slide 70 text
worker-src
Content-Security-Policy: worker-src example.com
let blockedWorker = new Worker("data:application/javascript,…");
blockedWorker = new SharedWorker("https://not-example.com/");
navigator.serviceWorker.register("https://not-example.com/sw.js");
Slide 71
Slide 71 text
Document Directives
base-uri
sandbox
Slide 72
Slide 72 text
base-uri
Restrict the values that can be used in the HTML element.
Slide 73
Slide 73 text
base-uri
Content-Security-Policy: base-uri example.com;
Slide 74
Slide 74 text
sandbox
Loads the resources in a sandboxed environment like the
attribute.
The sandboxed environment can restrict what the page can do.
Slide 75
Slide 75 text
sandbox
Content-Security-Policy: sandbox;
Content-Security-Policy: sandbox allow-downloads allow-forms allow-
orientation-lock;
Slide 76
Slide 76 text
Navigation Directives
form-action
frame-ancestors
Slide 77
Slide 77 text
form-action
Restricts the URLs where you can send the results of an HTML
Slide 78
Slide 78 text
form-action
Content-Security-Policy: form-action ‘self’ https://forms.example.com/
Slide 79
Slide 79 text
form-action
Slide 80
Slide 80 text
frame-ancestors
Restricts which pages are allowed to embed this page as a frame
Slide 81
Slide 81 text
frame-ancestors
Content-Security-Policy: frame-ancestors ‘none’;
Slide 82
Slide 82 text
Additional Features
upgrade-insecure-requests
monitoring
Slide 83
Slide 83 text
upgrade-insecure-requests
Will automatically treat HTTP URLs as HTTPS URLs
Content-Security-Policy: upgrade-insecure-requests;
Slide 84
Slide 84 text
report-to
Sends a report with the contents of each CSP violation to the speci
fi
ed URL as a
POST request.
Slide 85
Slide 85 text
report-to
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/report-to
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
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!
Slide 88
Slide 88 text
WordPress Plugins for CSPs
Slide 89
Slide 89 text
Getting Started
Slide 90
Slide 90 text
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
Slide 91
Slide 91 text
Thank You.
Slide 92
Slide 92 text
Questions?
Slide 93
Slide 93 text
Shawn Hooper
Blog and Contact Information
@
ShawnHooper.ca
(Which doesn’t have a CSP yet….)