Twitch Embedded Player on Ionic iOS not working
I have the same issue. Security limitations are the culprit indeed: I opened the Safari console while the iframe was trying to load and saw this error:
Refused to load
https://player.twitch.tv/?channel=...&controls=false&parent=localhost&muted=true
because it does not appear in the frame-ancestors directive of the Content Security Policy.
Looking at this security header that Twitch returns, it looks like this:
Content-Security-Policy: frame-ancestors http://localhost:* https://localhost:*
However, when using the Ionic WebView, according to its documentation:
iosScheme
<preference name="iosScheme" value="httpsionic" />
Default value is ionicConfigures the Scheme the app uses to load the content.
Values like
http
,https
orfile
are not valid and will use default value instead.
So your WKWebView
will have ionic://locahost
as its application URL by default, which doesn't match the http://localhost
and https://localhost
prefixes specified by Twitch.
I tried using &parent=ionic://localhost
in the Twitch iframe URL. The WKWebView
doesn't refuse to open the iframe, but Twitch itself freaks out about the special characters in that parameter and refuses to render its player page.
To me it seems that currently, iOS Ionic/Cordova Apps and Twitch iframes are mutually exclusive.
Edit: I found a bunch of discussions in the Twitch forum talking about this subject (1, 2), but none of them went technically in-depth to the point where a working solution or workaround could be found. Unfortunately, threads are closed after 1 month of inactivity, so I had to open yet another thread in the Twitch forum explaining the technical details from my point of view. I also added a feature request in their user-voice feedback portal. I'm afraid trying to make Twitch realise / accept that they should do something about mobile embeds is all we can do at this point. Here's the link to it:
https://twitch.uservoice.com/forums/310213-developers/suggestions/44682766-make-embeds-work-on-ios-web-based-apps-like-ionic