---

Example Twitter Follow Button

Here is my follow button:

Follow @pfreitag

As you can see this follow button needs to use JavaScript because it will fetch the number of twitter followers I have. If you don't need the JavaScript version of the button, you can simply create your own button and not worry about adding support for CSP.

HTML Markup Used for Button Above

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>

CSP Header for Twitter Follow Button

Here's the header I'm using:

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

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 syndication.twitter.com in their JavaScript, and your CSP would not break.

style-src

style-src 'self' 'sha256-akbuxUDobAg86+TiT5p8TENoFqlhtGWtEqHedhVNujw=';

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

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 frame-src directive.

img-src

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.

CSP Policy for Twitter Pixel Code

If you need to use the Twitter pixel code (or X pixel code) for ad audience building and conversion tracking, then you'll need to add the following to your script-src and img-src CSP directive:

script-src static.ads-twitter.com;img-src t.co analytics.twitter.com

That is assuming you are already running on HTTPS, otherwise you'll need to add https:// to the twitter url.

Here's what the tracking code looks like:

<!-- Twitter conversion tracking base code -->
<script>
	!function(e,t,n,s,u,a){e.twq||(s=e.twq=function(){s.exe?s.exe.apply(s,arguments):s.queue.push(arguments);
	},s.version='1.1',s.queue=[],u=t.createElement(n),u.async=!0,u.src='https://static.ads-twitter.com/uwt.js',
	a=t.getElementsByTagName(n)[0],a.parentNode.insertBefore(u,a))}(window,document,'script');
	twq('config','oiuel');
</script>
<!-- End Twitter conversion tracking base code -->

What else goes inside a CSP policy?

Check out the Content Security Policy reference for more information about CSP.

---