其實，圖片防盜鏈的實現如此簡單

前言

防盜鏈，就是防有人盜用你的鏈接。別人在他的網站上引用了你的資源 (圖片, 音頻)，這樣就會浪費你的流量，資源被引用的多了起來，你這邊的服務器可能就扛不住掛了，你說這是多麼悲哀的事情！

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

先來看個圖，這個圖是我在本地啓了一個服務後，分別加載了百度和 360 搜索兩個網站的圖片鏈接，對應防盜鏈下的樣子 (說好的美少女呢)

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

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

那麼關鍵部分來了，圖片防盜鏈是如何做到的呢？且看下圖

圖中所示，在請求頭中有 Host(請求的主機) 和 Referer(來源) 兩個參數，之所以會形成防盜鏈，那是因爲 Host 和 referer 所對應的值不相同造成的。

下面我們就直接來實踐一下，做一個圖片防盜鏈，上菜；

該圖爲整個文件夾目錄結構，下面參考該目錄結構來做，繼續來擼。

// 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'];  // 請求頭都是小寫的
    // 先看一下refer的值，去和host的值作對比，不相等就需要防盜鏈了  
    // 要讀取文件 返回給客戶端
    let { pathname } = url.parse(req.url);
    let src = path.join(__dirname, 'public', '.' + pathname);
    // src代表我要找的文件
    
    fs.stat(src, err => {   // 先判斷文件存不存在
        if (!err) {
            if (refer) {    // 不是所有圖片都有來源
                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);

通過以上不到 40 行的代碼就完成了圖片防盜鏈，想來也並沒有辣麼麻煩，利用請求頭來做的事情還是蠻多的，先來看看防盜鏈的效果吧

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

這裏我們修改一下 hosts 文件，把 127.0.0.1 指定爲兩個不同的域名訪問

友情提示：

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

當修改域名爲 www.chd.me 的時候，再次訪問就發現已經替換爲防盜鏈圖片 1.jpg 了，看如下效果

以上內容就實現瞭如何做一個圖片防盜鏈，防止別人使用你的資源，當然不僅僅是圖片防盜鏈，音頻，視頻等也可以根據此方法實現，之後大家也可以在工作中嘗試嘗試

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/4_KiRae7qHdRS8AWoAyb_g

猜你喜歡