Hosted Extension runs into Content Security Policy issue

Extensions
1

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 - the ebs file is exactly the same and the way i use it is similar too), i.e.

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/’ 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, but this should adhere to the CSP, because it is https?

Thanks in advance.

2

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?

3

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