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.
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
Check out the Content Security Policy reference for more information about CSP.