【W(wǎng)eb技術(shù)】1118- 圖片防盜鏈的實(shí)現(xiàn)既然如此簡(jiǎn)單

來(lái)源：https://juejin.im/post/5adc0d03518825673a2022b7

作者：chenhongdong

前言

防盜鏈，就是防有人盜用你的鏈接。別人在他的網(wǎng)站上引用了你的資源(圖片,音頻)，這樣就會(huì)浪費(fèi)你的流量，資源被引用的多了起來(lái)，你這邊的服務(wù)器可能就扛不住掛了，你說(shuō)這是多么悲哀的事情！

一般情況下以圖片防盜鏈居多，我們也來(lái)看看圖片防盜鏈是如何做出來(lái)的。

圖片防盜鏈

先來(lái)看個(gè)圖，這個(gè)圖是我在本地啟了一個(gè)服務(wù)后，分別加載了百度和360搜索兩個(gè)網(wǎng)站的圖片鏈接，對(duì)應(yīng)防盜鏈下的樣子(說(shuō)好的美少女呢)

百度的做法是用另外一張圖片替換了，而360搜索的做法更粗暴，直接出現(xiàn)了裂圖，訪問(wèn)403直接給Forbidden了。

這就是所謂的圖片防盜鏈了，畢竟看到這樣的圖，大家也沒(méi)了興致，和之前想要的圖片差距太大，也就沒(méi)必要再保留了

那么關(guān)鍵部分來(lái)了，圖片防盜鏈?zhǔn)侨绾巫龅降哪?？且看下圖

圖中所示，在請(qǐng)求頭中有Host(請(qǐng)求的主機(jī))和Referer(來(lái)源)兩個(gè)參數(shù)，之所以會(huì)形成防盜鏈，那是因?yàn)镠ost和referer所對(duì)應(yīng)的值不相同造成的。

下面我們就直接來(lái)實(shí)踐一下，做一個(gè)圖片防盜鏈，上菜；

該圖為整個(gè)文件夾目錄結(jié)構(gòu)，下面參考該目錄結(jié)構(gòu)來(lái)做，繼續(xù)來(lái)擼。

// js部分
const fs = require('fs');
const path = require('path');
const http = require('http');
const url = require('url');
const getHostName = function (str) {
    let { hostname } = url.parse(str);
    return hostname;
};
http.createServer((req, res) => {
    let refer = req.headers['referer'] || req.headers['referrer'];  // 請(qǐng)求頭都是小寫(xiě)的
    // 先看一下refer的值，去和host的值作對(duì)比，不相等就需要防盜鏈了
    // 要讀取文件 返回給客戶端
    let { pathname } = url.parse(req.url);
    let src = path.join(__dirname, 'public', '.' + pathname);
    // src代表我要找的文件
    fs.stat(src, err => {   // 先判斷文件存不存在
        if (!err) {
            if (refer) {    // 不是所有圖片都有來(lái)源
                let referHost = getHostName(refer);
                let host = req.headers['host'].split(':')[0];
                if (referHost !== host) {
                    // 防盜鏈
                    fs.createReadStream(path.join(__dirname, 'public', './1.jpg')).pipe(res);
                } else {
                    // 正常顯示，如果路徑存在，可以正常顯示直接返回
                    fs.createReadStream(src).pipe(res);
                }
            } else {
                // 正常顯示，如果路徑存在，可以正常顯示直接返回
                fs.createReadStream(src).pipe(res);
            }
        } else {
            res.end('end');
        }
    });
}).listen(8888);

通過(guò)以上不到40行的代碼就完成了圖片防盜鏈，想來(lái)也并沒(méi)有辣么麻煩，利用請(qǐng)求頭來(lái)做的事情還是蠻多的，先來(lái)看看防盜鏈的效果吧

<-- html部分 -->
     src="http://www.chenhd.me:8888/2.png" />

這里我們修改一下hosts文件，把127.0.0.1指定為兩個(gè)不同的域名訪問(wèn)

1. 127.0.0.1 www.chenhd.me

2. 127.0.0.1 www.chd.me

友情提示：

• windows系統(tǒng)修改hosts文件地址為C:\Windos\System32\drivers\etc下的hosts文件，拷貝hosts文件修改后替換即可

• mac系統(tǒng)下較為方便通過(guò)終端直接sudo vi /etc/hosts修改即可

由于html部分我們圖片引用的地址就是www.chenhd.me域名下的圖片，所以這種情況屬于正常訪問(wèn)，直接展示2.png圖片了，就是這么酷

當(dāng)修改域名為www.chd.me的時(shí)候，再次訪問(wèn)就發(fā)現(xiàn)已經(jīng)替換為防盜鏈圖片1.jpg了，看如下效果

以上內(nèi)容就實(shí)現(xiàn)了如何做一個(gè)圖片防盜鏈，防止別人使用你的資源，當(dāng)然不僅僅是圖片防盜鏈，音頻，視頻等也可以根據(jù)此方法實(shí)現(xiàn)，之后大家也可以在工作中嘗試嘗試。