前端安全：防范点击劫持的两种方式

近期的工作都和交易有关，写代码都特别谨慎，前面说过前端如何防范跨站请求伪造攻击（CSRF），这次准备简单说说防范点击劫持。

什么点击劫持？最常见的是恶意网站使用 <iframe> 标签把我方的一些含有重要信息类如交易的网页嵌入进去，然后把 iframe 设置透明，用定位的手段的把一些引诱用户在恶意网页上点击。这样用户不知不觉中就进行了某些不安全的操作。

有两种方式可以防范。

使用 JS 防范

判断顶层视口的域名是不是和本页面的域名一致，如果不一致就让恶意网页自动跳转到我方的网页。当然你还可以恶心一下这些恶意网站，比如说弹窗十几次，或者跳转到某些404页面。

if (top.location.hostname !== self.location.hostname) {
    alert("您正在访问不安全的页面，即将跳转到安全页面！");
    top.location.href = self.location.href;
}

使用 HTTP 头防范

通过配置 nginx 发送 X-Frame-Options 响应头，这样浏览器就会阻止嵌入网页的渲染。更详细的可以查阅MDN上关于X-Frame-Options 响应头的内容。

add_header X-Frame-Options SAMEORIGIN;

原文首发在我的 github 博客