iFrames: Change the root URL hit by relative URL src's - javascript

I have an iFrame on my webpage that is from the same origin as its parent page. I'm loading page into there that has a bunch of img, script, link, etc. tags in it that all have relative srcs such as src="/imgs/img.jpeg" as opposed to src="http://mywebsite.com/imgs/img.jpeg".
What I want is for all of those resources to go to another server. So instead of hitting http://mywebsite.com/imgs/img.jpeg I want them to hit http://yahoo.com/imgs/img.jpeg or other website.
Is there a way to change the "base URL" or whatever of the iFrame so that all the relative srcs will hit another website and get those resources, using javascript?
Are there some cross-origin policies this would violate? Definite answers please, no speculation...
And is there a better way than to brute-force change all the srcs in the DOM and hack it all up...
Thanks y'all!

This is part of HTML5. Just set a BASE tag in your HEAD section. In your example it would be:
<base href="http://yahoo.com/">
This will set the base for all relative URLs.

Related

Resolving paths within HTML from another domain

I need to get an HTML from another domain, highlight some words in it and display it in an iframe, keeping the look and behaviour of original page.
So, I pass the page's URL with Ajax script to a PHP file, which retrieves HTML content with CURL, processes it, and returns it to Ajax script. Then I put processed content into an iframe. Now, everything is OK except that paths to all website's resources are relative to another domain's root (beginning with just '/'), so naturally page inside my iframe is rendered without any CSS, JS, images etc. Also, all website's navigation links are naturally dead.
What's the best way to handle this? Especially considering that obtained HTML can also contain paths relative to the document as well.
Try this:
<base href="http://www.theotherwebsite.com">

Creating links without actually putting the whole link in <a> tag

I've been wondering how do other websites do their navigation links.
What most beginners like me do is put the whole link inside the tag
News
or something like this:
News
But I've seen a lot of websites lately that does this:
News
and then the browser address bar display it like this
http://www.example.com/news/
First I want to know how do you call this method? and what are the advantages of doing this. and lastly, how does it actually work?.
I want to research about it but I don't know what to type on google. I did try a lot of keywords I could think of that relates to this but nothing comes close to what I'm looking for
There's 4 basic link types:
self-link: href="". This is a short-hand form of "link to yourself". You'll see it used for in-page anchors, such as href="#top" and the link.
relative: href="news.html". Clicking on this will try to load a news.html page in the SAME directory as the page that the link is contained in, so if you're on http://example.com/foo/bar.html, you'll be trying to load http://example.com/foo/news.html.
local absolute: href="/news.html". This will try to load a news.html page from the document root of the site. If you're on http://example.com/foo/bar/html, you'll be trying to load http://example.com/news.html. The leading / is what makes this a local absolute instead of a relative path.
full absolute: href="http://example.com/news.html". A full-blown url, which can point to a completely different site if need be. It CAN be point to the exact same site you're on, but essentially it's a "go over there, no matter where over there is".
This has to do with HTML, not JavaScript. Your first snippet uses an absolute path. The second two use relative paths. For more information, read this: http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
The best practice (for me?) is the first one, you need to write all the URL for the most readable code..
The first and the 3rd link are the same if you are on the same domain name..
The 2nd is different, if you are on www.example.com/index.html you'll go to www.example.com/news.html..
But if you are on www.example.com/categoy/index.html you'll be redirected to www.example.com/categoy/news.html and not on root directory.
But I don't understand why you talk about /news/ directory ?
Relative URL's will probably get you some results.
news.html will navigate relative to your current location
/news.html will navigate relative to the root domain name
For example if your current location is http://example.com/sub/ :
href="news.html" will get you to http://example.com/sub/news.html
but
href="/news.html" will get you to http://example.com/news.html
See also http://www.w3.org/TR/WD-html40-970917/htmlweb.html#h-5.1.2

Get content of an iframe after it loads with

