I have a page with iframe, to simplify this case lets assume that it looks like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe src="http://example.com"></iframe>
</body>
</html>
Assume that the page is on the Internet and you enter it. It loads http://example.com inside the iframe.
I want to change this so that you couldn't see the http://example.com because you can open this adress only using my page not just putting http://example.com in second tab of webbrowser.
I see http://example.com in page source (right click -> page source)
I also see in the network in developer tools that the browser makes request to http://example.com. So I just can copy this address and open it in new webbrowser tab.
What should I do to make it impossible for you to know the address: http://example.com
The only way I can think of is if you screen scrape the page in your code and serve up the html yourself. So it would look like this:
Someone makes a request to your page
Before you serve the page in your back end code you grab the html on
example.com
Serve up the html that comes out of the back end request
This may not be formatted properly though because you are missing css or lose functionality because you are missing js but you just need to make sure you include that stuff.
An IFrame is client-side.
This means for the browser to render the IFrame, it must be visible to the client web-browser.
The only way to hide it is for you to develop a web proxy.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe src="grab_secret_site.php"></iframe>
</body>
</html>
Here, the code within grab_secret_site.php would make an HTTP request to http://example.com to grab the HTML. An example here. However, bear in mind that any resources won't load unless you rewrite them.
e.g.
<img src=icon.jpg />
Will point to icon.jpg on your site, not on example.com.
If you don't want the page to be loaded without the parent frame, you could create a session variable (e.g. PHP session) in the outer page, which is then checked within the IFrame. If it doesn't exist, redirect the user back to the outer page.
There is a header - X-Frame-Options that allows you to block opening page in iframe, but in this way I think It's impossible.
Related
Say I have two html pages and open them in two tabs. I'd like to make them communicate. As example when I click on a button on the first page, then it should call a function that does something on the second page.
function Test() {
document.getElementById('test').innerHTML = "Test";
}
<!DOCTYPE html>
<html>
<head>
<script src="index.js"></script>
</head>
<body>
<button onclick="Test()">Click here</button>
</body>
</html>
And the second page:
<!DOCTYPE html>
<html>
<head>
<script src="index.js"></script>
</head>
<body>
<p id="test"></p>
</body>
</html>
When I click the button on the first page it should write Test in the p tag on the second page. They can use the same JavaScript file. But how can I achieve this?
You can't do this with just JavaScript. The point is: JS is a client-side language which means that it is downloaded by a client (a browser) and is run by it (not by server). For the 2 pages to communicate, you have establish the communication somehow, via some medium. The medium can be:
web itself. 2 clients can communicate directly, but only if they know each others' address. How would they get those? By the help of the server (which brings us to the second option below) or by manual configuration which is very impractical (some more details may be found in context of WebRTC)
your server. Ok, that's the most common approach but that involves more than just JS: this requires a server-side language (PHP, Python, C++, Java, whatever)
your browser. There's a special case where you can establish such a communication: if you open your second page in the same browser from your first page in a special way so that the second one is "under control" of the first one, you can "command" the second one to do some stuff from the first one
So, if you're interested in the third option, you should read about window.open, window.opener, window.parent.
var newWindow = window.open(url, name, params);
will open a new window (say your second page) and bring you a variable newWindow which is a reference to the window object of the opened window. Try for instance
newWindow.write("haha, I'm controlling this stuff!");
Likewise, in the second window you can use
var oldWindow = window.opener;
There's also a number of methods you can use (window``.close, .moveBy, .moveTo, .resizeBy, .resizeTo etc etc).
Remember, however, that this interaction will be limited to your browser: if you change something as it is displayed in your browser (like add some text to a page) this won't affect the actual pages stored on your server because this requires your server do something via some server-side scripts.
PS to advance this technique, you may want to read about window.postMessage but that's mostly designed for communication between pages that are cross-domain.
PPS Actually, there's more!
One thing to note is localStorage and sessionStorage have setItem method which generates 'storage' events on window (try localStorage.setItem('key', 'value'); and window.addEventListener('storage', event => console.log(event.key));).
Another, like Anderson Green has noted, is Broadcast Channel API (try const channel = new BroadcastChannel('my_channel'), channel.postMessage('Hi there!') and channel.addEventListener('message', event => console.log(event))).
There's also SharedWorkers and Service Workers.
Finally, you can use some off-the-shelve solutions like tabs-router, Hermes, Visibility, Duel and SE.
Those who speak Russian may also find more useful details in this article (wow!).
Try using cookies. It's the simplest way I can think of. This website might seem helpful: https://www.w3schools.com/js/js_cookies.asp
Intro: I'm having a problem implementing google analytics in a website that is not mine and would like to correctly implement it and confirm without the need of waiting several hours untill google checks my website again.
Main problem: I copy pasted the script code to every page on the website (all html) but google isn't detecting it. I suspect the problem is in the first index.html on the root of the website but for now I must have it there so please don't tell me I have to remove this file. That is not the question.
Code of index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script>
<!-- GOOGLE ANALYTICS PASTED CODE IS HERE -->
</script>
<!-- TITLE AND METADATA ARE HERE BUT NOT RELEVANT -->
<meta http-equiv="REFRESH" content="0;url=http://www.FAKEDOMAIN.com/Site/index.html">
</head>
<body>
</body>
</html>
Extra info: Google control not installed because it says it doesn't detectes the code on initial page. I think it is because the script might not be tottaly executed and then the page refreshs to another link and google will just consider that the script isn't installed on the initial page because the script wasn't tottaly run. Is there a way I can force the full execution before redirecting? Then a way to confirm with alerts if the data is being collected properly so that I am sure it is just a matter of time before google analytics control is properly installed?
I don't believe Google actually attempts to detect the code on your page. Rather, the page runs and the script executes and pings some Google server to report the usage. Once this usage gets reported, you'll start seeing activity in your Google account. This might take a day or two.
I think you're right about the meta refresh though. Once the meta tag is encountered, the browser will redirect and script on the page is not executed. I would suggest removing the <meta> tag and redirecting with script, after the Google Analytics code is run:
<script>
// GA code here
location.href = 'http://www.FAKEDOMAIN.com/Site/index.html'; //Redirect here
</script>
I need to change content of website using jQuery loaded in iframe from other domain such this:
<html>
<head>
</head>
<body>
<iframe src="site.com/somepage.html></iframe>
<script>
$('iframe').find('div#message').value('hello');
</script>
</body>
</html>
Also I added target link to whitelist.
Could any helps? Thanks.
If you want to get a website of different domain you have to use parser in your server side which will parse the html from the website and then echo the parsed html to your client side
Due to cross-site attack/mocking securities, for a long time this is no more possible in the mainframe browsers (Chrome, IE, Fire) with domains diferent of your own.
You could achieve that thru proxying, by proxying I mean, using a server side solution where you get the HTML generated by "site.com" and outputs it as was in your domain.
Your script is running during runtime so it will not find the DOM of the iframe and will break. What you can do is create a function on your parent page like:
//On Your Parent page
function modifyIframeContent() {
$('iframe').find('div#message').value('hello');
}
Then call this function from the iframe after it loads.
// On Your Iframe page
window.onload = function() {
parent.modifyIframeContent();
}
Of course: Your iframe must be of same domain for this work.
I have the following HTML markup (don't ask....)
- document //main site
- <iframe> //my site
- <iframe> //site within my site
- <frame>
- <a onclick="JavaScript:parent.parent.location.href='http://bla.com;return false;'">
Basically, main site is calling my site in an iframe. I, in turn, also have an iframe on my site where I'm calling 3rd site. The third site has a frameset with a frame in it that has a link. When clicking on this link, it has to change the url of my site. My site and my child site are on the same domain. When I'm running my site as "stand-alone" (not in iframe) the above code works fine in all browsers.
Once I open my site in an iframe of the main site, it looks like the above code is trying to change the source of the main site. In FireFox I get a console message "Access to property denied". In IE it opens up a new window with my site not in the main site anymore.
What is the correct JavaScript to change the #src attribute on my site when I'm within an iframe?
You are banging your head against the wall that is the same origin policy here. This is XSS country and strictly forbidden, no way around it, unless both domains agree to talk together.
You can read more about cross domain communication using iframes, but again, unless the different domain agree to talk together, you are out of luck.
Although this might seem frustrating, be glad of this rule next time you use homebanking ;)
Can you try something like this
<document> //main site
<iframe id="my_iframe"> //your site
<iframe> //site within your site
<frame>
<a onclick="JavaScript:Top.document.getElementById('my_iframe').location.href='http://bla.com;return false;'">
Top refers to the main window, and then getElementById('my_iframe') will give you your iframe element.
I believe that you're trying to do communication between different pages.
You may take a look this API: HTML5 Cross Document Messaging
Basically, if you want to tell the parent iframe to navigate to a certain url, you can do this:
In the site within my site html:
// onclick of your anchor, post message (an event) with an expected origin
window.postMessage("http://bla.com", "www.sitewithinmysite.com");
In my site html:
// listen to the event "message"
window.addEventListener("message", messageHandler, true);
function messageHandler(e) {
// only recognize message from this origin
if (e.origin === "www.sitewithinmysite.com") {
// then you can navigate your page with the link passed in
window.location = e.data;
}
}
You might want to have the pages communicate using AJAX. Have the site that needs to change its URL listen by long polling to to a node.js server.
I want to use JavaScript to make a simple http get.
I used jQuery to perform my request. My code runs on IE8.0 but not in Chrome (ver 6.0).
My page has the following code: (to simplify, i made a simple request to a html page, but my needs is other)
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
<script type"text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<SCRIPT TYPE="text/javascript" >
function sendGet(){
$.get(
"http://www.google.pt",
function(data) {
alert('page content: ' + data);
});
}
</SCRIPT>
<head>
<title> Http Get Demonstration </title>
</head>
<body>
<p/>
<input type="button" value="Http Get" onclick="sendGet();" />
</body>
</html>
As i said, when i load this page on IE and press the button, i get the alert with the html code. But in Chrome the alert appears with empty text (null?). In Chrome Console from "Developer tools" i get the message: "XMLHttpRequest cannot load http://www.google.pt/. Origin null is not allowed by Access-Control-Allow-Origin."
Anyone can explain me what's the meaning of this message? And what i should change to my page run in Chrome?
Thanks
Due to same origin policy you cannot send AJAX requests to different domains than the one hosting your page. So unless your page is hosted on http://google.pt you cannot send an AJAX request to this domain. One possible workaround is to setup a server side script on your domain which will act as bridge between google.pt and the client or use JSONP if the distant domain supports it.
Although i can't remember if i changed any IE option, the Darin Dimitrov seems explain my problem.
I found some tricks can be used (beyond the Dimitrov answer):
use a PHP script:
http://jquery-howto.blogspot.com/2009/04/cross-domain-ajax-querying-with-jquery.html
configure IE by editing regedit (not recomended):
http://msdn.microsoft.com/en-us/library/dd565656(VS.85).aspx
(I belive there's some other way to disable cross domain protection without editing regedit. But i couldn't find it)
Are you opening the html file directly from a file (e.g. does the address bar say file://usr/path/to/the/file)?
We've found chrome won't let you 'ajax' in files from other domains when running under file://. However, in Safari it works fine.
Best solution for us is to use something like MAMP to run a local Apache server.