絶対に画像をダウンロード&スクレイピングさせないWebページを突破してみる

ちょっと面白そうだったので絶対に画像をダウンロード&スクレイピングさせないWebページを本気で作ってみたを突破してみようと思う。

方法

方法としては下記の3つくらいが簡単そうだけど、いちばん簡単な1つ目でやってみます。

1. HTML,JS,JSONをDLしてHTML書き換え、ダウンローダとして使う
2. Chrome Extensionを書く
3. Puppeteerなどを使う

とりあえず、仕組みは書かれているので下記でcanvasのtextを無効化 + DL用のボタンを追加します。

    <button id="dl">Download</button>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        // ctxのfillTextをなにもしない関数に置き換える
        ctx.__proto__.fillText = () => { };
        // png画像として保存するためのボタンのアクション
        document.getElementById('dl').addEventListener('click', () => {
            const a = document.createElement('a');
            a.href = canvas.toDataURL();
            a.download = 'image.png';
            a.click();
        });
    </script>

あとは画面を表示します。そうするとこれが

こうなる

あとはDownloadボタンを押せばめでたくコピーライト抜きのpngがDLできます。

まとめ

HTMLに表示しているデータを守るのはかなり厳しいのではないかと思います。
ただ、今回の例だと画像に直接コピーライト書いちゃえば良さそうではある。