READING
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 的方式展示当前页面。
READING
LAB
点击劫持是一种视觉欺骗的攻击手段，攻击者将需要攻击的网站通过 iframe 的方式嵌入自己的网页中，一般是设为一个透明元素，或者伪装成另外一个元素，诱导用户点击。
对于这种攻击方式，一般推荐以下两种防御方式：
JS 防御
对于某些低版本的浏览器，只能通过 JS 的方式来防御点击劫持。
CSP frame-ancestors
用于指定哪些源可以通过
<iframe>等方式来展示当前页面，可以指定一或多个源。Content-Security-Policy: frame-ancestors <source> <source>;e.g.
X-Frame-Options
X-Frame-Options 是一个 HTTP 响应头，用来控制浏览器是否渲染
<frame>和<iframe>中的内容，可以设置的值有 3 个：DENY: 表示当前页面不允许通过iframe的方式来展示。SAMEORIGIN: 相同域名下，页面可以通过iframe的方式来展示。ALLOW-FROM: 允许在指定 URL 中通过iframe的方式展示当前页面。