I have an embedded twitter video in a webview in a mobile app (Titanium, but this doesn't really matter). When I click play on the video I see this error:
Refused to display '[the url]' in a frame because an ancestor violates
the following Content Security Policy directive: "frame-ancestors *".
What is causing this issue is the fact that the webview content is being populated via a Hogan template that is loaded in from a local file path. I get the same error if I just copy the embed code into a file on my desktop and open the file in Chrome. It works fine in a webview in iOS and the local file works okay in Firefox, so this seems to be Chrome related.
Why is this failing with a wildcard for frame-ancestors?
Is there a way around this in my current setup?
Related
We have a React PWA where we initially download RTF-Documents and save them to an indexDB. We use createObjectURL and an a with a.click() to simulate a download when the file is requested by the User.
The mimetype is set to application/rtf in the createObjectURL call.
However, on iOS (with Safari) the default "view" operation shows the following:
This file cannot be previewed
It might be corrupted or of an unknown file format.
The same file works from our "normal" webapp (i.e. file is served from a backend server). I tried to set the headers exactly like our backend server does, but it either doesn't show the "view" Button at all or it shows the error.
Any ideas how to set up the calls, so iOS will show the RTF correctly?
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
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,
I have a cordova app (cordova 5, ios 4) which uses Angular in the background.
I need to display an image (jpg) which I am downloading from my remote server via https.
However the image is always displayed as broken by the webview.
The image is included like this:
<img ng-src="{{picture}}">
I have tried 2 variants to include the picture:
displaying the image directly via the https url. I can open the url in both a desktop browser and the iPhone Safari browser and they display it correctly. In cordova it is shown as broken
downloading the image via File Transfer and then including the local image via a file:// link. Same problem.
What I have verified:
the image itself is correct as I can show it in a browser
the download itself works, the file transfer is correct
cordova has been set to allow all resources so it does not seem to be a problem of whitelisting
angulars sanitizing has also been adjusted so the links in the html are actually correct i.e. not modified
the server is sending the correct content-type which I have verified via wget
I am running out of ideas here.
It seems the browser view of Cordova on iOS (UIWebview) is more strict than a standalone browser. I tried to download the image via wget and then had a look at the content. It did not show any jpg header but was identified as text by the unix file command.
The http headers also showed no Content-Length.
Solution
The server side logic (spring) returned a byte[] but I did not include any transformation to it. So I changed by rest configuration on the web app to include a ByteArrayHttpMessageConverter:
<mvc:annotation-driven>
<mvc:message-converters>
<bean class="org.springframework.http.converter.ByteArrayHttpMessageConverter">
</bean>
<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
Then it worked. The browser seems to fix the missing file header and/or encoding (not sure what the exact error is) whereas the UIWebview doesn't do this.
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?