Collection of scripts, thoughts about CSP (Content Security Policy)

Related tags

Laravel notifications csp csp-directives content-security-policy report-uri csp-parsers csp1 csp2 csp3
Overview

CSP useful, a collection of scripts, thoughts about CSP

I'm testing and using CSP (Content Security Policy), and here are some thoughts, resources, scripts and ideas on it.

Scripts

Report-URI folder

In folder "report-uri", you may find examples of CSP parsers you can use for report-uri.

  • csp-parser-basic.php : the most basic one, it sends an e-mail.
  • csp-parser-enhanced.php : avoids some bugs (listed below as CSP WTF), with a LOT of filters
  • csp-parser-with-database.php : put notifications in a database, then you can do whatever you want with all these informations! :)
  • csp-parser-with-database-pdo.php : also puts CSP notifications in a database but uses PDO instead of the mysqli extension.

CSP directives for third-party services

In folder "CSP for third party services", you may find examples of directives you need to use for some services.

CSP Check folder

In folder "csp-check", you may find the source of a proof of concept: this script was a quick and dirty way to reproduce a bug in Firefox, you can see it in action here: https://csp.nicolas-hoffmann.net/

Basically, the page generates an unique id, notifications sent to report-uri are put in database, the page makes an AJAX call to database, and the unique id helps to find CSP errors in database.

This is useful to prove bugs, not only for Firefox. ^^

To reproduce the bug:

  1. Open https://csp.nicolas-hoffmann.net/
  2. The page is going to generate a unique id, ex https://csp.nicolas-hoffmann.net/?id=foo
  3. Wait some seconds. The page doesn't find any notification in the database.
  4. Now inspect the page with Firefox inspector, please highlight some elements.
  5. Close the inspector
  6. Refresh the page with the id you have : https://csp.nicolas-hoffmann.net/?id=foo
  7. It is going to find a lot of CSP errors.

At the beginning, I've made it to prove that some Chrome extensions are sending notifications to report-uri (while they should not), and it helped to find/prove a bug in Firefox Inspector.

Here is the reported bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1195302

It should be is fixed with Firefox 42 https://bugzilla.mozilla.org/show_bug.cgi?id=1185351 :)

CSP WTF???

In folder "CSP WTF", you may find examples of strange notifications you may receive. Feel free to add/explain some.

Now the list is splitted in two, explained or not yet explained notifications.

Small tips and tricks

Multiple domains

Be careful if you have multiple domain names (foo.com, foo.net) pointing to a single website while using 'self' as value. Example: if a user is using a full url for an image, let's say http://foo.com/image.jpg, using 'self' won't be enough if the user is on foo.net. Be sure to allow all necessary domains.

Generate a hash

If you really have to use some inline scripts/css, for example:

<script>alert('Hello, world.');</script>

You might add 'sha256-qznLcsROx4GACP2dm0UCKCzCG-HiZ1guq6ZZDob_Tng=' as valid source in your script-src directives. The hash generated is the result of:


base64_encode(hash('sha256', "alert('Hello, world.');", true))

in PHP for example.

Chrome PDF viewer blocking

According to Philippe De Ryck, setting CSP's object-src to 'none' blocks Chrome's PDF viewer. As he says, "unless you're hosting vulnerable flash files yourself, go with 'self', and ignore the warning on the CSP Evaluator".

Safari

According to, Safari’s default media controls get blocked when applying a Content-Security-Policy, see https://www.ctrl.blog/entry/safari-csp-media-controls (hint, allow img-src).

What CSP is really good for

In development

I use CSP to clean up some bad old contents (with inline-styles for example).

  1. Just activate CSP on a site with a report-uri
  2. Ask your boss/collegues/grandma to browse the website
  3. All notifications will come without doing anything (yes, I’m lazy)
  4. Yay, you know where you have to make some cleanup

Moreother, if you don't have the time to clean it, setting up CSP policy will avoid bad old styles from breaking the nice/clean new design. Or it will tell you when contributors are doing shit on the website.

To migrate a website to HTTPS

You might read how the Guardian moved to HTTPS using CSP: https://www.theguardian.com/info/developer-blog/2016/nov/29/the-guardian-has-moved-to-https

Progressive enhancement and orthogonality

As far as I can see, using CSP on my jQuery plugins helped me a lot to design them without inline styles/js. See for example: https://a11y.nicolas-hoffmann.net/ or https://van11y.net

So it is a great help for progressive enhancement, orthogonality and clean front-end.

How to see easily CSP directives on a website

For Firefox: make Maj+F2 and type "security csp". It will show you directives and advices.

If you have webdevelopper toolbar, go into infos - HTTP headers.

About plugins

JS/jQuery plugins should provide the CSP requirements they need to work (especially inline-styles or inline-js), so:

Bugs I've found

Resources

Resources

CSP with Google

About collecting and filtering reports

Why you should use CSP

Interesting posts on how to deploy CSP

Other

Future of CSP

Online tools that test CSP

Add-ons Navigator

CMS Plugins

Enjoy!

Nicolas Hoffmann - @Nico3333fr

Comments
  • blocked domain === domain the site runs on?

    blocked domain === domain the site runs on? 

    {
    "csp-report": {
        "document-uri": "https://www.example.org/...",
        "referrer": "",
        "violated-directive": "img-src 'self'",
        "original-policy": "default-src 'self';",
        "blocked-uri": "https://www.example.org"
    }
}

UserAgent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534+ (KHTML, like Gecko) BingPreview/1.0b

    Where "example.org" is replaced by the live domain. I guess it is something about Big Preview but I have no idea wtf is happening there. As 'self' is allowed so the domain the rule run on should be allowed.

    question 
    opened by zero-24 7
  • Remove misconfigured WTFs

    Remove misconfigured WTFs

    Many of the WTFs are just the result of misconfigured CSP directives. For example:

    • https://github.com/nico3333fr/CSP-useful/blob/master/csp-wtf/not-explained.md#many-css-class-names-in-this-file
    • https://github.com/nico3333fr/CSP-useful/blob/master/csp-wtf/not-explained.md#arelnofollow

    Those are both lacking 'self' for style-src, so their styles are getting blocked.

    A good chunk of the script-sample entries fall into this category. Anything with blocked-uri: self should be considered to be a misconfiguration--the developer is simply missing 'self'.

    opened by Zenexer 5
  • Explanation for https://sxt.cdn.skype.com/assets/fonts/SkypeAssets-Light.ttf

    Explanation for https://sxt.cdn.skype.com/assets/fonts/SkypeAssets-Light.ttf

    It's this: https://chrome.google.com/webstore/detail/skype/lifbcibllhkdhoafpjfnlhfpfgnpldfl

    Trying to find an email address to tell them their extension is broken.

    enhancement 
    opened by lol768 4
  • Expand explanation for Google Tag Manager scripts

    Expand explanation for Google Tag Manager scripts

    Looking closer at this failure (which I've come across elsewhere) by reviewing the JS it attempts to load reveals more information about the possible issue.

    Explanation 
    opened by daveslutzkin 3
  • root .mod > ._jH + .rscontainer???

    root .mod > ._jH + .rscontainer???

    https://github.com/nico3333fr/CSP-useful/blob/master/csp-wtf/not-explained.md#root-mod--_jh--rscontainer

    Comes from https://easylist-downloads.adblockplus.org/easylist.txt (##.mod > ._jH + .rscontainer in the middle) and some ad blocking extensions like uBlock Origin add the CSS in a