Force iframe to have an ID - javascript

I have some content on my site that can be embeded by other domains. What happens is that my iframes need to have an ID to run some javascript.
This is the iframe code I provide to my users:
<iframe src="http://www.example.com/embed/2854" id="zframe" width="100%" height="460" scrolling="no" frameborder="0"></iframe>
When the users remove the frame ID, my javascript stops working.
Is there a way wo force the iframe to have an ID via javascript?
Bellow is my implementation to try forcing the ID usage on my iframe when users remove the ID from the iframe code I provide:
<html>
<head>
<title></title>
</head>
<body>
<script>
document.getElementByTagName('iframe')[0].setAttribute("id", "zframe");
</script>
</body>
</html>

Related

How can prevent Stored XSS by iframe?

I use Extjs and JS to build a dialog where can display my html data from DB, that data is wrapped with iframe like this:
<iframe name="ext-gen568" frameborder="0" src="javascript:;" style="width: 514px; height: 189px;">
<html>
<head> ... </head>
<body>
<br><br>
<blockquote type="cite">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<p>Hello</p>
<video><source src="x" onerror="alert('xss')"></video>
</blockquote>
</body>
</html>
</iframe>
I tried to add sandbox to iframe, but it doesn't work, the XSS alert still show.
Then I tried to change to <iframe src='#'... sandbox>, but XSS alert still show.
I removed src or just set it '' in <iframe src=''... sandbox>, it got this error: DOMException: Blocked a frame with origin "mytestdomain" from accessing a cross-origin frame.
What should I do to handle my issue?
Thanks a lot for any help.
The issue is fixed by set "allow-same-origin" for sandbox
<iframe sandbox="allow-same-origin" src="javascript:;"...></iframe>

JavaScript access iframe cross domain issue

I have a snippet on www.a.com
<iframe src="www.b.com" id="my-iframe">
#document
<html>
<header>
//some headers go here
</header>
<body>
<div id="my-iframe-div"></div>
</body>
</html>
</iframe>
What I want to achieve is to add one class name on the div inside the iframe
so what I did is
const element = document.getElementById('my-iframe').contentWindow.document.getElementById('my-iframe-div');
if(element) element.classList.add('my-iframe-class')
which would result in cross domain error, because the src attribute is www.b.com, but the page is on www.b.com
How to implement that? thanks

MutationObserver() for check the change tag in iframe

I must check the change of a tag in an iframe in another webpage (with the same domain). I have this index.html:
<html>
<body>
<iframe id="open_app" src="/sign.php" width="800" height="600" frameBorder="0" scrolling="no" ></iframe>
</body>
...
and this is the tag in sign.php that I want check for change:
<div id="status"></div>
Now, I have always used the MutationObserver for check the change of a tag in a webpage but I now I can not do the same to test the iframe tag with the id status. I've already seen all the related discussions on Stackoverflow but nothing works. What is the best way to verify the change of the iframe tag with the MutationObserver? Thanks.

recognize link navigated to in iframe by page containing the iframe

I have a website where all the navigation happens inside of an iframe. all the pages are locally stored on the server.
a reduced version of the html code is:
>> index.php
<html>
<head>
</head>
<body>
<table><tr><td>
<iframe src="link.php" width=599 height=350 frameborder=0 scrolling=no name="vframe"></iframe>
<td>
<img src="pic.jpg">
</body>
</html>
Note the img is inside the main page. However, I want this image to change based upon what link is navigated to inside the iframe.
Right now I am using php GET to determine what page has been navigated to, but that is not a great solution because all the user has to do is tinker with the link and the desired image disappears.
eg:
<?
$locate = $_GET['locate'];
?>
<html>
<head>
</head>
<body>
<table><tr><td>
<? { if ($locate =="link") {
echo '<iframe src="link.php" width=599 height=350 frameborder=0 scrolling=no name="vframe"></iframe>
<td>
<img src="pic.jpg">';
}
?>
</body>
</html>
The link inside the iframe page is:
http://example.com/index.php?locate=link
What I would like to do is somehow have the parent page holding the iframe to recognize what page is inside of the iframe and make the display of the image contingent on that instead of the hack above. I think that would be a more reliable way and not subject to the user manipulating the link.
As an aside, if there is a way to GET 'locate' in the link w/o the link showing in the address bar, that might be a compromise. But as far as I know, that can't be done.
====
EDIT
I found this:
document.getElementById("iframe_id").contentWindow.location.href
But I am not sure how to implement it.
I tried
<script>document.write(document.getElementById("vframe").contentWindow.location.href );</script>
in the body and the head ...
but the iframe link is not displayed
i tried this:
<html>
<head>
<script>
function getLink()
{
var x=document.getElementById("vframe").contentWindow.location.href;
}
</script>
</head>
<body>
<iframe src="start.php" width=599 height=350 frameborder=0 scrolling=no name="vframe"></iframe>
</body>
</html>
But if it is supposed to work, i can't figure out how to 'read' the result of var x ...
i tried this:
<html>
<head>
</head>
<body>
<iframe src="start.php" width=599 height=350 frameborder=0 scrolling=no id="vframe"></iframe>
<script>document.write(document.getElementById("vframe").contentWindow.location.href);</script>
</body>
</html>
but the result is "about:blank". If I place it in the head or above the iframe there is no result ...

How do I get a paragraph from a website and display it in an iframe?

I am trying to get the first paragraph from the website below and display it in an iframe.
Can you correct my code?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var iframe = document.getElementById('iframe');
$(iframe).contents().find("<p>").html();
</script>
</head>
<body>
<iframe name="iframe" id="iframe" src="https://www.baronaonlinepoker.com/blog" scrolling="yes" width="180" height="135">
</iframe>
</body>
</html>
You'd be better to use a DIV and use XMLHTTPRequest to set the innerHTML
If the browser loads a page from x.com, that page can have a frame whose source is y.com, but the x.com code will not have access to the y.com DOM. This is a cross-domain issue. You can read more here: http://en.wikipedia.org/wiki/Same-origin_policy
Please see my answer here: https://stackoverflow.com/a/19100553/98706
because I think your going about achieving something the wrong way.

Categories