# Hosted Extension runs into Content Security Policy issue

**URL:** <https://discuss.dev.twitch.com/t/hosted-extension-runs-into-content-security-policy-issue/41866>\
**Category:** Extensions\
**Created:** [November 12, 2022, 6:26am UTC](https://discuss.dev.twitch.com/t/hosted-extension-runs-into-content-security-policy-issue/41866 "2022-11-12T06:26:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![theX](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/thex/32/21019_2.png) [@theX](https://discuss.dev.twitch.com/u/theX)\
**Post date:** [November 12, 2022, 6:26am UTC](https://discuss.dev.twitch.com/t/hosted-extension-runs-into-content-security-policy-issue/41866/1 "2022-11-12T06:26:52Z")

</div>

Hello,

I am looking to build a twitch extension, which is supposed to hit my EBS hosted on heroku. ( basically adapted from github repo from the top answer from this: [Get viewer username inside extension](https://discuss.dev.twitch.com/t/get-viewer-username-inside-extension/31717) - the ebs file is exactly the same and the way i use it is similar too), i.e.

```auto
wait fetch(
        "https://xxx.herokuapp.com/",
            {
                method: 'POST',
                headers: {
                    authorization: 'Bearer ' + window.Twitch.ext.viewer.sessionToken
                }
            }
        ).then(resp => {
          return resp.json();
        })
        .then(resp => {
            my_func(resp.data.display_name) // do something with the username;
        })

```

"

This works perfect when the extension is hosted locally. However, after I build the extension (with `yarn build`, since my extension was based off create-react-app), zip the build, upload to twitch, and move to hosted test, I run into the error:

> Refused to connect to ‘[https://xxx.herokuapp.com/](https://xxx.herokuapp.com/)’ because it violates the document’s Content Security Policy.

I am new to this and pretty unfamiliar with web security in general, so I am not sure if I was supposed to add something as a meta tag in my index.html as well, which other people seem to have done?

I read this: [Life Cycle Management | Twitch Developers](https://dev.twitch.tv/docs/extensions/life-cycle#:~:text=Content%20Security%20Policy%20(CSP),sources%20such%20as%20an%20EBS), but this should adhere to the CSP, because it is https?

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![theX](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/thex/32/21019_2.png) [@theX](https://discuss.dev.twitch.com/u/theX)\
**Post date:** [November 12, 2022, 6:55am UTC](https://discuss.dev.twitch.com/t/hosted-extension-runs-into-content-security-policy-issue/41866/2 "2022-11-12T06:55:54Z")

</div>

OK after reading some more I realized I was supposed to add the link to the allowlist which fixes everything, don’t know if I should leave the question up, or should I delete it?

---

<div class="post-metadata">

**Author:** ![JaredEpicpower](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/jaredepicpower/32/3303_2.png) [@JaredEpicpower](https://discuss.dev.twitch.com/u/JaredEpicpower)\
**Post date:** [November 14, 2022, 10:26pm UTC](https://discuss.dev.twitch.com/t/hosted-extension-runs-into-content-security-policy-issue/41866/3 "2022-11-14T22:26:10Z")

</div>

Glad you got it figured out! Was going to suggest your fix.