Skip to content

Instantly share code, notes, and snippets.

@ufologist

ufologist/page-b.html

Created October 12, 2016 07:17
Show Gist options
  • Save ufologist/504c52cec4d9135a9d6762c687e13a0b to your computer and use it in GitHub Desktop.
Save ufologist/504c52cec4d9135a9d6762c687e13a0b to your computer and use it in GitHub Desktop.
Download ZIP
iframe 页面中的链接可以让父级页面重定向, 要防止这种情况, 可以通过 iframe 的 sandbox 属性来控制.
Raw
page-b.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面 B</title>
</head>
<body>
<h1>页面 B</h1>
<ul>
<li><a href="http://baidu.com">X度</a></li>
<li><a href="http://baidu.com" target="_top">X度 target="_top" 可以重定向父级页面</a></li>
</ul>
</body>
</html>
Raw
prevent-iframe-top-navigation-page-a.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面 A</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<h1>页面 A</h1>
<h2>不设置 iframe 的 sandbox</h2>
<p>iframe 页面中的链接可以让父级页面重定向</p>
<iframe src="page-b.html" width="100%" height="200"></iframe>
<h2>设置 iframe 的 sandbox="allow-forms allow-scripts allow-popups"</h2>
<p><strong>在 PC 端浏览器上测试</strong>可以防止 iframe 页面中的链接重定向父级页面, 会转变成 _blank 的形式弹出来</p>
<iframe src="page-b.html" sandbox="allow-forms allow-scripts allow-popups" width="100%" height="200"></iframe>
<h2>设置 iframe 的 sandbox="allow-forms allow-scripts"</h2>
<p><strong>在移动端还是不能防止父级页面被重定向</strong>, 只好通过禁止 allow-popups 来让链接点击无效</p>
<iframe src="page-b.html" sandbox="allow-forms allow-scripts" width="100%" height="200"></iframe>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment