The document provides an overview of Content Security Policy (CSP) as a security measure for web applications, detailing its purpose in protecting against attacks like cross-site scripting and data injection. It outlines CSP specifications, directives, server-side examples in various web servers, and PHP code examples, while discussing compatibility with different browsers. The document concludes with considerations for the implementation of report directives and the use of Subresource Integrity (SRI) to verify resource integrity.

1. Content-Security-Policy
Browser Serving Your Web Application Security
Part 2

2. About me
HI I’M PHILIPPE
I’m a Senior Application
Security Analyst at Lightspeed.
Long-time internet developer,
author, screen caster, podcaster
and speaker. I’m specializes in
PHP, Symfony, Kuzzle, security,
code quality, performance, real
time and geolocation.
Sécurité PHP 5 et MySQL 5
OWASP Montreal
PHP Quebec
Table Top Game Developer
Pen & Paper RPG Writer

3. Purpose of the presentation
Improve the code of your website
Protect your site against certain attacks
Protect your users from certain attacks
This is part 2 of Browser Serving Your Web Application Security

4. What is it?
Added layer of security that helps to detect and mitigate certain types of attacks,
including Cross Site Scripting (XSS) and data injection attacks.
Available as :
HTTP Header
Meta Element

5. 3 level of specification
Specification 1.0 Recommendation
http://w3c.org/TR/CSP1
Specification 2.0 Recommendation
http://w3c.org/TR/CSP2
Specification 3.0 Working Draft
http://w3c.org/TR/CSP3

6. Compatibility
Android Chrome Edge Firefox Internet Explorer Opera Safari
Recommendation 1 4.4+ 25+ 12+ 23+ 11+ 7+
Recommendation 2 53+ 40+ 15+ 31+ (partial) 27+ 10+
Working Draft 3 59+ 59+ 58+ 48+

7. Server Side Examples
#apache
<IfModule mod_headers.c>
Header set Content-Security-Policy "default-src 'self';" # alway set header
Header setifempty Content-Security-Policy "default-src 'self';" # set header if empty
</IfModule>
#nginx
map $upstream_http_content_security_policy $csp {
'' default-src 'self';
}
server {
location / {
add_header Content-Security-Policy $csp;
}
}

8. Server Side Examples
#iis
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Content-Security-Policy" value="default-src 'self';" />
</customHeaders>
</httpProtocol>
</system.webServer>

9. PHP Code Example
<?php
header(“Content-Security-Policy: default-src ‘self’;”, true);

10. HTML Example
<meta http-equiv="Content-Security-Policy" content="default-src https:">

11. Logic Structure
Content-Security-Policy: <policy-directive>; <policy-directive>;...
policy-directive:
[<fetch-directive> <fetch-value>[ <fetch-value>]|
<document-directive> <document-value>[ <document-value>]|
<navigation-directive> [<navigation-value>[ <navigation-value>]]|
<report-directive> <report-value>]

12. Fetch Directives
Content-Security-Policy: <policy-directive>; <policy-directive>;...
policy-directive:
[<fetch-directive> <fetch-value>[ <fetch-value>]|
<document-directive> <document-value>[ <document-value>]|
<navigation-directive> [<navigation-value>[ <navigation-value>]]|
<report-directive> <report-value>]

13. Fetch Directives
Directives CSP 1 CSP 2 CSP 3 Comments
default-src ✓ ✓ ✓ Default Policy. Override by more specific directives.
child-src ✗ ✓ ✓ Do not use; use frame-src and worker-src instead.
connect-src ✓ ✓ ✓ Restrict URL loaded in scripts (AJAX, WebSocket,
EvenSource)
font-src ✓ ✓ ✓ @font-face
frame-src ✓ ✗ ✓ <frame> and <iframe>
img-src ✓ ✓ ✓ Favicons; <img>; url() and image() in CSS
manifest-src ✗ ✗ ✓ Application manifest

14. Fetch Directives
Directives CSP 1 CSP 2 CSP 3 Comments
default-src ✓ ✓ ✓
media-src ✓ ✓ ✓ <audio>, <video>, <track>
object-src ✓ ✓ ✓ <object>, <embed> or <applet>
script-src ✓ ✓ ✓ Javascript and XSLT
style-src ✓ ✓ ✓ CSS files
worker-src ✗ ✗ ✓

15. Fetch Directives Values
Content-Security-Policy: <policy-directive>; <policy-directive>;...
policy-directive:
[<fetch-directive> <fetch-value>[ <fetch-value>]|
<document-directive> <document-value>[ <document-value>]|
<navigation-directive> [<navigation-value>[ <navigation-value>]]|
<report-directive> <report-value>]

