How to attach cookie to request when setting iframe.src (using jquery)? - javascript

Using JavaScript/jQuery within a web page, I need to load a different page into an iframe. I am doing it by finding the iframe using jQuery, and setting its src property, thus:
iframe.src = url;
Which works in that it displays the page in the iframe, but I need to attach a couple of cookies to that request to get the correct info on the page, and I can't figure out how to do that.
In the spirit of trial and error I tried inserting this line before the above code:
$.cookie("MyCookieName", "MyCookieValue");
but in Fiddler I see no cookie attached to the request. All the documentation I can find about cookies tells me how to generally get & set the values, but doesn't help explain what I'm doing wrong.
For what it's worth, the page that I'm loading into the iframe is in the same domain as the page hosting this JavaScript code.
How do I attach cookies to that query?

How do I attach cookies to that query?
You can’t “attach” cookies to a simple HTTP request that the browser makes on his own.
For what it's worth, the page that I'm loading into the iframe is in the same domain as the page hosting this JavaScript code.
Then set the cookie for that domain the normal way – once it’s set, the browser will send it when requesting the iframe URL automatically.

Related

Is there is anyway to manipulate HTML document from external domain inside the iFrame?

I want to make some changes to the HTML document inside the iFrame which is coming from another domain, as an example, the document inside the iframe open links to target="_blank" and I want to change that target to another value before it's renders to the client's browser.
I always hit CORS Cross-origin resource sharing, I know this is against security purposes but my application is just a prototype for concept proofing.
I also tried to make it programmatically from the code behind the HTML by storing html content to a variable then pushing the contents after changing to a temporary HTML page, but have the same problem rather than faulty page that require some resources on the external source.
Does anyone know a solution or an out of the box idea that can overcome this issue?
You cannot do it just with a browser, no; as you mentioned, it runs afoul of the Same Origin Policy. (Well, you could with a browser extension, but I'm assuming you're talking about something that would run in a normal environment without additional installation.)
You could do it by involving a server: Have your iframe use a URL on your server, and have the server fulfill requests for that URL by querying the third-party server for it and then relaying the result.
But not without something in-between like that.

Inserting data from a website into another website using AJAX or an iframe

I have been given an address with a basic HTML structure, it just has some numbers in it. I have tried doing it as an Iframe, if I create a simple HTML that does work fine, but in the page itself if i hover over the iframe it says that it refused the connection.
I have tried with AJAX, but it does give me a mixed content error, since my page where I want the content inserted is secure (https) and the page where the numbers are is not.
Is there any workaround I can do in this case?
Thank you in advance.
this is because of CORS(cross domain access) problem:
if you are accessing the URL on same domain there won't be any problem but if you accessing content of another domain there is security issue.
this is possible only by below concepts:
Enabling CORs - https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Image pinging concepts - limited to data size
JSONP

Can I detect that a cross-domain iframe contains a 404 response?

I have a script that inject an Iframe to my page, In rare occasions the service is down and the Iframe content is a 404 page content.
Can I detect somehow that the response of a cross domain page ( in-iframe ) is 404?
The simple answer is "no," not without CORS or help on the server side. The whole point of the same-origin policy is that you can't get information about content served from somewhere else.
Try using a server-side script to make a HEAD request to the site in question and make sure it's up.
Another possible workaround: Find an image on their site, and try to load that first. When the image loads, load the iframe. If it fails to load after some period of time, you can assume the server's down, and show a custom "oops" message. May or may not work depending on what's actually going on with that server.

getting src i.e. url of iframe so that parent page can use it?

Probably, I know the answer already that there is no way by which I can read the DOM Values of Iframe so that Parent can use it.
I spent lot of time researching about it but can not find any way, hence posting it here.
CONSTRAINTS :
Different Domains, No Control over the iframe url. It can be any URL provided by the user.
WHAT I TRIED SO FAR :
I need the value of the url i.e. window.frames['iframename'].location.href but I am getting permission denied as it violates same origin policy.
HTML5 Post message api wont work as it assumes even if they are cross - domain we have control over the iframe page.
easyXSD also assumes the same I suppose.
Is it possible at all?
NOTE : USER Will Change the SRC from Iframe itself. so I use onload method to do something but not able to access location.href
If you have no control over the iframe, then it is not possible since it is a security risk. Notice that you may set the location/url of an iframe/window, but you can not read it (if it is cross domain).
If you had control over the iframe, then workarounds would be possible (using postMessage, workers or whatever).

Load a external URL into a div using jQuery

I want to load a whole site into a div. When I use
$(document).ready(function(){
$('#result').load('http://www.yahoo.com');
});
It's not working.
It will be a cross domain call to do using javascript. You can use iframe to load.
Check this link for possible solutions.
This is a cross-domain issue.
You can create a proxy on your server to fetch the data and you'll load it from your own domain.
What do you mean "a whole site", if you mean a given page, then it'll probably require all manner of header included files, which are not suitable to go in to the body of your page.
You would need to use an IFRAME, just create the IFRAME element and set the source to the URL you want.
Although I'm not sure about your use case of loading "whole" site into div - you are limited by "same domain" security policy, in order to make cross-domain AJAX calls you need to employ JSONP call http://api.jquery.com/jQuery.getJSON/
You can't do that unless the content you're loading comes from the same domain as the site you're loading it into, due to JavaScript's Same Origin Policy.
Your alternatives:
load the content into an iframe
pull the content server-side via an HTTP get, and the write it out to your page
Beware of licensing issues with the second option if you don't have permission to use the content, though!

Categories

Resources