With the new permission request API introduced in Safari on iOS 13, I get this error when doing the permission request on a cross origin iframe:
Call to requestPermission() failed, reason: Source frame did not have the same security origin as the main page.
I could not find any corresponding Feature-Policy to add to the iframe "allow" property: neither 'accelerometer' or 'gyroscope' worked...
Is there a way to allow DeviceOrientationEvent.requestPermission() on cross domain iframe?
The only workaround that worked for me is redirecting through the iframed domain once.
So, if you have abc.com and xyz.com is an iframe under abc.com, while landing to the abc.com, there needs to be an intermediate redirect through xyz.com only for the purpose of setting a blank cookie. Then Safari will allow setting a cookie from iframe for xyz.com.
I'm not sure if there's any other better workaround. However, this worked and served my purpose.
Thanks.
Related
at the moment I have an issue regarding implementing an iFrame into my ionic app. Everything is working if I open the Page, where the iFrame is embeded, on Android. But if I open the page on iOS I get an error in my console which says:
Blocked a frame with origin "http://mywebsite.com" from accessing a frame with origin "file://". The frame requesting has protocol of "http", the frame being accessed has a protocol of "file". Protocols must match.
How can I fix this issue? Do I have to make changes on the Page which I'm trying to embed or do I have to change something within the app?
Best regards and thanks
I was trying to host a web page in the chrome extension popup and was hitting error X-FRAME options set to deny or SAME ORIGIN. As an alternative approach I opened up the page in new chrome browser instance and injected the script into it so that i can send the message from the page to content script and then back to my popup page once the work is done in the new window . UI experience of this approach does not look good and hence wanted to go via Iframe route. My extension has all url permissions in manifest.xml
Can someone suggest the right approach by which we can host a web page in IFRAME in chrome extension popup and get around the deny and SAME ORIGIN. Also will this be correct with respect to security .
I came across this unanswerd blog but seems to me a hack. Hence wanted to get clarity on chromium - extension forum.
Getting around X-Frame-Options DENY in a Chrome extension?
Domain A is loading domain B in an iFrame. In order for domain B to set a cookie in Safari (with "allow from current website only" configuration) we had to do some manipulations (user actions). However now the cookie isn't being sent (to domain B).
domain A opens domain b in an iframe
user clicks on a button, which opens a new tab with domain B
the cookie is being set. Safari is now set with a cookie from domain B.
in the iframe we do window.location.href="url to domain B" - the cookie isn't being sent.
If I browse to the same URL in a different tab I do see the cookie being sent.
Has anyone encounter this as well? Any known solutions?
In mobile advertising space, a few years back, when apple disabled the 3rd party cookie on mobile safari, google (DFP) came out with the workaround to bypass the restriction by creating iframe on the page and set the cookies there. It worked for a while till apple found out and blocked it. As far as I know, there is no workaround to enable 3rd party cookies on mobile safari.
I have an AngularJS/Cordova app which polls a JSON service on a remote server:
$http({method: 'GET', url: 'http://example.com/index.php'})
Developing in the browser and running off my intranet apache server (http://dev) I get "No 'Access-Control-Allow-Origin' header is present" so I fix this by adding:
Header set Access-Control-Allow-Origin "http://dev"
All works fine, and I see Origin:http://dev in my Chrome dev tools.
So, having to think about this for the first time, I wonder what the Origin will be when the app runs in the Android/iOS webviews. I decide to do a build and deploy on my devices and expect to see the same error in remote debugging (Safari for iOS and Weinre for Android), but to my surprise it works (without sending any CORS headers)! I also find that in both devices the app runs in the webview under the file:// scheme, rather than (what I assumed) a http server of some sorts provided by the phone OS.
So research seems to suggest that CORS is not required for file:// - such a "site' may access any XHR resource on any domain. But, when I test this on desktop browsers I find that while Safari does not need CORS for file:// but Chrome does, and FireFox works either way without CORS
So my questions:
1) why is my app working without CORS in Android/iOS - is it because CORS does not apply to file://, or, is Cordova doing something to make it work in the device?
I have <access origin="*"/> in my config
2) if, pending answers to Q1, I should want to be on the safe site and explicitly allow requests from apps, what value do you give Access-Control-Allow-Origin for file:// "hosts"? in my debugging there is no Origin header in the requests from file://
3) in addition to blocking the XHR request to the remote server, Chrome is also blocking my app templates (I'm using separate files), see below. Is this a potential issue with my app, or just a Chrome issue that I do not need to worry about?
XMLHttpRequest cannot load file:///Volumes/projects/phonegap/www/templates/tabs.html. Cross origin requests are only supported for HTTP.
There are two ways for CORS headers to signal that a cross-domain XHR should be allowed:
sending Access-Control-Allow-Origin: * (allow all hosts)
put the host you would like to allow into the Origin header by your backend
As for the file:// URLs they will produce a null Origin which can't be authorized via the second option (echo-back).
As mentioned:
Cross-domain policy does not apply to PhoneGap (for a variety of reasons, basically because your app is essentially running off the file:// URI on-device).
Please be aware that you will have to set up a whitelist for your apps to access these external domains.
As for the Chrome problem, which can be seen in the developer's console:
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///C:/2.html
XMLHttpRequest cannot load file:///C:/2.html. Received an invalid response. Origin 'null' is therefore not allowed access.
there was a discussion on Chromium project's issue tracker, #40787. They mark the issues as won't fix as that behaviour is happening by design.
There is a workaround proposed to simply switch off CORS in Chrome for development purposes, starting chrome with --allow-file-access-from-files --disable-web-security
e.g. for Windows
`C:\Users\YOUR_USER\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files --disable-web-security`
Here is some more cordova related answer:
CORS and phonegap apps
Domain whitelisting in Apache Cordova - a security model that controls access to outside domains.
Check these resources for more info on CORS:
Cross-Origin resource sharing and file://
A nice CORS tutorial: http://www.html5rocks.com/en/tutorials/cors/
Working around origin policy
HTTP access control (CORS) (Mozilla)
Check also Browser support for CORS:
http://caniuse.com/#feat=cors
And for the record formal CORS specification on W3C :)
I have a website that uses the Facebook login button and
connect.facebook.net/en_US/all.js
As of friday, I started getting a cross-origin security error when new users were trying to log in.
Uncaught SecurityError: Blocked a frame with origin "https://www.facebook.com" from accessing a frame with origin "http://www.facebook.com". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.
Instead of redirecting after login, the dialog box just turns to a blank white screen.
This is only happening in Chrome. Everything runs smoothly in Safari and Firefox.
Anyone else experiencing these issues?
Any ideas about a possible fix?