HTTP Referer 是包含在 HTTP 请求头中的字段,它包含了请求的来源页面的 URL。你可以通过检查 Referer 头来确定请求资源的页面是否来自你的网站。如果 Referer 头不匹配你的网站域名,你可以拒绝提供资源
目录
关于防盗链的实现啊方法还有另外两种(使用Token或签名,设置CORS),本篇只介绍referer的方法
话不多说先放源码演示:(我的html放在了/test目录下,内容只有一个图片)
const express = require('express')
const app = express()
const port = 3000
app.use((req, res, next) => {
// 检测请求头中的referer是否为127.0.0.1
// 获取referer
let referer = req.get('Referer')
let Accept = req.get('Accept')
console.log('Accept',Accept)
console.log('referer第一次打印',referer)
// 第一次html请求,所以会打印一次,但是没有referer字段,所以直接next(),第二次img请求,有了referer字段,所以打印出请求路径http://127.0.0.1:3000/aaa.html再next()
if (referer) {
// // 实例化
console.log('referer第二次打印',referer)
let url = new URL(referer)
console.log('url',url)
// 获取hostname
let hostname = url.hostname
console.log('referer第三次打印',referer)
console.log(hostname);
if(hostname!=='127.0.0.1'){
res.status(404).send('<h1>404 not found</h1>')
return
}
}
next()
})
app.use(express.static(__dirname + '/test'))
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
源码讲解:
首先就是声明express模块以及设置请求端口等基本结构搭建
声明两个中间件函数,一个用来设置网站资源的防盗链,底下那个用来加载静态资源中间件,我是加载我的根目录下的/test目录作为网站的根目录
我在我的第一个中间件函数定义了两个变量referer和Accpt两个变量分别用来获取请求头中的 Referer和Accept 字段的值
接着进行判断如果请求头中包含 Referer 字段,则实例化一个 URL 对象,并打印出该对象的信息,包括请求路径等。
如果请求的 hostname 不是 '127.0.0.1',则返回 404 错误页面;否则,继续执行下一个中间件
注意:
你可以在我的代码中发现有三次打印referer,但是实际终端最终会出现四次打印的referer,而其中referer第一次打印会打印两次,分别返回undefined和http://127.0.0.1:3000/网站名.html
那是因为第一次html请求,所以会打印一次,但是没有referer字段,所以直接next(),第二次img请求,有了referer字段,所以打印出请求路径http://127.0.0.1:3000/网站名.html再next()