A highly adaptive implementation of iframe Windows
- 2020-03-30 01:18:28
- OfStack
There is a page in domainA, index.html, that contains a page in domainB, other.html, nested in an iframe
Since the other.html page is displayed in the iframe, and the content of the page dynamically increases or decreases, you need to remove the scroll bar from the iframe
Cross-domain operations are not possible due to the javascript same-origin policy, which makes the problem tricky
Taking a look at the web, a proxy page, or intermediary agent.html, belongs to domainA
Then, in other.html in domainB, you use an iframe to nest agent.html
Well, here's the thing:
Index.html USES an iframe to nest other.html
Other.html USES an iframe to nest agent.html
The reason for introducing the third page agent.html is to comply with the rule of "same origin policy" and complete the parameter transfer under different domains!
Our ultimate goal is to remove the scroll bar and ensure that the embedded page content is fully displayed
1. Get the actual height of the other.html page
2. Set height to the SRC attribute of its embedded iframe
3. Intercept the height value in the SRC attribute of the iframe in agent.html
The following example USES a trick to avoid using setInterval() to constantly set the height of the iframe
You do this by attaching a timestamp to the SRC of the iframe and letting the browser reload agent.html each time
In turn, the js function invokeMethodInTopWindow() in agent.hml is executed
Two HTML in domainA
index.html
#{extends 'main.html' /}
#{set title:'Home' /}
<hr>
<div style="color:red;font-weight:bold"> Window adaptation --- Bypass the same origin policy restrictions, while at the same time using the same origin policy, removed iframe Dynamically adjusts the height of the window to display all the contents of the nested page </div>
<!-- Requiring dynamic adjustment of height iframe -->
<div style="text-align:center;">
<iframe name="domainB" src="http://127.0.0.1:8088/other" width="80%" scrolling="no" frameborder="0"></iframe>
</div>
<script type="text/javascript">
function resize(height) {
//alert("resize");
document.getElementsByName("domainB")[0].height=height;
}
</script>
Agent. The HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
I am the proxy page!
<script type="text/javascript">
window.onload = invokeMethodInTopWindow;
function invokeMethodInTopWindow() {
//Alert (" call a codomain function to reset the height of the iframe ");
var domainA = document.parentWindow;
var realHeight = domainA.location.hash.split("#")[1];
//Last step: calls the function at the top window to reset the height of the iframe
parent.parent.resize(realHeight);
//alert("realHeight:"+realHeight);
//alert(document.parentWindow.name);// Gets the name of the window where the container resides domainA
//error://alert(document.parentWindow.parent.name); // The visit to fail : unable to access domainB
//alert(document.parentWindow.parent.parent.name);// At the top window Belong to domainA , so it can be accessed
}
//Once you set the SRC property of the iframe with a different timestamp, you don't have to use setInterval()
//setInterval("invokeMethodInTopWindow()",100);
</script>
</body>
</html>
The other domainB. HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body onclick="proxy()">
<!-- be A The page that the domain is embedded in -->
<button type="button" onclick="btnClick()"> Switch display </button>
<div style="display:none">
in JavaScript There is a very important security restriction called" Same-Origin Policy "(same origin policy).
This strategy is right JavaScript There is an important limitation on the content of the page that the code can access, that is JavaScript You can only access content in the same field as the document that contains it.
Same origin is the same domain name, same protocol, same port.
in JavaScript There is a very important security restriction called" Same-Origin Policy "(same origin policy).
This strategy is right JavaScript There is an important limitation on the content of the page that the code can access, that is JavaScript You can only access content in the same field as the document that contains it.
Same origin is the same domain name, same protocol, same port.
in JavaScript There is a very important security restriction called" Same-Origin Policy "(same origin policy).
This strategy is right JavaScript There is an important limitation on the content of the page that the code can access, that is JavaScript You can only access content in the same field as the document that contains it.
Same origin is the same domain name, same protocol, same port.
in JavaScript There is a very important security restriction called" Same-Origin Policy "(same origin policy).
This strategy is right JavaScript There is an important limitation on the content of the page that the code can access, that is JavaScript You can only access content in the same field as the document that contains it.
Same origin is the same domain name, same protocol, same port.
in JavaScript There is a very important security restriction called" Same-Origin Policy "(same origin policy).
This strategy is right JavaScript There is an important limitation on the content of the page that the code can access, that is JavaScript You can only access content in the same field as the document that contains it.
Same origin is the same domain name, same protocol, same port.
in JavaScript There is a very important security restriction called" Same-Origin Policy "(same origin policy).
This strategy is right JavaScript There is an important limitation on the content of the page that the code can access, that is JavaScript You can only access content in the same field as the document that contains it.
Same origin is the same domain name, same protocol, same port.
in JavaScript There is a very important security restriction called" Same-Origin Policy "(same origin policy).
This strategy is right JavaScript There is an important limitation on the content of the page that the code can access, that is JavaScript You can only access content in the same field as the document that contains it.
Same origin is the same domain name, same protocol, same port.
in JavaScript There is a very important security restriction called" Same-Origin Policy "(same origin policy).
This strategy is right JavaScript There is an important limitation on the content of the page that the code can access, that is JavaScript You can only access content in the same field as the document that contains it.
Same origin is the same domain name, same protocol, same port.
in JavaScript There is a very important security restriction called" Same-Origin Policy "(same origin policy).
This strategy is right JavaScript There is an important limitation on the content of the page that the code can access, that is JavaScript You can only access content in the same field as the document that contains it.
Same origin is the same domain name, same protocol, same port.
</div>
<div style="display:block">
Like a hacker program that he USES IFrame Embed the real bank login page on his page, and when you log in with your real username and password,
His page will go through Javascript Read into your form input So the user name and password are easy to get.
Like a hacker program that he USES IFrame Embed the real bank login page on his page, and when you log in with your real username and password,
His page will go through Javascript Read into your form input So the user name and password are easy to get.
Like a hacker program that he USES IFrame Embed the real bank login page on his page, and when you log in with your real username and password,
His page will go through Javascript Read into your form input So the user name and password are easy to get.
Like a hacker program that he USES IFrame Embed the real bank login page on his page, and when you log in with your real username and password,
His page will go through Javascript Read into your form input So the user name and password are easy to get.
Like a hacker program that he USES IFrame Embed the real bank login page on his page, and when you log in with your real username and password,
His page will go through Javascript Read into your form input So the user name and password are easy to get.
Like a hacker program that he USES IFrame Embed the real bank login page on his page, and when you log in with your real username and password,
His page will go through Javascript Read into your form input So the user name and password are easy to get.
Like a hacker program that he USES IFrame Embed the real bank login page on his page, and when you log in with your real username and password,
His page will go through Javascript Read into your form input So the user name and password are easy to get.
Like a hacker program that he USES IFrame Embed the real bank login page on his page, and when you log in with your real username and password,
His page will go through Javascript Read into your form input So the user name and password are easy to get.
</div>
<!-- Reverse embedded A Domain of the page -->
<iframe name="domainA" src="" style="display:none"></iframe>
<!-- script -->
<script type="text/javascript">
//Hide or show div
function btnClick() {
var div = document.getElementsByTagName("div");
for(var i in div) {
if(i<div.length)
div[i].style.display = (div[i].style.display == 'none') ? "block" : "none";
}
}
</script>
<script type="text/javascript">
function proxy(){
//alert("btn click");
//Gets the height of this page
var scrollHeight = document.documentElement.scrollHeight;
//Alert (" scrollbar height :"+scrollHeight);
//Set the height of the window to the SRC property of domainA's iframe
var iframeDomainA = document.getElementsByName("domainA")[0];
//Using a page from domainA as a proxy, the ultimate goal is to resolve the limitation of the "same origin policy" & NBSP;
var url = "http://localhost:9000/agent";
iframeDomainA.src = url+ "? time=" + new Date().getTime() + "#" + scrollHeight ;
}
window.onload = proxy;
</script>
</body>
</html>