What is leasehold

Resources are not on their own servers, and through technical means, the resources placed in their own websites, through this method to steal the resources of others.

What is a Referer

Referer is part of the HTTP request header. When a browser (or emulates browser behavior) sends a request to a Web server, the header contains the Referer. It represents the source of access for the current interface. The correct English spelling for Referer is referrer. Due to spelling errors in the earlier HTTP specification, this was done in the interest of backward compatibility. Specifications for other web technologies attempt to fix this problem by using correct spelling, so the current spelling is not uniform.

Why set up anti-theft chain

  • Creep-proof (Traffic explodes and service providers are victims)
  • security

How to set up anti-theft chain

Here’s a small demo using NestJS, an Express-based secondary development framework

You can use token authentication and other methods to achieve stricter anti-theft chain

. (How to add routing and so on will not say, interested in directly to see my code, directly jump to the validator routing code)

routers/doorChain/controller.ts

import express from 'express';
import { Get, Headers, Res, Controller } from '@nestjs/common';
import { DoorChainService } from './service';

@Controller('door-chain')
export class DoorChainController {
    constructor(private readonly doorChainService: DoorChainService) {}

    @Get()
    root(@Headers('referer') referer: string.@Res() res: express.Response) {
        return this.doorChainService.root(referer, res); }}Copy the code

routers/doorChain/service.ts

import * as url from 'url';
import * as path from 'path';
import express from 'express';
import { Injectable } from '@nestjs/common';
import logger from 'utils/logger';

@Injectable(a)export class DoorChainService {
    root(referer: string, res: express.Response) {
        let imageName = 'break.png';
        if(! referer) { imageName ='yellow.png';
        } else {
            try {
                const refererParsed = url.parse(referer);
                if (refererParsed.host === 'localhost:8080') {
                    imageName = 'yellow.png'; }}catch (err) {}
        }
        const imagePath = path.resolve(__dirname, `. /.. /.. /assets/${imageName}`);
        res.sendFile(imagePath, null.err= > {
            if (err) {
                logger.error(err);
                res.status(404).end();
            } else {
                logger.info(`Sent: ${imagePath}`); }}); }}Copy the code

The main logical code is only a few lines!

The basic idea of verification:

  • When the referer is null, the correct graph is returned
  • When the referer is not empty and the host hits my target site, the correct graph is returned
  • When the referer is not empty, but host fails to hit my target site, return the wrong graph

Start the service, visit http://localhost:3333/door-chain, return the correct figure!!!!!!

How to remove access restrictions

This time we only discuss how to remove access restrictions in the web page side, there are also seven cow mirror storage, or the implementation of the program by the server side processing and so on are ok, and the principle is the same, here is not a repeat.

Here are two ways to remove Referrer from the header:

  • Add meta tags whose name is referrer and content is never(WHATWG standard) or no-referrer(MDN standard)

    Name of strategy Attribute value (MDN standard) Attribute values (WHATWG standard)
    No Referrer no-referrer never
    No Referrer When Downgrade no-referrer-when-downgrade default
    Origin Only origin –
    Origin When Cross-origin origin-when-crossorigin –
    Unsafe URL unsafe-url always

    Whichever value you choose, the disadvantage is that by default all resources (including interfaces) are processed

  • Add the ReferrerPolicy attribute to the tag

    More precisely specifies the referrer policy for a resource

    ReferrerPolicy expands on the above list of values with three alternative values:

    • Same-origin sends the reference address for same-origin requests, but does not send the reference address information for non-same-origin requests.
    • Strict-origin With the same security level, the source of the sent file is used as the reference address (HTTPS->HTTPS), but not in the case of degradation (HTTPS->HTTP).
    • Strict-origin-when -cross-origin For the same origin request, the system sends the complete URL as the reference address. With the same level of security, the source of the sent file is used as the reference address (HTTPS->HTTPS); Do not send this header in degraded case (HTTPS->HTTP).

    From a pure development perspective, this approach is close to perfect because it doesn’t contaminate anything else. Let’s look at browser compatibility:

    Regular values are not a problem either.

    Compatibility diagram for the three values of the new extension

    It’s a bit pessimistic!

    About extending the IMG tag attribute

    TSX does not support referrerPolicy for img tags by default. You can refer to ts-React-webpack to see how it is extended.

Of course, although commonly used will be similar to the above scheme, in general, here is only a few of the anti-theft chain knowledge system, still to be explored.

In addition, referrer-killer and other projects can be referred to