We are currently working on a Twitch extension that allows our users to embed a list of their upcoming events in their channel. Twitch users can add the events listed to their google or apple calendars, or click into the event itself in order to open our website and get more information.
Currently when our extension attempts to open a URL in the mobile Twitch app the webview pops up but then the site fails to load because it says it violates the Content Security Policy.
Yes I agree, our hope is to further expand the twitch extension to provide views with additional event info instead of linking out to our site. However, for our MVP we are opting to link out the website as we also have login/logout functionality for calendar syncing and other features we would like to bring to the extension.
OK so I have whitelisted app.readyup.com which is the root domain of all my links, and the site itself is SSL compliant so I am still unsure as to what would be violating CSP here?
The site does load external libraries, do I also have to whitelist these domains or, as I am assuming from your comment that as long as they are loading over HTTPS with valid SSL they should be fine?
I appreciate the feedback on app approval, I am hopeful we will pass review but if not then we will have to cross that bridge (and make a new topic haha) when we come to it.
Either way right now I would like to get this link working because even if we did add the feature to view event info on Twitch we would still want to have links in the extension to our application for users, and those links need to render correctly, and right now CSP is blocking them.
I think there is some confusion, the libraries I referenced in my previous comment live on app.readyup.com they are not in the extension itself.
I don’t think that is correct, I have been working on this for a few days now and created several versions of the extension. Even one where it loads no cards and just shows a link. Every time I get the CSP error, despite even whitelisting the exact event URL and not just the root domain.
I also have other people testing different versions of the extension on their devices, and they are seeing the same behaviour.
Here is an example from one of my released extensions
And at time of writing it’s working. (on iOS)
It could however be that the Twitch CSP is working fine, but the CSP/other restrictions on your website itself is blocking. The error message didn’t declare which/whose CSP was at fault just that there was one.
If you can get developer tools going you might be able to trace it. But the same CSP will apply to Desktop and Mobile, so you can test on Desktop at well if needed.
Android might be hanging onto who knows what in terms of caching
The site works fine everywhere else, browser on desktop and mobile loads the site with no issue. No CSP violations on android browsers (chrome, FF, Opera) but in the Twitch app I get a CSP error in the webview. I can even hit the three dots in the corner and hit “open in browser” and the site will load fine. Seems to be related only to the Twitch app or Twitch CSP to me.
How would I get dev tools running for the webview in the twitch app?
Would be cool if there was some kind of stack tracing added to the Twitch Extension Dev Rig for problems like this, the check functions correctly on other browsers just not in the Twitch webview, but figuring that out was very difficult/time consuming.