This article takes you to understand anti-leech

Anti-leech

for example. We usually see pictures on the Internet, think it is good, and want to copy the address. Some of them can be used after copying the address, but some, even if we copy the address and use it on our own img, it still has no effect.

The reason is that some services where the pictures are located have their own anti-leech links.

The role of anti-hotlinking: to prevent external websites from stealing the resources of this website. (Others' domain names cannot access service resources)

Why should there be an anti-theft chain? From a global perspective, some website resources are relatively scarce, or there are too many people requesting, the pressure on the website will be great, so setting up anti-leech links is a kind of protection for resources.

Note that this static resource is only for pictures.

Implement anti-leech

The essential:refer request header.

Implementation function: Declare a middleware to detect whether the refer in the request header is an accessible domain name.

Here, demonstrate on your own computer, your computer can have two domain names, one is 127.0.0.1, and the other is localhost.

Now implement a simple demo, mount a static resource, and require it to be accessible from the domain name 127.0.0.1, but not from the domain name localhost.

code show as below:

const express = require('express')

const app = express()


app.use((req, res, next) => {
    
    
    //检测请求头中的referer是否为127.0.0.1
    //获取referer
    let referer = req.get('referer')
    if (referer) {
    
    
        let url = new URL(referer)
        let hostname = url.hostname;
        console.log(hostname)
        if(hostname !== '127.0.0.1') {
    
    
            res.status(404).send('<h1>404 not find</h1>');
        }
    }
    next()
})

//用内置中间件挂载静态资源
app.use(express.static(__dirname + '/public'))

app.get('/home', (req, res) => {
    
    
    res.end('home')
})

app.listen(3000, () => {
    
    
    console.log('已在服务端运行...')
})

The final effect achieved:

Now let's talk about the principle:

The first thing to know is that the referer is a part of the header. When the browser sends a request to the web server, it will usually bring the Referer to tell the server which page the web page is linked from, so the server can obtain some information for processing . On this machine it is: 127.0.0.1:3000; localhost:3000.

After we get the referer, we can get the domain name. hostname is used to get the domain name. After obtaining the domain name, you can write a simple judgment. If the domain name is 127.0.0.1, the resource can be displayed, otherwise the image cannot be requested.

Here is a detail. The detail is that only when there are pictures in the static resources can the referer be obtained normally.

Summarize

This example makes good use of nodejs middleware. Also a good comprehensive exercise on express in nodejs.