Inside my application, I have an iframe that can open any webpages (99% of the time of the same origin). But the user can click in a link inside the iframe and go on an external website. I managed to detect if the website is of the same origin or not, but a request to a website such as "https://www.google.ca/" throw the following error:
Refused to display 'https://www.google.ca/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
I have a beforeunload, onerror and onload event binded to my iframe, but I can't manage to handle this security issue with the event object.
Have had same problem, loading 3rd party pages into my iframe some of them were blocked by X-Frame-Options that is not included into HTML.
NOTICE: working in CHROME,iPhone,Mozilla Android 4.4.2 BUT not working on FireFox.
If you want those pages to be opened in new window this is how i manage it.
Maybe usefull stuff for someone else searching solution for this particular scenario.
PHP (get_headers) works fine for most of them but i came accross few that did not give X-Frame-Options directly into HTML header (auto include), so get_headers failed and browser receive this [Load denied by X-Frame-Options: your_guest_url does not permit cross-origin framing.]
i had to add link on my first page to let users open problematic page in new window by clicking on it and create inbetween page with javascript,loading icon and setTimeout().
firstpage.php [with 'iframe' and 'a' below 'iframe']
<?php
foreach(get_headers("http://".$_REQUEST["address"]) as $v) {
if($v == "X-Frame-Options: SAMEORIGIN" || $v == "X-Frame-Options: DENY") {
header("location: http://".$_REQUEST["address"]);
die();
}
}
?>
<iframe id="iframe-id" src="secondpage.php"></iframe>
<a href=your_guest_url>go to your_guest_url</a>
<script language='javascript'>
setTimeout(function() {
document.getElementById('iframe-id').src = 'your_guest_url';
},500);
</script>
secondpage.php [loaded into iframe]
<div class="loading-info">
<div id="loading-info" class="loading-info-content">
<i class="fa fa-3x fa-spinner fa-pulse"></i>
</div>
</div>
<script>
setTimeout(function() {
document.getElementById("loading-info").innerHTML = "<p'>USE LINK BELOW IFRAME</p>";
},5000);
</script>
page without 'hidden' X-Frame-Options loads via javascript into iframe after 500ms, problematic page won't load so secondpage stays in iframe and executes javascript setTimeout();.
Related
I'm working in an application that is embed in other websites and some of them use AMP. I'm currently using amp-iframe and I need the website url that the iframe is currently embed in for my app to work properly. I'm trying to pass it through params to use it in my application.
What I've been trying to do is getting the location.href (or location.origin + location.pathname) with amp-script and setting an AMP State to dynamically change the Iframe src. Currently not working.
HTML:
<amp-script layout="container" src="https://cdn.website.com/script.js">
<amp-iframe height="150" resizable sandbox="allow-scripts allow-same-origin allow-popups allow-forms" frameborder="0" src="https://website.com/dev/html" [src]="dynamicUrl">
<div overflow tabindex="0"></div>
</amp-iframe>
</amp-script>
JS:
function checkForAmp(method) {
if (window.AMP && typeof window.AMP.setState === "function") {
method();
} else {
setTimeout(function () {
checkForAmp(method);
}, 50);
}
}
function getUrlAndUpdateWidget() {
const url = `https://website.com/dev/html?dynamic-url=${
window.AMP.win.location.origin + window.AMP.win.location.pathname
}`;
window.AMP.setState({ dynamicUrl: url });
}
checkForAmp(getUrlAndUpdateWidget);
Any ideas how to work around it?
Thanks!
Unfortunately, the AMP object to which you have access in amp-script is not the same thing as the AMP object outside the worker.
AMP.win is undefined. I don't even think window.AMP.setState === "function" will work.
See here for a sample showing how to use AMP.setState in amp-script!
We do need someone to introduce support for the location object. Commenting on the github issue, as you did, helps. What we really need is someone who has time to contribute the code 😎
How to hide iframe url From HTML source code?
<iframe src="http://mysite.com" frameborder="0" scrolling="no" width="728" height="90"></iframe>
You can use javascript to load the source, and it will not be visible in iframe url in page source code.
For example with jQuery:
<script type="text/javascript">
$(document).ready(function(e) {
$('iframe').attr('src','http://www.flickr.com/');
});
</script>
<body>
<iframe src="" />
</body>
Example here.
You can combine it with $.post to get the value serverside:
$.post('get-iframe-src.php', function(data) {
$('iframe').attr('src',data);
});
You can even load iframe itself to some element like:
$.post('get-iframe.php', function(data) {
$('#element_id').html(data);
});
etc. solutions are many, this is just one of.
You can't. If the URL isn't in the HTML, how would the browser know where to get it?
One thing you could try is to obscure it to make it slightly harder for someone to find it. You could have the src attribute be blank and then when the document is ready fetch the URL value from the server in a separate AJAX request and update the iframe tag to include that value in the src.
This would be a fair amount of work, however, and wouldn't really accomplish anything. The only thing it would prevent is somebody finding it by viewing the page source. They can still look at the "current version" of the HTML in any web browser's debugging tools. (Right click on an element and inspect it, which is nearly ubiquitous at this point.) Or any other normal traffic-sniffing tools will see it plain as day.
Ultimately, if the web browser needs to know a piece of information, then that information needs to be visible on the client-side.
There's no way to fully block source viewing. But there are a couple ways to disable right-clicking:
1) Javascript:
<script language="JavaScript">
<!--
var message="Your message goes here.";
function click(e) {
if (document.all) {
if (event.button == 2) {
alert(message);
return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
// -->
2) Add the following into your tag: oncontextmenu="return false"
reference https://forum.powweb.com/archive/index.php/t-36161.html
I decided for solution that does not use javascript, because most of the time it will be possible to read the "hidden" content.
Moreover, changing iframe SRC with javascript, will keep URL hidden when checking the source. However, inspecting the code will show the real URL.
My code is in PHP; however, I believe that the logic can be translated to other programming languages. This is how it works:
I kept the iframe tag as usual:
<iframe src="dash_url.php"></iframe>
The trick is inside the iframe_url.php, where I validate the referer. If it is valid, page is redirected to iframe URL. If it is not, than URL will be a message.
<?
$iframe_url = "https://example.com";
$Referer = #$_SERVER["HTTP_REFERER"];
$RefererHost = #explode(":", explode("/", explode("//", $Referer)[1])[0])[0];
if ($RefererHost == $_SERVER["SERVER_NAME"]) {
header("Location: " . $iframe_url);
} else {
echo "Invalid URL";
}
?>
If visitor inspects the page or checks the source, iframe tag will show SRC as dash_url.php.
I have an iFrame on a webpage and on all the other pages I have a button saying "discuss". When the user clicks on this button it takes them to the iframe page.
I would like to know how to get the iframe to show the page the user just came from? i.e the page with the discuss button on it.
This is so that eventually users will be able to discuss the page by viewing it in an iframe.
Thanks in advance,
Daniel.
Below is an example. Both files must be in the same directory.
mainpage.html:
<html>
<body>
<script>
function gotoFramePageNormal() {
window.open('framepage.html', '_top');
}
function gotoFramePageWithVar() {
window.open('framepage.html?ref='+document.location.href, '_top');
}
</script>
<input type=button value="Discuss" onclick="gotoFramePageNormal()" /> (normal referrer; via HTTP header)<br />
<br />
<input type=button value="Discuss" onclick="gotoFramePageWithVar()" /> (with URL variable referrer)<br />
</body>
</html>
framepage.html:
<html>
<body>
<div>
Source: <span id="srcurl">...</span>
</div>
<iframe id="theframe" width=800 height=600></iframe>
<script>
(function() {
if (document.referrer=='') { //no referrer
//parse URL variables
var a=document.location.search,b,c;
while ( (a.length>0) && (a[0]=='?') ) a=a.substring(1,a.length);
//split variables
a=a.split('&');
//check each variable
for (b=0; b<a.length; b++) {
//split name and value
c=a[b].split('=');
if (c[0].toLowerCase()=='ref') {
//show source url
srcurl.innerText=decodeURI(c[1]);
//set iframe source
theframe.location.href=decodeURI(c[1]);
return;
}
}
//show no source url
srcurl.innerText='none';
} else { //has referrer
//show source url
srcurl.innerText=document.referrer;
//set iframe source
theframe.location.href=document.referrer;
}
})();
</script>
</body>
</html>
The mainpage.html uses URL variable to pass the source page to the frame page. Generally, this is done automatically by the web browser, but it's not reliable enough since that feature can be disabled by the user. The framepage.html will use both method to detect the source page URL.
<a href="http://example.com/test.html"
onclick="_gaq.push(['_link', 'http://example.com/test.html']);"
class="noFloat"
target="_blank">
Click Me
</a>
I have a problem with this code. Without return false; i have a new window and it's ok, but the same url is also open in the same parent window. Then i have two windows with the same content. I think the problem is the redirect of the _gaq.push Please help me! Thank you!
_link will replace your current page with the link page. So you should always return false because Google Analytics will be in charge of the redirection for this link.
Also Google doesn't support the attribute _blank. So you have to find a way around.
_gaq.push(['_setAllowLinker', true]);
function _gaLink(a) {
url = a.href
_gaq.push(function() {
if (a.target == '_blank') {
window.open(_gat._getTrackers()[0]._getLinkerUrl(url));
} else {
_gaq.push(['_link', url]);
}
});
return false;
}​
Now you can call it instead of Google Analytics _link.
<a href="http://example.com/test.html"
onclick="return _gaLink(this);"
class="noFloat"
target="_blank">
Click Me
</a>
I ran into the same problem with the target="_blank" not working when adding code for tracking file downloads.
on this website, the "Automate It" section shows a jquery code that will detect different type of links on your website (files, mailto, etc...) and automatically add the "onclick" event with _gaq.push.
in case the link above doesn't work :
http://www.blastam.com/blog/index.php/2011/04/how-to-track-downloads-in-google-analytics/
I have a set of asp.net pages which I wish they should only be accessible or loaded when they are loaded from an IFrame. If an attempt is made to access the pages directly via browser address bar then the page should not be displayed at all or display the message to the user.
I tried using cookies and sesions, but they are not that effective becuase once the cookie/session is created you can access the pages directly from browser, bypassing IFrame.
My development platform is asp.net 2.0+, vs2008, C# 2.0+
This is an example of one of the few times it is better to put the script in the head tag.
<html>
<head>
<title>sandBox</title>
<script type="text/javascript">
if (frameElement == null) {
//change location or close
window.location = "http://stackoverflow.com";
// or window.close();
}
</script>
</head>
<body>
content goes here
</body>
</html>
Try this inside your head tag:
<script>
if(window.self !== window.top); //inside an iframe
else window.location = "http://stackoverflow.com/" // Outside
</script>
Use this JS in the page to check whether it is in iframe or not.
if(window == window.top) {
//page is not in an iframe
}