[SOLVED] Vue.js is not working on Hosted Test

Extensions
7

I’m having a similar problem, in that using Vue locally worked fine, but during hosted mode, nothing works.

I see this error message in the console

“Refused to execute inline script because it violates the following Content Security Policy directive: “script-src ‘self’ https://0ms0a4rmjh6b7beixaqndrefsz1dfy.ext-twitch.tv https://extension-files.twitch.tv”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-y39vCFYw/BwWj881TjtfNsUChIKFjCrwIrdHdEdBvQQ=’), or a nonce (‘nonce-…’) is required to enable inline execution.”

You can see this error on my viewer.html page: viewer.html

Here is my zip file
dist.zip

I’ve verified that my assets were uploaded correctly, as i’m able to view the js/css files on the Twitch cdn.

EDIT: SOLVED!!!

The problem had nothing to do with the content security policy. It was an issue with the routing. During development, the routes take the form of localhost:8080/viewer.html.
Therefore my defined vue-routes would look like

            {
                path: '/viewer.html',
                component: Viewer
            },

The twitch dev dashboards tells you that during Hosted testing, the base URI will be

0ms0a4rmjh6b7beixaqndrefsz1dfy.ext-twitch.tv,

and the path for viewer.html would be viewer.html, same for config and live config. Therefore the routes would look like

0ms0a4rmjh6b7beixaqndrefsz1dfy.ext-twitch.tv/viewer.html.

I assumed that my routes would still work, because /viewer.html would match

0ms0a4rmjh6b7beixaqndrefsz1dfy.ext-twitch.tv/viewer.html

However while trying to debug the problem, i noticed that the routes were actually of the form

/0ms0a4rmjh6b7beixaqndrefsz1dfy/0.0.1/eaabd8a1316d963ee6d712a843827d75/viewer.html?anchor=video_overlay&language=en&mode=dashboard.

Note the extra path segments in /0.0.1/eaabd8a1316d963ee6d712a843827d75/, which caused my routes to not match. My current fix is to declare the route as

            {
                path: */viewer.html',
                component: Viewer
            },

which matches any route that ends with viewer.html. After i did that, my extension started working.

Was i wrong to assume that the hosted test routes would be

0ms0a4rmjh6b7beixaqndrefsz1dfy.ext-twitch.tv/viewer.html?

The dev dashboard seems to imply that.

1 Like