I want to achieve the fallowing goal.I want by the click of a button to get the domain name entered in one input and load it into an iframe. What i have trouble with is after i load the specific site in the iframe how can i get the DOM of the loaded site in the iframe ? I need to save the exact path of an element of my choosing from the newly loaded site in the iframe by clicking on it. Any help would be much appreciated. Thank you.
You can access the <iframe>'s contents via the contentDocument property.
var iFrameContent = $('myIFrame')[0].contentDocument;
$(iFrameContent).find('.mySelector').text();
I should also point out accessing the <iframe>'s contents can only be done if the src of the <iframe> is from the same domain as your script. If the src of the <iframe> is from any other domain, the browser will deny access to the <iframe>contents.
This is a CORS consideration.
UPDATE:
To get around the CORS limitation, you'll have to write a server-side proxy for the URL that is the src of the <iframe> (and it could be pretty simple).
If I were to do something like this in ASP.Net (as an example), I would write a web service that:
takes the actual URL as a String parameter.
Uses the HTTPWebRequest object (or similar) to get the URL contents.
Return it back to the browser.
Then you could set your <iframe> src to "http://mysite.com/getURLService?url=www.lalala.com" and get the contents because the contents are now delivered by "http://mysite.com".
You use .contents()
like $("iframe").contents().find(); etc

Retrieve the src of an iframe embedded within another iframe

I have a page which contains an iFrame into which I display the content of another page, which contains an iFrame; I don't control this page. I would like to get the src attr of the embedded iFrame and display that content within my iFrame. Is this possible with either jquery or javascript?
Just to be clear, here is what I have:
iframe src="somepage.html" id="mypage"
somepage.html looks like this:
iframe src="content.html"
I want to extract content.html from somepage.html and display it within "mypage" before displaying the frame. Is this possible?
If you do not control the other page, and it is not on the same domain as you, browser security restrictions will not let you read the contents of the first iframe on the client (see eg. https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript ). This will make it impossible to read the contents of the second iframe. The only exception is that you may be able to talk from the innermost iframe to the topmost iframe by using window.top, assuming that innermost iframe is on the same domain as the topmost one -- essentially bypassing the 'middle' iframe.
Other than that, you could work around it by requesting the 'middle' frame's html contents using a proxy on the server written in a server-side language of your choice (PHP, Java, Python, Ruby, what-have-you), parsing it for the iframe and then feeding this back to your own application. Depending on what exactly you're doing, this may or may not be a viable option...

Gathering location of an IFRAME

I am building a script/application (on client side and on proxy site too) that gathers information about elements from various web-sites.
One last thing that makes me troubles is gathering location of an IFRAME. Let me explain this in more details:
Invariant: Location of IFRAME is not changed via user interaction
Some web-pages uses SRC attribute to define location of new IFRAME - either defined via scripting or manually typed in the source - this is ok (no problem)
Other web-pages uses various techniques how to populate IFRAME dynamically and they do not use SRC attribute of IFRAME - this is ok if location of such IFRAME is inside the same domain, otherwise it is unsafe access to other domain
I will include one example of HTML code:
<html>
<body>
Click here to open an iframe.
<br>
<iframe id="test_iframe" name="test_iframe"></iframe>
</body>
</html>
So if I try by JavaScript this below I will get an empty string.
document.getElementById("test_iframe").src
And if I try to use this below I will get a security error.
document.getElementById("test_iframe").conentDocument.location.href
So my question can be reduced to:
Are there any technique to gather location of such IFRAME which content is outside parent domain and that IFRAME is without SRC attribute?
Thank you very much for your answers :-)
This is called iframejailing. Its not possible to read or alter an iframe element in the page if its pointing to a different domain. Its an inbuilt security feature in browsers.
However, there are certain workarounds for this if the domains in questions can work together to create an iframe proxy (google to get more info), which i feel in this case is not applicable.
Respond back if you have more questions.

Categories

Resources