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

近期的工做都和交易有关，写代码都特别谨慎，前面说过前端如何防范跨站请求伪造攻击（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 博客