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

最新推荐文章于 2024-06-14 07:32:52 发布

真的是沐白

最新推荐文章于 2024-06-14 07:32:52 发布

阅读量3.7k

点赞数

分类专栏： web安全

本文链接：https://blog.csdn.net/dreamjay1997/article/details/90112877

版权

web安全专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.前沿

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

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

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

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

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

X-Frame-Options首部的作用是：告知浏览器，该页面是否可以在 <frame>, <iframe>或者 <object> 中显示

取值有三种

DENY

表示该页面不允许在 frame 中展示，即便是在相同域名的页面中嵌套也不允许。

SAMEORIGIN

表示该页面可以在相同域名页面的 frame 中展示。

ALLOW-FROM uri

表示该页面可以在指定来源的 frame 中展示。

换一句话说，如果设置为 DENY，不光在别人的网站 frame 嵌入时会无法加载，在同域名页面中同样会无法加载。另一方面，如果设置为 SAMEORIGIN，那么页面就可以在同域名页面的 frame 中嵌套。（为了准确起见，上述描述搬运于MDN）

接下来我们来实践一下，看下X-Frame-Options是否会起作用

一个非常简单的页面，里面用iframe标签嵌入了一张页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>maze</title>
	<link rel="stylesheet" href="./mg.css">
</head>
<body>
	<iframe src="http://localhost:3000/index.html" frameborder="0"></iframe>
</body>
</html>

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
<h1>被引入</h1>
</body>
</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

可以看到有效果

真的是沐白

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
设置X-Frame-Options首部防止点击劫持

一.前沿我们来浏览页面的时候，经常会遇到这种情况：点击链接xxx,打开的却是xxx(另一个网站)这种现象我们称之为点击劫持(clickjacking)上面的描述比较简短，我们来看下点击劫持的定义：点击劫持（ClickJacking）是一种视觉上的欺骗手段。大概有两种方式，一是攻击者使用一个透明的iframe，覆盖在一个网页上，然后诱使用户在该页面上进行操作，此时用户将在不知情的情况...
复制链接

扫一扫