Content Security Policy directive: "script-src" issues

Extensions
1

Hi

I’m trying to build an extension that uses IP geolocation data to show a different panel based on country (to show country specific sponsors).
However I get:
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' https://a5uipe7uq1s4tjmuqvym52ryjtdz0p.ext-twitch.tv https://extension-files.twitch.tv https://www.google-analytics.com". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style

But I have no inline scripts outside the bundle as you can see in the source below, I initially used an onload event but switched to the button for testing.
The script calls on an API over at https://ipinfo.io/ but its on my whitelist in the dev panel under connect-src but it doesn’t even seem to get that far
it worked fine on the rig and local hosting, so I know the code is good, but need to figure out why its running afoul of the CSP rules when as far as I can tell it meets them

<!DOCTYPE html>
<html>
<head>
    <title>Viewer Page</title>
</head>
<body">
    <link rel="stylesheet" type="text/css" href="panel.css" />
    <div id="app" class="full-height"></div>

    <script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="viewer.js" type="text/javascript"></script>
    <h2>Hello Viewers</h2>
    <p>If you are seeing this you are from a country where I do not currently have any suitable partner or affilate deals</p>
    <button onclick=getIPLocation()>Testt</button>
    
    </div>

</body>
</html>
2

Well I figured it out, its because the onclick and onload are also not allowed inline.
So I had to switch to an eventlistener over in my script and no it works fine!

It would nice if the documentation on security actually covered this better!

3

It is documented, it’s just documented in the CSP documentation https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src

It’s a standard adopted by most browsers, and is beyond the scope of the Twitch documentation to go into too much detail on standards external to Twitch (such as if you want more information on OAuth, you would go read the OAuth2.0 specification document rather than Twitch including it all in their docs).

4

That’s fine to rely on other documentation but how about referring to it? It would be simple to add one line to the documentation to link the afore mentioned page.

5

The cotnetn rules and thus JS unsafe-inline is mentioned as not allowed here

as unsafe-inline is not in the default CSP for Script-src

And noted in the Google Analytics docs

Since Twitch extensions do not allow inline Javascript

it’s also inferred via 2.8

2.8 All front-end HTML, CSS, and Javascript files used by your Extension must be included in the zip file for your assets. You should not include extraneous files or code not used by your extension.

The restrictions on content, probably, could be more explicit however.