16. Fetch Directives Values
Values CSP 1 CSP 2 CSP 3 Comments
* ✓ ✓ ✓ Any URL except “data:”, “blob:” or “filesystem:” schemes
'self' ✓ ✓ ✓ Same origin (same scheme, host and port)
'none' ✓ ✓ ✓ Prevents loading resources from any source
uri ✓ ✓ ✓ media.example.com, *.cdn.example.com
'unsafe-inline' ✓ ✓ ✓ default-src, script-src and style-src
'unsafe-eval' ✓ ✓ ✓ default-src and script-src

17. Examples
default-src 'self';
script-src 'self';
script-src 'self' www.google-analytics.com ajax.googleapis.com;
default-src 'none'; script-src 'self'; connect-src 'self'; img-
src 'self'; style-src 'self';
default-src 'self'; img-src *; object-src media1.example.com
media2.example.com *.cdn.example.com; script-src
trustedscripts.example.com
default-src 'unsafe-inline' 'unsafe-eval'

18. Fetch Directives Values
Schemes CSP 1 CSP 2 CSP 3 Comments
https: ✓ ✓ ✓
http: ✓ ✓ ✓ Should not be used anymore. All sites should be HTTPS.
data: ✓ ✓ ✓ Insecure. Do not used if possible.
mediastream: ✗ ✓ ✓ Media Capture and Streams API
blob: ✗ ✓ ✓ Represents a file-like object of immutable, raw data.
filesystem: ✗ ✓ ✓ Not Standard API FileSystem

19. Examples
default-src https: 'unsafe-inline' 'unsafe-eval'
default-src *; script-src https://example.com/js/;”
default-src 'self'; img-src *; media-src toto.local http://
tata.local; script-src scripts.local

20. Fetch Directives Values
Values CSP 1 CSP 2 CSP 3 Comments
'nonce-<base64-value>'
✗ ✓ ✓ Nonce must be generate on each connection
<hash-source>
✗ ✓ ✓ sha256, sha384 or sha512 hash. Like SRI.
'strict-dynamic' ✗ ✓ ✓

21. Examples
script-src 'sha256-qznLcsROx4GACP2dm0UCKCzCG-HiZ1guq6ZZDob_Tng='
script-src 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa'
<script nonce=EDNnf03nceIOfn39fn3e9h3sdfa>
//Some inline code I cant remove yet, but need to asap.
</script>

22. Document Directives
Content-Security-Policy: <policy-directive>; <policy-directive>;...
policy-directive:
[<fetch-directive> <fetch-value>[ <fetch-value>]|
<document-directive> <document-value>[ <document-value>]|
<navigation-directive> [<navigation-value>[ <navigation-value>]]|
<report-directive> <report-value>]

23. Document Directives
Directive CSP 1 CSP 2 CSP 3 Comments
base-uri ✗ ✓ ✓ <base>
disown-opener ✗ ✗ ✓
plugin-types ✗ ✓ ✓ <object>, <embed> and <applet>
sandbox ✓ ✓ ✓ <iframe>
block-all-mixed-content ✗ ✗ ✓ Don’t use with upgrade-insecure-requests
require-sri-for ✗ ✗ ✓
upgrade-insecure-requests ✗ ✗ ✓ Don’t use with block-all-mixed-content

24. Examples
base-uri 'self'; object-src 'none'
plugin-types application/x-shockwave-flash;
plugin-types application/x-java-applet;
default-src 'self'; require-sri-for script style
block-all-mixed-content
upgrade-insecure-requests; default-src https:

25. Navigation Directives
Content-Security-Policy: <policy-directive>; <policy-directive>;...
policy-directive:
[<fetch-directive> <fetch-value>[ <fetch-value>]|
<document-directive> <document-value>[ <document-value>]|
<navigation-directive> [<navigation-value>[ <navigation-value>]]|
<report-directive> <report-value>]

26. Navigation Directives
Directives CSP 1 CSP 2 CSP 3 Comments
form-action ✗ ✓ ✓ <form> action
frame-ancestors ✗ ✓ ✓ <frame> <iframe> <object> <embed> <applet>

27. Examples
default-src 'self'; frame-ancestors 'none'
form-action 'none'
default-src https://cdn.example.net; child-src 'none'; object-src
'none'
default-src 'self'; frame-ancestors 'self'
frame-ancestors my-trusty-site.com

