Content Security Policy (CSP)

CSP Twitter Follow Button / Pixel Code Examples

Here's how to add a Content-Security-Policy HTTP response header for a Twitter Follow Button, or the Twitter Pixel Code.

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="" class="twitter-follow-button" data-show-count="true" data-size="large">Follow @pfreitag</a>
<script src=""></script>

CSP Header for Twitter Follow Button

Here's the header I'm using:
Content-Security-Policy: script-src 'self'; style-src 'self' 'sha256-5g0QXxO6NfvHJ6Uf5BK/hqQHtso8ZOdjlnbyKtYLvwc='; frame-src 'self'

Let's break that down by each CSP directive:


script-src 'self';

Since we have a script tag with src value of we need to enable This script also makes calls to 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, rather you allow the script and trust that it will load resources securely. With this approach Twitter could change the hostname in their JavaScript, and your CSP would not break.


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 'self';

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 'self';

The twitter follow button will loads at this point, but it is also requesting to load an image from 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:


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 -->
<!-- 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.

CSP Developer Field Guide

CSP Developer Field Guide

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

Struggling to stay on top of security advisories?

Advisory Week is a weekly roundup of all the security advisories published by the major software vendors.