# Content Security Policy

**URL:** <https://discuss.dev.twitch.com/t/content-security-policy/12210>\
**Category:** Extensions\
**Created:** [September 27, 2017, 11:02am UTC](https://discuss.dev.twitch.com/t/content-security-policy/12210 "2017-09-27T11:02:25Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Samiff](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/samiff/32/3004_2.png) [@Samiff](https://discuss.dev.twitch.com/u/Samiff)\
**Post date:** [September 27, 2017, 11:02am UTC](https://discuss.dev.twitch.com/t/content-security-policy/12210/1 "2017-09-27T11:02:25Z")

</div>

I’m running into an issue after moving to hosted test I’d like some help with. For my extension backend service (EBS), I’m using Google Firebase. The clients connect to Firebase to obtain live data. Here is what I’m running into:

`Refused to load the script 'https://my-db-name.firebaseio.com/.lp?start=t&ser=80818288&cb=2&v=5' because it violates the following Content Security Policy directive: "script-src 'self' https://my-ext-id.ext-twitch.tv https://extension-files.twitch.tv".`

This is sort of new to me, but I did try add the following to my respective client HTML files:

`<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://my-ext-id.ext-twitch.tv https://extension-files.twitch.tv https://my-db-name.firebaseio.com">`

But I’m still seeing the CSP errors. Will setting the CSP like that even work? Any direction here would be appreciated.

**Edit** : So it looks like I’m able to affect the CSP errors I’m getting by modifying the `<meta>` tag, but only for things like `font-src` or `style-src` and not the one I actually need `script-src`. Still looking for help with this.

---

<div class="post-metadata">

**Author:** ![samcm](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/samcm/32/3387_2.png) [@samcm](https://discuss.dev.twitch.com/u/samcm)\
**Post date:** [September 27, 2017, 12:01pm UTC](https://discuss.dev.twitch.com/t/content-security-policy/12210/2 "2017-09-27T12:01:40Z")

</div>

I tried to play around with Firebase as well and ran in to the same issue. I don’t think you’re going to be able to get it working because Firebase loads JS from Firebase dynamically (I think?) and the CSP the Iframe is running in only allows JS to be loaded from the Twitch CDN.

There might be a way to get it working though. I only messed with it for a bit before giving up because in the end they’re probably going to deny Firebase in the approval process due to un-readability/“obfuscation”.

---

<div class="post-metadata">

**Author:** ![rbartlet](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/rbartlet/32/3219_2.png) [@rbartlet](https://discuss.dev.twitch.com/u/rbartlet)\
**Post date:** [October 3, 2017, 9:39pm UTC](https://discuss.dev.twitch.com/t/content-security-policy/12210/3 "2017-10-03T21:39:02Z")

</div>

@samcm is correct in that our CSP will prevent JS from being loaded from a source other than Twitch. There is also policy in regards to this: [https://dev.twitch.tv/docs/extensions#guidelines-and-policies](https://dev.twitch.tv/docs/extensions#guidelines-and-policies) (the very first line).

---

<div class="post-metadata">

**Author:** ![bribrobot](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/bribrobot/32/4252_2.png) [@bribrobot](https://discuss.dev.twitch.com/u/bribrobot)\
**Post date:** [October 11, 2017, 9:20pm UTC](https://discuss.dev.twitch.com/t/content-security-policy/12210/4 "2017-10-11T21:20:06Z")

</div>

It looks like that endpoint is the method Firebase uses to deliver a non-WebSocket fall-back when WebSocket connections fail (`?.lp` -\> “Long Polling” endpoint), and that uses JSONP to deliver the data instead. In that scenario the JSONP ultimately gets included as a `<script>`, but only for (I believe) the purpose of delivering data when cross-domain policies in web browsers prohibits `.json` from being loaded directly.

The good news is that endpoint doesn’t get requested at all in the happy path where the WebSocket connects OK.

This leaves me thinking Firebase might still be fine to use as a WebSocket-only back-end, let’s say if you force it to not allow the long polling fall-back (`firebase.database.INTERNAL.forceWebSockets()`).

Re: readability of the libraries in the submitted zip, wonder if webpack-importing the Firebase requisites into a `vendor.js` would be preferable / make it fine? Since the libraries they provide on their static CDN appear to be minified e.g. [https://www.gstatic.com/firebasejs/4.5.0/firebase-database.js](https://www.gstatic.com/firebasejs/4.5.0/firebase-database.js)

---

<div class="post-metadata">

**Author:** ![Samiff](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/samiff/32/3004_2.png) [@Samiff](https://discuss.dev.twitch.com/u/Samiff)\
**Post date:** [October 12, 2017, 8:21pm UTC](https://discuss.dev.twitch.com/t/content-security-policy/12210/5 "2017-10-12T20:21:26Z")

</div>

I ended up[forcing WebSockets](https://stackoverflow.com/a/44937826) for the clients and adding the appropriate CSP sources. Seems to have worked out great for my extension.

---

<div class="post-metadata">

**Author:** ![bribrobot](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/bribrobot/32/4252_2.png) [@bribrobot](https://discuss.dev.twitch.com/u/bribrobot)\
**Post date:** [January 24, 2022, 9:21pm UTC](https://discuss.dev.twitch.com/t/content-security-policy/12210/6 "2022-01-24T21:21:26Z")

</div>

Curious - have you or anyone else had to sort out what URLs to whitelist for Firebase realtime database apps on extensions in light of the new extension policy? [New Extensions policy for Content Security Policy (CSP) directives and timeline for enforcement](https://discuss.dev.twitch.com/t/new-extensions-policy-for-content-security-policy-csp-directives-and-timeline-for-enforcement/33695/)

Looking in to this now, seemingly would need to be `ws://[APP_ID].firebaseio.com` for the websocket, `https://[APP_ID].firebaseapp.com` for any Firebase function APIs, any others?

---

<div class="post-metadata">

**Author:** ![bribrobot](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/bribrobot/32/4252_2.png) [@bribrobot](https://discuss.dev.twitch.com/u/bribrobot)\
**Post date:** [January 26, 2022, 6:15pm UTC](https://discuss.dev.twitch.com/t/content-security-policy/12210/7 "2022-01-26T18:15:16Z")

</div>

I’m seeing `wss://s-usc1c-nss-*.firebaseio.com/.ws?v=5&ns=[APP_ID]` being connected to in testing, planning to try that in whitelist as well.

---

<div class="post-metadata">

**Author:** ![pierregoutheraud](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/pierregoutheraud/32/6691_2.png) [@pierregoutheraud](https://discuss.dev.twitch.com/u/pierregoutheraud)\
**Post date:** [February 1, 2022, 10:45am UTC](https://discuss.dev.twitch.com/t/content-security-policy/12210/8 "2022-02-01T10:45:33Z")

</div>

@bribrobot Did Twitch allowed this url in your review?  
They did not allow `wss://*.firebaseio.com` on mine, so I had to changed it to a more specific one, I am waiting for the review. I haven’t added `wss://s-usc1c-nss-*.firebaseio.com` though.

---

<div class="post-metadata">

**Author:** ![jeep](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/jeep/32/18248_2.png) [@jeep](https://discuss.dev.twitch.com/u/jeep)\
**Post date:** [May 27, 2022, 12:50am UTC](https://discuss.dev.twitch.com/t/content-security-policy/12210/9 "2022-05-27T00:50:03Z")

</div>

Did you have any luck with this? I was initially using `wss://[APP_ID].firebaseio.com` but it seems like it doesn’t work by itself.