28. Sandbox Value
Content-Security-Policy: <policy-directive>; <policy-directive>;...
policy-directive:
[<fetch-directive> <fetch-value>[ <fetch-value>]|
<document-directive> <document-value>[ <document-value>]|
<navigation-directive> [<navigation-value>[ <navigation-value>]]|
<report-directive> <report-value>]
document-directive: [sandbox|...]

29. Sandbox Values
Values CSP 1 CSP 2 CSP 3 Comments
allow-forms ✓ ✓ ✓ Allows to submit forms.
allow-modals ✓ ✓ ✓ Allows to open modal windows.
allow-orientation-lock ✓ ✓ ✓
Allows to disable the ability to lock the
screen orientation.
allow-pointer-lock ✓ ✓ ✓ Allows to use the Pointer Lock API.
allow-popups ✓ ✓ ✓ Allows popups.
allow-popups-to-escape-sandbox ✗ ✗ ✓
Allows a sandboxed document to open
new windows without forcing the
sandboxing flags upon them.

30. Sandbox Values
Values CSP 1 CSP 2 CSP 3 Comments
allow-presentation ✓ ✓ ✓
Allows to have control over whether
an iframe can start a presentation
session.
allow-same-origin ✓ ✓ ✓
Allows to be treated as being from its
normal origin.
allow-scripts ✓ ✓ ✓ Allows to run scripts.
allow-top-navigation ✓ ✓ ✓ Allows to navigate.

31. Examples
default-src *; sandbox allow-scripts
sandbox allow-forms allow-same-origin
default-src https:; connect-src https:; font-src https: data:;
frame-src https:; img-src https: data:; media-src https:;
object-src https:; script-src 'unsafe-inline' 'unsafe-eval'
https:; style-src 'unsafe-inline' https:;

32. Report Directives
Content-Security-Policy: <policy-directive>; <policy-directive>;...
policy-directive:
[<fetch-directive> <fetch-value>[ <fetch-value>]|
<document-directive> <document-value>[ <document-value>]|
<navigation-directive> [<navigation-value>[ <navigation-value>]]|
<report-directive> <report-value>]

33. Report Directives
Directives CSP 1 CSP 2 CSP 3 Comments
report-uri ✓ ✓ ✓ Deprecated. But replacement not supported yet.
report-to ✗ ✗ ✓
Replace report-uri, but not supported. If a browser
support report-to, it will be used instead of report-uri.
Meta/Header
• Content-Security-Policy-Report-Only
https://report-uri.com/

34. Examples
Content-Security-Policy "default-src 'self'; report-uri http://
example.org/csp-report.php"
http://evil.example.com/image.png

35. Response
{
"csp-report": {
"document-uri": "http://example.org/page.html",
"referrer": "http://evil.example.com/haxor.html",
"blocked-uri": "http://evil.example.com/image.png",
"violated-directive": "default-src 'self'",
"original-policy": "default-src 'self'; report-uri http://
example.org/csp-report.cgi"
}
}

36. EXAMPLE
Report-To: { "group": "csp-endpoint",
"max-age": 10886400,
"endpoints": [
{ "url": "https://example.com/csp-reports" }
]
},
{ "group": "hpkp-endpoint",
"max-age": 10886400,
"endpoints": [
{ "url": "https://example.com/hpkp-reports" }
]
}
Content-Security-Policy: ...; report-to csp-endpoint

37. Subresource Integrity

38. About SRI
Protect Imported Files Integrities
Verify extracted files are delivered without unexpected manipulation.
Uses a cryptographic hash.
<script>, <link>
Base64 of
Sha256
Sha384
sha512

39. Examples
<script src="https://example.com/example-framework.js"
integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/
uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
crossorigin="anonymous"></script>
<link rel="stylesheet” href="https://site53.example.net/style.css"
integrity="sha384-+/M6kredJcxdsqkczBUjMLvqyHb1K/
JThDXWsBVxMEeZHEaMKEOEct339VItX1zB"
crossorigin="anonymous">
cat example-framework.js | openssl dgst -sha384 -binary | openssl enc -base64 -A

40. THANK YOU
This presentation was created using Keynote. The
iconography is provided by Keynote and Font Awesome.
Unless otherwise noted, all photographs are used by
permission under a Creative Commons license. Please refer
to the Photo Credits slide for more information.
Content-Security-Policy - Browser Serving Your Web
Application Security Part 2
Copyright © 2018 Philippe Gamache
This work is licensed under Creative Commons Attribution-
ShareAlike 4.0 International. For uses not covered under this
license, please contact the author.
If you want to talk more, feel free to contact me.
pres.csp@ph-il.ca
@philoupedia
philippegamache
Philippe Gamache