Content-Security-PolicyHTTP response header for a Twitter Follow Button.
Here is my follow button:Follow @pfreitag
I inserted the following to get that button:
<a href="https://twitter.com/pfreitag" class="twitter-follow-button" data-show-count="true" data-size="large">Follow @pfreitag</a> <script src="https://platform.twitter.com/widgets.js"></script>
Content-Security-Policy: script-src 'self' platform.twitter.com syndication.twitter.com; style-src 'self' 'sha256-5g0QXxO6NfvHJ6Uf5BK/hqQHtso8ZOdjlnbyKtYLvwc='; frame-src 'self' platform.twitter.com
Let's break that down by each CSP directive:
script-src 'self' platform.twitter.com syndication.twitter.com;
Since we have a
script tag with
src value of
https://platform.twitter.com/widgets.js we need to enable
platform.twitter.com. This script also makes calls to
https://syndication.twitter.com so we apparently need to enable that as well.
We also have the
'self' keyword in there, that just means that scripts from our same domain or same origin are also allowed. You might not need that if you don't have any other JS files.
Another option here might be to use
strict-dynamic and a
nonce. With this approach you don't need to allow
platform.twitter.com syndication.twitter.com, rather you allow the script and trust that it will load resources securely. With this approach Twitter could change the hostname
style-src 'self' 'sha256-5g0QXxO6NfvHJ6Uf5BK/hqQHtso8ZOdjlnbyKtYLvwc=';
Here we've added a sha256 hash of the inline style that the twitter script is using. If twitter changes how they style this, it might break.
frame-src 'self' platform.twitter.com;
The twitter follow button widget embeds an iframe on our page, so we need to tell CSP to allow that by using the
img-src 'self' syndication.twitter.com;
The twitter follow button will loads at this point, but it is also requesting to load an image from
syndication.twitter.com. We will need to add that to our
img-src CSP directive to remove the warning in the console.
Check out the Content Security Policy reference for more information about CSP.
Want to learn the ins and outs CSP? Grab a copy of the CSP Developer Field Guide. It's a short and sweet guide to help developers get up to speed quickly.Grab a Copy
Advisory Week is a weekly roundup of all the security advisories published by the major software vendors.