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

API
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: