Embedded Player within iOS Web Based mobile app (e.g. Ionic) not working

API
1

I’d like to reiterate this subject: Embedded Player within ios webbased mobile app (e.g. Ionic) not working from @SleeplessFox .

On Android its working perfect but in the iOS App the iframe will not be shown and no player is available. Just a white screen.

“Localhost” web content cannot be served with “http://localhost” on iOS, that’s just a limitation of iOS’ WKWebView. It has to be a custom scheme other than http/https/file. The popular Ionic framework uses ionic://localhost by default. However, twitch only allows to specify the hostname in the “parent” parameter. If we specify ...&parent=ionic://localhost, Twitch refuses to render the player because of the special characters in the parent parameter.

I explained it in more detail on StackOverflow here: Twitch Embedded Player on Ionic iOS not working - Stack Overflow

What we’d need is for twitch to allow us to specify the scheme in addition to the parent host. Either in the parent parameter like ...&parent=ionic://localhost, or with a dedicated parameter, something like ...&parent=localhost&scheme=ionic - or anything else, the goal being that we get a CORS header like:

Content-Security-Policy: frame-ancestors ionic://localhost:*

Could someone from Twitch please check if this is possible?

Best regards,
Mike

2

Parents are domain names you do not include schema or path data.

So your parent should be just localhost in this example.

Sounds like you might want to try the elctron embed method instead and see if that works for you if the published iOS methods do not.

Thats if you can modify the other call data.

Bluelava devised a working iOS solution

You can always open a feature request via UserVoice instead:

https://twitch.uservoice.com/forums/310213-developers

I’m not sure if Twitch will go for it, as then that means Twitch would be maintaining an “allowlisted” list of supported frameworks. And there’ll always be “another framework” missing from the list

3

Hi @BarryCarlyon , thanks for the quick response!

The fundamental difference between @jbulava 's solution and any Ionic app is the location of the “top”, root document. He’s uploading his html to a webserver and directing the WKWebView’s root frame to that URL (https://mywebsite.com/embed in his example):

struct ContentView: View {
    var body: some View {
        Webview(url: URL(string: "https://mywebsite.com/embed")!)
    }
}

(note that the webview is technically loading a document from an https scheme here, which matches twitch’s CORS header - so no problem here)

In Ionic however, the root document is usually bundled within the application, so located at localhost. As said before, because of iOS limitations, only reachable using a custom scheme like ionic://localhost.

I tried chaining iframes, so loading an <iframe src="https://mydomain.com/twitch.html"/> that itself has something like <iframe src="https://player.twitch.tv/?channel=...&parent=mydomain.com"></iframe>. But as expected, since this would bypass browser security, this gives the same error in iOS:

Refused to load https://player.twitch.tv/?channel=...&parent=mydomain.com because it does not appear in the frame-ancestors directive of the Content Security Policy.

The top frame’s <scheme>://<domain> needs to be in Twitch’s CORS header, I don’t see any workaround to this.

They actually wouldn’t have to. If they allow specifying a scheme, they could just accept any scheme a developer specifies. If they have security concerns, of course, they might want to allow only certain scheme’s. Note that in ionic, I can chose any custom scheme I want - just not http, https and file (that’s because of iOS though). So just having a single allowed custom scheme (be it ionic://, local:// or whatever) would solve this whole problem :wink:

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.