Twitch Embedded Player on Ionic iOS not working - ios

I create a App with Ionic which embed the twitch player for streams and clips.
var url = https://player.twitch.tv/?video=v${videoId}&time=${time}&parent=localhost
<iframe [src]='url' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe>
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.
Does anybody know what the problem can be related to ios?

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 ionic
Configures the Scheme the app uses to load the content.
Values like http, https or file 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

Related

iOS - in app with SFSafariViewController unable to load another host in iframe

I am trying to load the host1 page, it contains iframe and the URL for the iframe is host2. But iframe with URL host2 is not loading properly.
I am loading host1 page through SFSafariViewController. If I load the same thing with the iPhone safari browser then it is working fine but not working with SFSafariViewController. As per my understanding, WKWebview has some limitations but SFSafariViewController doesn't have but still facing the issue.
I have tried the below options also in iOS14.5.1 but still, it is not working:
Enabled Allow Cross-Website Tracking by using NSCrossWebsiteTrackingUsageDescription in info.plist
Enabled Allow Tracking by using Privacy - Tracking Usage Description in info.plist
used WKAppBoundDomains also.
am I missing anything, please help me out?
Adding few more details:
When I am inspecting the code got the below errors with the mobile app SFSafariViewCotroller and the required content is not loading, but it is working fine with mobile, desktop Safari browsers and not showing any errors.
Refused to load {URL://_csrfRefresh=1} because it does not appear in the frame-ancestors directive of the Content Security Policy.
Sandbox access violation: Blocked a frame at {URL} from accessing a cross-origin frame. Ther being accessed is sandboxed and lacks the "allow-same-origin" flag
Attaching a screenshot below for reference,

WKWebView XMLHttpRequest fails with custom url scheme

I'm building a mobile app using WKWebView. I register custom url schemes image:// and thumb:// to serve assets from the native part to the web part of the app.
webViewConfiguration.setURLSchemeHandler(handler, forURLScheme: "image")
webViewConfiguration.setURLSchemeHandler(handler, forURLScheme: "thumb")
This approach works well if urls with a custom scheme are used in HTML. For example, <img src="thumb://watermarkly.com/1.jpg" /> works properly - WKWebView invokes my handler and displays the result. However, WKWebView blocks requests if I try to fetch these urls using XMLHttpRequest:
[Warning] The page at https://watermarkly.com/app/watermark/ was allowed to display insecure content from thumb://watermarkly.com/1.jpg.
[Warning] [blocked] The page at https://watermarkly.com/app/watermark/ was not allowed to display insecure content from image://watermarkly.com/1.jpg.
[Error] Not allowed to request resource
[Error] XMLHttpRequest cannot load image://watermarkly.com/1.jpg due to access control checks.
The only difference here is that "thumb:" url was assigned to an img tag, while "image:" url were fetched via XMLHttpRequest. Unfortunately, no other info provided in Safari Developer Tools.
The problem appears on a real devices only - everything works properly in iOS Simulator.
Is there something I need to configure to make it work for XMLHttpRequests as well?
Update
We switched from HTTPS to HTTP to make XHR to solve the problem.
Unfortunately, custom url schemes seems not to work on some iPhones. We have 5 customers with iPhones where nor switching to HTTP, nor sending Access-Control-Allow-Origin header help. We weren't able to identify which setting causes the issue - the problem cannot be reproduced on any of devices we have. Apple reviewer didn't have any complaints as well. Nor XHR, not getting images through urls work on these phones. One of the customers has two phones. Custom url schemes work on one of them and they don't work on the second one at all. He says they are identical and there is no Safari extensions installed. Unfortunately, we weren't able to identify what causes the problem. Beware custom url schemes may not work on some phones.

iFrame block not showing up in the iPhone

I have a hybrid mobile app in Mendix. In one page of the app, I am displaying some data with text and also video or website URL embedded.
<iframe id="quizWidget-454107" width="100%" height="900px" frameborder="0" border="none" src="https://www.qzzr.com/widget/quiz/fi9xdWl6emVzLzQ1NDEwNw"></iframe>
Here we are embedding this website, and we also embed youtube URL here.
The issue is, this embedded URL(video/website) shows up in a section on Android phone but not in iPhone. May be Safari does not render iFrame correctly.
Any idea what we can replace iFrame with?
please see an answer to a related question here. I believe You need to add <meta> tags to your index.html page to allow the app to load external content, preferable using a Content Security Policy (CSP).

Set default link for iOS webapp

I'm playing around with iOS' webapps.
I'd like to configure the webapp to save to the user's home screen with a different url from the original web page.
On Android, you can change "start_url" in the manifest.json to achieve this.
The various customisation options on iOS seem to be less well documented. But I'm hoping there's a meta tag I can use, similar to this one that changes the web app title:
<meta name="apple-mobile-web-app-title" content="[your title]" />
which is documented in this question.
As of iOS 11.3, Safari now supports web app manifests, making it possible to specify the start URL. Learn more here.

Titanium webview iframe doesnt seem to store cookies

I am developing an app using Appcelerators Titanium. The app consists of a webview. The webview shows i local page, iframe.html, and this iframe's src is pointed to a remote page.
However, this doesn't work out as i expected since it doesn't seem like the remote page can't store cookies when wrapped in an iframe. It works great on desktop and other devices. This seems to be an issue exclusive to iOS. I need the iframe, and i need cookies. What can i do to solve this?

Resources