Inserting javascript/css into an iframe across different domains - javascript

I have a local webpage (on my file system). I wish to load an iframe on the page that displays domain.com. I wish to change the iframe contents.
I can get access to domain.com and can get them to host a javascript file for me. So this should mean I do not run into the issue of same origin. It take ages for my file to get uploaded as it is done by a different team etc. My idea was on the server domain.com in my js file I could call another js file on myserver.com. Is it is being included in the domain.com js file it should work... well it doesn't.
Is this possible?
domain.com js file is as follows:
$(document).ready(function(){
$.getScript("http://www.myserver.com/my.js");
});
my.js on my server is doing
alert($("iframeID").contents().find('body').html());
It is returning null
If in my.js I do
alert('test');
Test is alerted to me.

The Same Origin Policy applies to the page sources, not the JavaScript. If your page is from one place (a file:// URL) and the other page is from another domain, then it doesn't matter where your script is hosted.

I'm not sure I got your scenario 100%. Correct me if I'm wrong:
You have a page with an iframe, and the iframe points to a page at domain.com
The page at domain.com attempts to retrieve your script from myserver.com, using $.getScript()
The script, when loaded, needs to modify the DOM on the page in domain.com (the one in the iframe)
The element iframeID in your code sample alert($("iframeID")... refers to the iframe on your page, where the page from domain.com is displayed
If this is correct, the issue is that the javascript executing inside the iframe on domain.com knows nothing about the iframe. It doesn't even know it is in the iframe. You can manipulate the page like any other HTML document, because the script is executing within the page in domain.com -- it doesn't matter where the script originally came from.
So you can print the body of the page in domain.com very simply:
alert($(body).html())

Related

Can I get iFrame form contents via a hot-linked script if both are on my same domain but implemented on a third party?

I have a domain like mine.com which has a JS file on it (mine.com/some.js) and has an iFrame form (mine.com/form/) that people can submit. My clients put a link to the the JS file on their site (which itself injects the iFrame) such as <script src='https://mine.com/some.js'></script>) but since the JS file is still on MY domain, can I use that script to read the form's contents?
I understand that their domain cannot read the contents of the iFrame, but since the script itself is hosted on my domain is there a way to authorize this?

JavaScript: Read URL of parent page

I have a page that is loaded inside. The application including this page is located on another domain. So the domain of my page and the application rendering it inside an iframe are located on different domains. The page inside iframe reads the URL it is loaded from to store in the database. The page loading has a hash in the URL.It is like:
https://www.somedomain.com/organizers/list/#type=current&sort=bydate
I am reading the URL from mypage. It is located on:
https://www.someotherdomain.com/organizers/#sample
var _url = document.referrer
The above code gives me the URL but only till "https://www.somedomain.com/organizers/list/", "#type=current&sort=bydate" is missing. I need that else this code is of no use to me. Is there a way I can read the complete URL without missing any segment?
like this
var _url = window.location;
This is by design. The browser will give you the referrer which is the URL where the user came from, however the #hashmark is technically (by its original design) a sub-navigation concept within a page, thus not passed on to the next page load.
If you were on the same domain as the parent page, you could access it via the
window.parent.location.hash
however since you are from a different domain this access will likely be blocked for security reasons.

Change path of iframe on page change

I have two websites www.mywebsite.com and www.otherwebsite.com. I use iframe to redirect mywebsite.com to otherwebsite.com. Is there a to change the path of url on page change. For example when a link otherwebsite.com/contact.html is clicked the frame adds /contact.html to mywebsite.com making it www.mywebsite.com/contact.html. I tried adding the code below to the page but it doesn't seem to work on the frame.
history.pushState(null, "A new title!", "contact.html")
what you trying to do is not possible without a server side language (for example php).
this is because you need to define filename as a variable for your frame to load it with another site.
but you can do it at some static way like making the real contact.html and code it with a frame that shows contact.html for another side ... but i dont think that would be a dynamic way without any server side coding...

How can I have a same domain iframe disable same domain scripting

I have two pages which live within the same folder,
1) index.php
2) test.html
On test.html, there is an iframe with index.php as the source.
However, I'd like to disable javascript access to index.php from test.html. In other words, index.php should act like its on a different domain, even though it is on the same domain.
How can I accomplish that?
most simplest way, is it possible for you to create a alias sub-domain pointing to your server? if so you can do that by doing following:
http://mydomain.com/index.php
and then call test.html by
http://myaliasdomain.com/test.html
See if this is possible or else we can think of different solution.

Dynamically load & parse local HTML from within HTML?

A bit of an unusual setup:
I'm writing in an html page that in turn loads another html page, parses it, analyzes it, and displays information about it.
The parsing is fairly easy using jQuery. I just need to figure out how to load the external page - that is, when page A is displayed in the browser, it needs to load page B, analyze page B, and display information about page B.
Both pages are local (not served via a web server).
Both load and ajax from jQuery run into the cross-origin permission issue:
XMLHttpRequest cannot load file://localhost/Users/me/test.html. Origin null is not allowed by Access-Control-Allow-Origin.
I can load the page with a script tag, but then I don't know how to access it so I can parse it:
<script type="text/html" src="test.html"></script>
Any ideas?
Have you thought about using JavaScript/jQuery to create an iframe? (You can use CSS to make the iframe hidden to the end user.) Then you can listen for the iframe's onload event, and parse it through the iframe's contentDocument element (I believe).

Categories