<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          【W(wǎng)eb技術】so easy! 圖片防盜鏈原理

          共 2678字,需瀏覽 6分鐘

           ·

          2021-09-03 13:24

          來源:https://juejin.im/post/5adc0d03518825673a2022b7

          作者:chenhongdong

          前言

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

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

          圖片防盜鏈

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



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

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

          那么關鍵部分來了,圖片防盜鏈是如何做到的呢?且看下圖



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

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




          該圖為整個文件夾目錄結構,下面參考該目錄結構來做,繼續(xù)來擼。


          1. // js部分

          2. const fs = require('fs');

          3. const path = require('path');

          4. const http = require('http');

          5. const url = require('url');

          6. const getHostName = function (str) {

          7. let { hostname } = url.parse(str);

          8. return hostname;

          9. };

          10. http.createServer((req, res) => {

          11. let refer = req.headers['referer'] || req.headers['referrer']; // 請求頭都是小寫的

          12. // 先看一下refer的值,去和host的值作對比,不相等就需要防盜鏈了

          13. // 要讀取文件 返回給客戶端

          14. let { pathname } = url.parse(req.url);

          15. let src = path.join(__dirname, 'public', '.' + pathname);

          16. // src代表我要找的文件

          17. fs.stat(src, err => { // 先判斷文件存不存在

          18. if (!err) {

          19. if (refer) { // 不是所有圖片都有來源

          20. let referHost = getHostName(refer);

          21. let host = req.headers['host'].split(':')[0];

          22. if (referHost !== host) {

          23. // 防盜鏈

          24. fs.createReadStream(path.join(__dirname, 'public', './1.jpg')).pipe(res);

          25. } else {

          26. // 正常顯示,如果路徑存在,可以正常顯示直接返回

          27. fs.createReadStream(src).pipe(res);

          28. }

          29. } else {

          30. // 正常顯示,如果路徑存在,可以正常顯示直接返回

          31. fs.createReadStream(src).pipe(res);

          32. }

          33. } else {

          34. res.end('end');

          35. }

          36. });

          37. }).listen(8888);

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

          1. <-- html部分 -->

          2. <body>

          3. <img src="http://www.chenhd.me:8888/2.png" />

          4. </body>

          這里我們修改一下hosts文件,把127.0.0.1指定為兩個不同的域名訪問

          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)下較為方便通過終端直接sudo vi /etc/hosts修改即可

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



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



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


          1. JavaScript 重溫系列(22篇全)
          2. ECMAScript 重溫系列(10篇全)
          3. JavaScript設計模式 重溫系列(9篇全)
          4. 正則 / 框架 / 算法等 重溫系列(16篇全)
          5. Webpack4 入門(上)|| Webpack4 入門(下)
          6. MobX 入門(上) ||  MobX 入門(下)
          7. 120+篇原創(chuàng)系列匯總

          回復“加群”與大佬們一起交流學習~

          點擊“閱讀原文”查看 120+ 篇原創(chuàng)文章

          瀏覽 36
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  女人18片毛片120分钟 | 欧美色图视频网址 | 欧美 日韩 人妻 | 久插网 | 欧美色网 |