Referスキームで画像防犯チェーンサービスを作成し、Webページの「解読」を実現

何が鎖を盗むのか
資源は自分のサーバー上になく、技術手段を通じて、資源を自分のウェブサイトに置いて、このような方法で他人の資源を盗む.
ReferとはRefererはhttp要求headerの一部であり、ブラウザ(またはアナログブラウザ動作)がwebサーバに要求を送信すると、ヘッダ情報にはReferrが含まれている.これは現在のインタフェースのアクセス源を示す.Refererの正確な英語スペルはreferrerである.初期のhttp規範によるスペルミスである.他のネットワーク技術の規範はこの問題を修正しようとし、正しいスペルを使用するため、現在スペルが統一されていない.
なぜ防犯チェーンを設置するのか

爬虫類防止(流量が急騰し、サービス提供者は被害者)

安全

盗難防止チェーンの設定方法
ここではexpressベースの二次開発フレームワークnestjsで小さなdemoを作成する
token検証などの方法でより厳しい防犯チェーンを実現することができます
...(ルーティングの追加方法などはともかく、興味があれば私のコードを直接見て、ベリファイアのルーティングコードに直接ジャンプします)
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);
    }
}

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()
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}`);
            }
        });
    }
}

主な論理コードは数行です!
検証の基本的な考え方:

referが空の場合、正しい図

を返す

referが空でなく、hostが私のターゲットサイトにヒットした場合、正しい図

に戻ります.

referが空ではありませんが、hostがターゲットサイトにヒットしなかった場合、エラーの図

に戻ります.
サービスの開始、アクセスhttp://localhost:3333/door-chain、正しい図を返します!!!
アクセス制限の削除方法
今回は,ウェブページ側でアクセスの制限をどのように取り除くか,また7牛のミラーリングの格納,あるいは実装案をサービス側に渡すかなどについてのみ議論することが可能であり,原理は同じであるが,ここでは一つ一つ述べる.headerからReferrerを取り除く2つの方法を以下に簡単に説明する.

名前をreferrer、contentをnever(whatwg規格、比較的互換性が良い)またはno-referrer(MDN規格)のmetaラベルを追加
ポリシー名
属性値(MDN規格)
属性値(whatwg標準)
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
いずれの値を選択するも、デフォルトではすべてのリソース(インタフェースを含む)が

で処理されているという欠点がある.

ラベルにReferrerPolicy属性を追加すると、あるリソースのreferrerポリシーの相対的な値リストがより正確に指定され、ReferrerPolicyはこれに基づいて3つの選択可能な値を拡張します.

same-originは、同源の要求に対して参照アドレスを送信するが、非同源の要求に対しては参照アドレス情報を送信しない.

strict-origin同等セキュリティレベルの場合、ファイルの送信元を参照アドレス(HTTPS->HTTPS)とするが、ダウングレードの場合は送信しない(HTTPS->HTTP).

strict-origin-when-cross-origin同源のリクエストに対して、参照アドレスとして完全なURLが送信されます.同等のセキュリティレベルの場合、送信ファイルのソースを参照アドレスとする(HTTPS->HTTPS);ダウングレードの場合はこのヘッダは送信されません(HTTPS->HTTP).

もし純粋な開発の角度の上で、この方式は完璧に近いならば、他の何も汚染していないためです.ブラウザの互換性の方面を見てみましょう:通常の値の問題も大きくありません.新しく拡張した3つの値の互換性図は少し楽観的ではありません!拡張imgタグ属性tsxでimgタグのデフォルトはreferrerPolicyをサポートしていません.実装案はts-react-webpackを参照して、私がどのように拡張したのかを確認して、踏んでください!!
もちろん、よく使われるのは上述のような方案であるが、総じて言えば、ここは防犯チェーンの知識体系の中の珍しい角にすぎず、まだ探求しなければならない.
その他referer-killerなどの項目も参照できます