假设你不希望其他网站在<iframe>中“框架”你的网站:
<iframe src="http://example.org"></iframe>
所以你在所有页面中插入反帧，帧分解JavaScript:
/* break us out of any containing iframes */
if (top != self) { top.location.replace(self.location.href); }
太好了!现在，您可以自动“打破”或跳出任何包含iframe的框架。除了一个小问题。
事实证明，你的框架破坏代码可以被破坏，如下所示:
<script type="text/javascript">
var prevent_bust = 0
window.onbeforeunload = function() { prevent_bust++ }
setInterval(function() {
if (prevent_bust > 0) {
prevent_bust -= 2
window.top.location = 'http://example.org/page-which-responds-with-204'
}
}, 1)
</script>
这段代码执行以下操作:
每次浏览器试图通过窗口导航离开当前页面时，递增一个计数器。Onbeforeunload事件处理程序
设置一个计时器，通过setInterval()每毫秒触发一次，如果它看到计数器增加，则将当前位置更改为攻击者控制的服务器
该服务器提供一个HTTP状态码为204的页面，这不会导致浏览器在任何地方导航
我的问题是——这更像是一个JavaScript难题，而不是一个实际问题——如何打败框架破坏破坏者?
我有一些想法，但在我的测试中没有什么管用:
试图通过onbeforeunload = null清除onbeforeunload事件没有效果
添加alert()会停止进程，让用户知道它正在发生，但不会以任何方式干扰代码;单击OK，让破坏照常进行
我想不出任何方法来清除setInterval()定时器
我不是一个很好的JavaScript程序员，所以这是我对你的挑战:嘿，老兄，你能打破框架破坏老兄吗?
所有建议的解决方案都直接强制改变顶部窗口的位置。如果用户想要帧在那里怎么办?例如，搜索引擎的图像结果中的顶部帧。
我写了一个原型，默认情况下所有输入(链接、表单和输入元素)都是禁用的，激活时什么都不做。
如果检测到包含帧，输入将被禁用，并在页面顶部显示警告消息。警告消息包含一个链接，该链接将在新窗口中打开该页的安全版本。这可以防止页面被用于点击劫持，同时仍然允许用户在其他情况下查看内容。
如果没有检测到包含帧，则输入被启用。
这是代码。您需要将标准HTML属性设置为安全值，并添加包含实际值的附加属性。它可能是不完整的，对于完全安全的附加属性(我在考虑事件处理程序)可能必须以同样的方式处理:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title></title>
<script><!--
function replaceAttributeValuesWithActualOnes( array, attributeName, actualValueAttributeName, additionalProcessor ) {
for ( var elementIndex = 0; elementIndex < array.length; elementIndex += 1 ) {
var element = array[ elementIndex ];
var actualValue = element.getAttribute( actualValueAttributeName );
if ( actualValue != null ) {
element[ attributeName ] = actualValue;
}
if ( additionalProcessor != null ) {
additionalProcessor( element );
}
}
}
function detectFraming() {
if ( top != self ) {
document.getElementById( "framingWarning" ).style.display = "block";
} else {
replaceAttributeValuesWithActualOnes( document.links, "href", "acme:href" );
replaceAttributeValuesWithActualOnes( document.forms, "action", "acme:action", function ( form ) {
replaceAttributeValuesWithActualOnes( form.elements, "disabled", "acme:disabled" );
});
}
}
// -->
</script>
</head>
<body onload="detectFraming()">
<div id="framingWarning" style="display: none; border-style: solid; border-width: 4px; border-color: #F00; padding: 6px; background-color: #FFF; color: #F00;">
<div>
<b>SECURITY WARNING</b>: Acme App is displayed inside another page.
To make sure your data is safe this page has been disabled.<br>
<a href="framing-detection.html" target="_blank" style="color: #090">Continue working safely in a new tab/window</a>
</div>
</div>
<p>
Content. <a href="#" acme:href="javascript:window.alert( 'Action performed' );">Do something</a>
</p>
<form name="acmeForm" action="#" acme:action="real-action.html">
<p>Name: <input type="text" name="name" value="" disabled="disabled" acme:disabled=""></p>
<p><input type="submit" name="save" value="Save" disabled="disabled" acme:disabled=""></p>
</form>
</body>
</html>
所有建议的解决方案都直接强制改变顶部窗口的位置。如果用户想要帧在那里怎么办?例如，搜索引擎的图像结果中的顶部帧。
我写了一个原型，默认情况下所有输入(链接、表单和输入元素)都是禁用的，激活时什么都不做。
如果检测到包含帧，输入将被禁用，并在页面顶部显示警告消息。警告消息包含一个链接，该链接将在新窗口中打开该页的安全版本。这可以防止页面被用于点击劫持，同时仍然允许用户在其他情况下查看内容。
如果没有检测到包含帧，则输入被启用。
这是代码。您需要将标准HTML属性设置为安全值，并添加包含实际值的附加属性。它可能是不完整的，对于完全安全的附加属性(我在考虑事件处理程序)可能必须以同样的方式处理:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title></title>
<script><!--
function replaceAttributeValuesWithActualOnes( array, attributeName, actualValueAttributeName, additionalProcessor ) {
for ( var elementIndex = 0; elementIndex < array.length; elementIndex += 1 ) {
var element = array[ elementIndex ];
var actualValue = element.getAttribute( actualValueAttributeName );
if ( actualValue != null ) {
element[ attributeName ] = actualValue;
}
if ( additionalProcessor != null ) {
additionalProcessor( element );
}
}
}
function detectFraming() {
if ( top != self ) {
document.getElementById( "framingWarning" ).style.display = "block";
} else {
replaceAttributeValuesWithActualOnes( document.links, "href", "acme:href" );
replaceAttributeValuesWithActualOnes( document.forms, "action", "acme:action", function ( form ) {
replaceAttributeValuesWithActualOnes( form.elements, "disabled", "acme:disabled" );
});
}
}
// -->
</script>
</head>
<body onload="detectFraming()">
<div id="framingWarning" style="display: none; border-style: solid; border-width: 4px; border-color: #F00; padding: 6px; background-color: #FFF; color: #F00;">
<div>
<b>SECURITY WARNING</b>: Acme App is displayed inside another page.
To make sure your data is safe this page has been disabled.<br>
<a href="framing-detection.html" target="_blank" style="color: #090">Continue working safely in a new tab/window</a>
</div>
</div>
<p>
Content. <a href="#" acme:href="javascript:window.alert( 'Action performed' );">Do something</a>
</p>
<form name="acmeForm" action="#" acme:action="real-action.html">
<p>Name: <input type="text" name="name" value="" disabled="disabled" acme:disabled=""></p>
<p><input type="submit" name="save" value="Save" disabled="disabled" acme:disabled=""></p>
</form>
</body>
</html>
