美文网首页让前端飞Web前端之路Vue.js
前端配置防盗链和反盗链

前端配置防盗链和反盗链

作者: 爱踢球的jerry | 来源:发表于2020-03-05 15:42 被阅读0次

    问题

    由于图片放在第三方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">

    相关文章

      网友评论

        本文标题:前端配置防盗链和反盗链

        本文链接:https://www.haomeiwen.com/subject/cysfrhtx.html