攻击原理

恶意用户使用某种途径将透明的HTML内容定位到其他HTML元素上方，使用户以为在点击所看到的内容时，被恶意用户所拦截，并进行其他操作。示例：假设www.a.com/a.html的内容如下：

<html>
<body>
    ...
    <button type="button">Get Free Ipad!</button> <!-- 正常网站提供的代码 --->
    ...
    <iframe src="http://www.b.com/b.html" style="position:absolute; ..."><iframe> <!-- 恶意用户的代码 --->
    ...
</body>
</html>

假设www.b.com/b.html的内容如下：

<html>
<body>
    ...
    <button type="button">Watch Me!</button> <!-- 正常网站提供的代码 --->
    ...
</body>
</html>

防御方式

使用 X-Frame-Options

可选值：

  • DENY - 禁止响应的HTML被作为iframe内容
  • SAMEORIGIN - 只允许当前域下其他网页可以将当前响应的HTML作为iframe内容
  • ALLOW-FROM uri - 只允许指定URL将当前响应的HTML作为iframe内容

在示例中，www.b.com就应该为/b.html设置以下HTTP响应头来禁止该内容被恶意用户作为iframe内容在其他网站上使用。

X-Frame-Options:DENY
浏览器 支持DENY/SAMEORIGIN的版本 支持ALLOW-FROM的版本
Chrome 4.1.249.1042
Firefox (Gecko) 3.6.9 (1.9.2.9) 18.0
Internet Explorer 8.0
Opera 10.50
Safari 4.0

不足之处

  • 需要为每个页面均进行设定
  • 多域名、有子域名时设置繁琐
  • 代理服务器可能会删除该HTTP响应头而造成保护失效

使用 JavaScript

到目前为止，对老浏览器的处理最好方式：在每个页面中均引入以下代码

  <style id="antiClickjack">body{display:none !important;}</style>
  <script type="text/javascript">
   if (self === top) {
       var antiClickjack = document.getElementById("antiClickjack");
       antiClickjack.parentNode.removeChild(antiClickjack);
   } else {
       top.location = self.location;
   }
  </script>