让前端飞Web前端之路Vue.js

前端配置防盗链和反盗链

2020-03-05  本文已影响0人  爱踢球的jerry

问题

由于图片放在第三方oss平台上,需要考虑图片的安全问题

原因

要了解防盗链和反防盗链,必须首先搞明白Referer,Referer是浏览器自动加的请求头,用于告知服务器用户的来源页面。
主要用来做网站统计用,除了统计以外,另一个用处就是防盗链。

解决方案

1、前端添加防盗链,主要是利用nginx
location ~* \.(gif|jpg|png|swf|flv|zip)$ {
    valid_referers none blocked 47.104.184.134;
    if ($invalid_referer) {
    rewrite ^/ http://www.egtch.com/404.html;
    #return 404;
    }
}
gif|jpg|png|swf|flv|zip表示对gif、jpg、png、swf、flv、zip后缀的文件实行防盗链(可根据自己的需要进行修改)
rewrite: 表示对www.egtch.com这个来路进行判断
绿色部分:if{}里面内容的意思是,如果来路不是指定来路就跳转到http://www.egtch.com/404.html页面。
#return:假如将#删除,而且再将第4行代码删除,就直接返回

这样的话只有Referer是47.104.184.134才能访问,否则都不能访问
2、后端给图片添加防盗链,不表
如果防盗链是后端添加的,需要前端在index.html做如下配置
<meta name="referrer" content="unsafe-url">
上一篇下一篇

猜你喜欢

热点阅读