Basically my application is in a social network where in my application's page they create an iframe with their (not mine) URL to "renderer" which then takes (don't ask how) my code (html, js) and places in the body tag of this iframe.
Since I need to be able to run the iframe's JavaScript functions I decided not to create an another iframe with my application URL, but with ajax calls just load my application's content in the body of their iframe. This way I could be able to run their JavaScript functions. If I would create my iframe within their iframe then I couldn't run them because of the cross domain stuff, right?
However when I perform ajax calls with jQuery to my application they are performed from the social network (since the iframe is their, just my body code) and thus no session cookies which are saved on my application domain are available for the ajax calls from this iframe.
What I think is I need to create an iframe (dooh) within the social network's iframe, but how to overcome the cross domain issues to access the JavaScript functions in the parent iframe?
P.S. Sorry for the long explanation. Wanted to make it clear for everyone.
There is no way to read a cookie from another domain.
Either the AJAX is failing because you are using XHR and you are getting blocked by the Same Origin Policy. Or, you are using JSONP, and the cookie is not being set.
If you are using XHR, switch to JSONP.
Using JSONP you won't be able to set cookies. JSONP just loads a script by setting the src of a script tag, and cookies can't be set in this way (nevermind that they can't be set from another domain).
You'll have to manage state manually by passing the session id with each JSONP request.
Related
Is it possible to somehow, using javascript or other methods, to set http request headers in an iframe?
Basically, i need to embed a external website into an existing webpage using an iframe. Both pages are authenticated using the same domain, and i am trying to avoid forcing the user to login twice. Both the parent webpage and the external website are running https, and they both accept the basic authentication header as login methods. So, i was thinking if there is a way to take the header from the main page, and pass it on to the iframe?
The main webpage also allows me to get the basic authentication header using javascript, so i don't need to get the header from the parent request, i just need to be able to inject a header into an iframe before loading it.
You are not allowed to modify the content of other sites through an iframe because of the same-origin policy. A better option would be to use ajax to load the pages and then display them to the user without using an iframe.
More resources:
https://en.wikipedia.org/wiki/Same-origin_policy
https://www.w3.org/Security/wiki/Same_Origin_Policy
I'm new to AJAX and I have what I think is a simple question. I know you can create a page that will respond to an AJAX call. Is it possible to just get any page with an AJAX call?
So I mean to say, can I do anything with an AJAX call that I could do with a URL?
EDIT #1
Thanks for all the responses! Really helped clarify!
Yes and no.
AJAX is a powerful mechanism by which you can retrieve and/or load data into the DOM in a flexible manner. You can do things like grab the content of another page and display all or portions of it on your page. There is a catch however.
Due to security reasons, you cannot depend on being able to make an AJAX call in a cross-domain manner unless the server on the other domain is properly configured. This is known as Cross-Origin Resource Sharing (CORS). You can read more about that here - http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
Alternatively, some servers will expose API's that work with JSONP (JSON with Padding), which is a sort of workaround for the Same Origin Policy (SOP) that normally prevents cross-domain requests of this nature. In JSONP, the remote endpoint in essence wraps the response in a javascript function. You can read more about JSONP here - http://en.wikipedia.org/wiki/JSONP
You are limited to requests within the same domain, unlike a normal URL. There are ways around it using CORS or JSONP in that case.
http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
No.
One example is that you can't use AJAX to upload or download files. One workaround for this is to target the upload or download to a hidden iframe and poll that frame for a response. Update: it seems some support for this is part of HTML 5 (see https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications).
A second example is navigating the user to another page. You can load a second page and replace the contents of the window with it, but the URL will still be the original page (the "refresh" and "back" features of the browser will behave accordingly).
A third is cross-domain requests. AJAX calls are limited to the domain the page originated from.
I have an application on one domain which needs to get data from an application on another domain.
I would like to use an iframe based cross domain ajax tool such as porthole.js to implement the following:
My application loads a page on the other server in an iframe.
A message is sent using porthole to the iframe.
The page on the other server checks to make sure the calling url is valid, and reads in the url of the ajax request it will make from the message.
The remote page then uses the passed url to make an ajax request.
The results are passed back to my application.
This solution lets me use the remote json data without systematically altering all of the services, which are built and managed by another team. If it doesn't work, I would work with them to use a system that uses porthole.js or jsonp for cross domain scripting.
The point that concerns me, though, is step 4. Does this count as an ajax call from the remote document inside the iframe, which would be able to make ajax calls against it, or does it count as a call from the outer window, which can't use ajax to call that domain?
Jeez, just use CORS. It's a one-line change to the web-server config.
Is it possible to do AJAX calls from inside an iframe that has a different domain source?
I've tried script injection but it doesn't work because the iframe's source is secure.
I made a simple fiddle with California DMV website here.
I'm getting DOM exception 8 error. Is it a security issue?
It is not possible to modify or make JS calls in an iframe with a different domain source. This is restricted in all browsers for security reasons.
See the "Same Origin Policy" for a description of how inter frame security works. In a nutshell, there is very little communication allowed between frames on a different domain for security reasons. You cannot make any direct Javascript calls between frames on different domains.
There is a way to make cross domain ajax calls and it involves using JSONP. Basically, you inject a script tag into your own frame and that script tag points to server endpoint anywhere on the web. Since the src value of a script tag is not restricted by the same origin policy, you can reach that server. But, now you need to have a way to get that result back. That is done using JSONP where you specify in your server request a javascript function that you want the returned javascript to call. That returned javascript can have javascript data in it that is then passed to the desired function. JSONP requires cooperation between both client code and the server code since a normal ajax call might not support the extra part of JSONP. But, with this cooperation of both sides, you can get around the same origin policy for server endpoints that support JSONP.
HTML5 has a new messaging system that can safely communicate data (not direct JS calls) between cooperating frames in different domains. See here and here for a description of how the HTML5 messaging works.
Yes it's a security issue because of the Same Origin Policy enforced by most browsers: http://en.wikipedia.org/wiki/Same_origin_policy .
You can look into JSONP http://niryariv.wordpress.com/2009/05/05/jsonp-quickly/ which is specifically designed to get around this.
Is it possible through jQuery (or plain javascript) to test if a webpage on another domain is available?
I tried getting the response headers with an ajax-call but I get an error no matter what site outside my own domain I test.
So do I really need a proxy script on my server or would I be able to skip that request?
Is it possible through jQuery (or plain javascript) to test if a webpage on another domain is available?
Due to same origin policy restriction you need a proxy/bridge on your server unless the remote server implements JSONP which obviously we cannot assume for the general case.
You can create an <img> tag that points to an existing image on the external domain.
If the onerror event fires, image, and perhaps the entire site, is down.
If it fires after 5 seconds or so, it probably timed out, so the entire site is likely to be down.
Yes, you need to use a proxy script on your server. JavaScript cannot be used in a browser to request resources across domains, as per the same-origin policy.