Content-Security-Policy

Created by Tantek.com on August 28

• Fri, August 28 tantek.com stub with examples, including what I intend to use (and examples that build up to it)
• Fri, August 28 tantek.com CSP2 spec reference, html5rocks article
• Fri, August 28 tantek.com why, how to, indieweb examples, add mine, with documentation
• Fri, August 28 tantek.com /* Tantek */ note twitter frame/script for tweet button with tweeted count only, and frame-src is also needed for current Microsoft Edge

This article is a stub. You can help the IndieWebCamp wiki by expanding it.

Content-Security-Policy (abbreviated CSP) is an HTTP directive that a site can use to restrict what external resources are retrieved by a browser, to mitigate some XSS and injection attacks.

Why

AT&T hotspot ad injection into http sites: http://webpolicy.org/2015/08/25/att-hotspots-now-with-advertising-injection/

How to

Configure your webserver to send a

• Content-Security-Policy

HTTP header (e.g. for Apache, update your .htaccess) according to the policy you prefer (see below for examples to consider).

Examples

Only Resources From Same Domain

Only allow external resources from the precise same domain, no subdomains:

Content-Security-Policy: default-src 'self'

Include subdomains:

Content-Security-Policy: default-src 'self' *.example.com

Where example.com is your trusted top level personal domain.

Allow Only Media From Anywhere

Allow images/audio/video embeds from anywhere, but scripts, style sheets, iframes etc. only from same domain:

Content-Security-Policy: default-src 'self'; img-src *; media-src *

Allow Anywhere Media Whitelist Iframes

Allow images/audio/video embeds from anywhere, iframes from an https whitelist, and scripts, style sheets only from same domain:

Content-Security-Policy: default-src 'self'; img-src *; media-src *; child-src https://player.vimeo.com https://www.youtube.com

IndieWeb Examples:

• Tantek Çelik uses this and more. See details in IndieWeb Examples: Tantek.

IndieWeb Examples

Tantek

Tantek Çelik on tantek.com since 2015-08-28 has used the following CSP on his home page and post permalinks:

Content-Security-Policy: default-src 'self'; img-src *; media-src *; script-src 'self' 'unsafe-inline' https://platform.twitter.com; style-src 'self' 'unsafe-inline'; frame-src https://player.vimeo.com https://www.youtube.com https://platform.twitter.com; child-src https://player.vimeo.com https://www.youtube.com https://platform.twitter.com;

Based on the Allow Anywhere Media Whitelist Iframes example above, with the following additions for the following reasons:

• script-src 'self' 'unsafe-inline' - because I still have some inline scripts that I didn’t want to take the time to fix before, but now have motivation to do so.
  • with https://platform.twitter.com to allow Twitter webaction tweet button with tweeted count to work on my article posts.
• style-src 'self' 'unsafe-inline' - because I still have some inline style sheets and style attributes that I didn’t want to take the time to fix before, but now have motivation to do so.
• frame-src - for backcompat with Safari 8.0.7 (and before?) which is latest version on OSX 10.10.4, and Microsoft Edge (tested as of 2015-08-28 Microsoft Edge build).
• child-src https://platform.twitter.com - to also allow Twitter tweet buttons as noted above.

Resources

• W3C Content Security Policy Editor’s Draft
• 2012-06-15 (updated 2015-05-08) Mike West An Introduction to Content Security Policy
• https://developer.mozilla.org/en-US/docs/Web/Security/CSP/Introducing_Content_Security_Policy
• https://developer.mozilla.org/en-US/docs/Web/Security/CSP/Using_Content_Security_Policy

See Also

• HTTPS
• CORS