说一下点击劫持 - Githubissues

READING

[x] https://www.imperva.com/learn/application-security/clickjacking/
[x] https://portswigger.net/web-security/clickjacking (notes: read the extension readings in this blog when you got time)

LAB

点击劫持是一种视觉欺骗的攻击手段，攻击者将需要攻击的网站通过 iframe 的方式嵌入自己的网页中，一般是设为一个透明元素，或者伪装成另外一个元素，诱导用户点击。

对于这种攻击方式，一般推荐以下两种防御方式：

客户端：JS 防御，保证当前的 frame 是最顶层的 window。
服务端： Content Security Policy (CSP) frame-ancestors 指令 (用以替换 X-Frame-Options)。

JS 防御

对于某些低版本的浏览器，只能通过 JS 的方式来防御点击劫持。

<head>
  <style id="click-jack">
    html {
      display: none !important;
    }
  </style>
</head>
<body>
  <script>
    if (self == top) {
      var style = document.getElementById("click-jack");
      document.body.removeChild(style);
    } else {
      top.location = self.location;
    }
  </script>
</body>

CSP frame-ancestors

用于指定哪些源可以通过 <iframe> 等方式来展示当前页面，可以指定一或多个源。

Content-Security-Policy: frame-ancestors <source> <source>;

e.g.

Content-Security-Policy: frame-ancestors 'none';

Content-Security-Policy: frame-ancestors 'self' https://www.example.org;

X-Frame-Options

X-Frame-Options 是一个 HTTP 响应头，用来控制浏览器是否渲染 <frame> 和 <iframe> 中的内容，可以设置的值有 3 个：

DENY: 表示当前页面不允许通过 iframe 的方式来展示。
SAMEORIGIN: 相同域名下，页面可以通过 iframe 的方式来展示。
ALLOW-FROM: 允许在指定 URL 中通过 iframe 的方式展示当前页面。

suukii / fe-interview

说一下点击劫持 #24