Preventing timeline widget CSP errors on a single-page application

[Rees]

We’re looking to embed the Twitter timeline widget into our Next.js/React frontend. Although the widget is working (after allowing many URIs), we are receiving a bunch of console errors from the browser due to our Content Security Policy.

Notably, the main errors stem from our style-src directive not including the unsafe-inline value (~25 errors) and our img-src directive not including the data: value for the SVG icons (eg. like/retweet). Due to the nature of the site we can’t permit either of these values in our policy.

The Webpage properties docs page indicates we should be able to set csp=on within a meta tag to supress various CSP warnings, though doing so appears to have no effect. The section doesn’t detail specifically which warnings will be surpressed.

My best guess would be that the csp=on solution either doesn’t work very well with single-page applications, the documented solution is no longer supported, or I’m implementing this incorrectly. We have tried using the react-twitter-widgets library (which I believe injects the widget.js script on the client-side only), as well as simply including the widget’s <script> tag alongside the csp=on declaration in the head; this implementation would be server-side rendered. Both approaches allowed the widget to show and function, though neither were able to surpress the CSP errors in the console.

I can’t seem to find any more information on the csp=on meta attribute, and all mentions I can find seem to be half a decade old. I may also be making too many assumptions as to how much control this attribute actually has over the widget; though I would like to assume it will prevent inline styles from being injected, as well as use images from a CDN rather than as a Data URI.

If there is another workaround/solution to this that I have missed it would be greatly appreciated.

[lananelson]

Hi Rees!

Could you provide exact examples of CSP warnings that you are seeing?

[Rees]

Hi Lana!

Here’s some of the errors being caused from our Content Security Policy clashing with the widgets.js file:

22 Refused to apply inline style errors stemming from here:

3 Refused to apply inline style errors here:

and 4 Refused to load the image errors. It looks like I can’t really embed these in any useful way as the URI links are super long, so I think the best thing I can do is include images of what the data URIs resolve to:

I hope this helps!