Cross origin iframe, Safari-only issue - javascript

On domain www.maindomain.com I have the following page
<iframe src='https://www.otherdomain.com/somepage.php' />
The IIS webserver that hosts www.otherdomain.com has been properly configured with the necessary cross-origin headers.
In fact, there's no issue with any of the major browsers, desktop and mobile.
However, on Safari and on Safari only, the connection is rejected as insecure.
Is there a known workaround?
Thanks

Related

Cookie Issue in iframe Internet explorer

I am trying to open a webview iframe. Problem is that Internet explorer (11) doesn't set cookie for webpage loaded in iframe. It works fine in chrome, firefox and even in Edge.
Internet Explorer supports a cookie-restricting privacy feature called P3P. Web developers often get tripped up by it because no other browser implements the P3P standard.
To get IE to accept cookies from your server in a 3rd-party context (or to get IE to resend a previously-set cookie to your server when it is accessed in a 3rd-party context), you must declare the privacy policy that governs how your cookies will be used. That declaration takes the form of a P3P header on the HTTP response (or, less commonly, a META tag with the same content).
For more detailed information, please refer link below will be helpful to understand and solve the issue.
Reference:
A Quick Look at P3P

Difference in launching Angular JS application in Chrome and Safari?

Team,
I am working on Angular JS application. When I want to test the app, I used to just launch the application directly into the browser from file system. The url would be like
file:///Users/easwar/AngularApp/index.html
When I need to launch the app in Chrome, I need to open the browser from terminal using the below command
open -a Google\ Chrome --args --disable-web-security -–allow-file-access-from-files
to avoid the below error.
"XMLHttpRequest cannot load , Cross origin requests are
only supported for protocol schemes: http, data, chrome,
chrome-extension, https, chrome-extension-resource."
But surprisingly in Safari the app works fine without doing anything like this.
I would like to find what is the difference between these browser behaviors? Why its working in Safari and its not working in Chrome without a tweak?
In short: google chrome doesn't like local cross calls.
More found here: Cross origin requests are only supported for HTTP but it's not cross-domain .
It's Googles privacy and security policy: they try to avoid as much risks as possible, and local file calling seems to be one of them.
Read more on cross origin requests and how they're handled in Google Chrome here: https://developer.chrome.com/extensions/xhr
If you don't want to use those console commands, you might want to look for a webserver to host it (or a local webserver).

CORS error for application running from file:// scheme

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

Internet Explorer 7/8 cross-origin resource sharing JavaScript implementation

Upon submitting a form from my website to third-party website, the HTTP post request will trigger downloading a file. This works fine with Firefox and Chrome. However, Internet Explorer 7/8 security setting prevent downloading the file by saying:
file download blocked - To help protect your security Internet Explorer blocked this site from downloading files to your computer
I know this is a issue with CORS, which has been resolved in IE 9+, FF and Chrome. right now I need to support IE 8 bypassing the security setting. Is there any workaround I can do here? So basically what CORE does is to add a HTTP header request so that the server knows this is a request from different domain.
IF you search for the CORS solution for IE 7/8 you will have to use a XDomainRequest. For IE 10+ browsers they have changed it to use XMLHTTPRequest. Have a look at following link to get a idea about CORS using XDR.
http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx
http://amareswar.blogspot.com/2012/06/cors-issues-with-ie9-and-workarounds.html

Cross domain cookie using CORS in Safari

I followed the example: http://arunranga.com/examples/access-control/credentialedRequest.html
from this page: http://arunranga.com/examples/access-control/
The example work in Firefox, but not Safari, anyone have tried in implementing CORS cross domain cookie handling, and being success in Safari?
Thanks.
Safari also blocks cookies from sites that haven't been visited directly. You can see in the security settings. It's default setting is Accept cookies: "Only from sites I visit".
This will help get you started.
Setting cross-domain cookies in Safari
I have jsonp working in safari using methods in the above link. So assumed that the cookie would work in the CORS context, but at this stage it doesn't seem to be working. Also, changing the security setting seems to have no effect.
Safari might demand a stricter set of headers to be returned?
This sounds like a Safari bug. I just verified that cross-domain cookies aren't being set in Safari. Cross-domain cookies are working in Chrome, so this may be fixed in WebKit and the latest hasn't made it to Safari yet. I haven't seen a Safari or WebKit bug report about this.
I encountered this with API/UI apps on different subdomains of Heroku, like my-api.herokuapp.com and my-ui.herokuapp.com, session cookie was set for my-api.herokuapp.com. Even visiting my-api.herokuapp.com didn't seem to help Safari in this case with its default 'Only from sites I visit' policy #23inhouse mentioned: http://content.screencast.com/users/artemv/folders/Jing/media/4dfc08d7-0e9c-483f-a272-bbe91549ea95/00000759.png.
However, Safari worked just fine when we assigned a custom domain to these apps and it became my-api.mydomain.com and my-ui.mydomain.com - so it looks like Safari has particularly low trust to popular hosters' subdomains. No direct visit to my-api.mydomain.com was needed in this case.

Categories

Resources