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.
Do I need to whitelist the URLs of libraries being pulled by my app? For instance we use firebase for authentication would this be the reason it is violating CSP?
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?
You may get review denied for this feature. And have to add it anyway.
See section 4.6
You may also have issued under 4.6.1 since you are a calendar which may compete with Twitch’s calendar, however this is unlikely.
4.6 is a lot more lax than it used to be with link outs, but non essential link outs should be avoided.
External libraries are not allowed
See section 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.
Also odd that you are trying to use recapctha anyway, since Twitch itself performed a capcthca check when the user logged into Twitch. So you are extra capchating…
You also are using an absolute link “/assets” extension in hosted test and above the code links in a sub folder. So this load request and any like it will fail.
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.
OK so you are saying that the reason for my error is that in my mobile testing I am loading an old version of the extension that does not have the correct whitelist URLs in the manifest?
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?
Turns out this was related to a isReady check function in our JavaScript that would not fire properly in the twitch webview. When the check failed it would hide the app, resulting in the white screen I was experiencing.
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.
