设置X-Frame-Options首部防止点击劫持

一.前沿

我们来浏览页面的时候，经常会遇到这种情况：点击链接xxx,打开的却是xxx(另一个网站)

这种现象我们称之为点击劫持(clickjacking)

上面的描述比较简短，我们来看下点击劫持的定义：

点击劫持（ClickJacking）是一种视觉上的欺骗手段。大概有两种方式，一是攻击者使用一个透明的iframe，覆盖在一个网页上，然后诱使用户在该页面上进行操作，此时用户将在不知情的情况下点击透明的iframe页面，从而达到攻击者的某种目的，比如: 刷点击量，刷流量等；二是攻击者使用一张图片覆盖在网页，遮挡网页原有位置的含义；

这篇文章主要讲第一种方式

X-Frame-Options首部的作用是：告知浏览器，该页面是否可以在 , 

看下index.html的结构，也是很简单的一个页面

    



被引入

服务端根据请求的url，返回相应的页面

const express = require('express')
const path = require('path')
const app = express();
const fs = require('fs')

app.get('/index.html', (req, res)=> {
    console.log('link')
    // 读取页面
    const htmlPath = path.join(__dirname, './client/index.html')
    fs.readFile(htmlPath, (error, content)=> {
      if(!error) {
          res.set({
             'content-type': 'text/html'
          })
          // 返回页面
          res.send(content)
      }
    })
});

app.listen(3000, ()=> console.log('server listening in port 3000'))

我们在看下效果

发现页面被嵌入

接下来给相应添加X-Frame-Options首部

app.get('/index.html', (req, res)=> {
    console.log('link')
    const htmlPath = path.join(__dirname, './client/index.html')
    fs.readFile(htmlPath, (error, content)=> {
      if(!error) {
          res.set({
             'content-type': 'text/html',
             'X-Frame-Options': 'DENY'
          })
          res.send(content)
      }
    })
})

看下效果

页面无法嵌入，控制台报错，说首部的X-Frame-Options为deny

可以看到有效果