HTMLとCSSとJSで簡単に画像を保存できなくする

簡単に保存させない。ただそれだけ。

①右クリックなどの対策

ググったら大量に出てくるので解説は割愛。

pointer-events: none;
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-touch-callout:none;
-moz-user-select:none;
user-select:none;

onselectstart="return false;"
onmousedown="return false;"

②Base64で埋め込む

①とともに使うと良い対策。
Base64っていうのは。以下を参照。

Base64 - Wikipedia

これを使うと、右クリックが禁止されなくても、URLとして画像をコピーできなくなる。

③JSを使う

これが今回のキモ。
まずはこんなコードを書く。

window.addEventListener("load", (event) => {
  setBackgroundImage('https://hogehoge.com/hogehoge.png', 'contentID');
});
  
function setBackgroundImage(imageUrl, divId) {
  fetch(imageUrl)
  .then(response => response.blob())
  .then(blob => {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = () => {
      const div = document.getElementById(divId);
      div.style.backgroundImage = `url(${reader.result})`;
    };
  })
  .catch(error => {
    console.error('画像の読み込みに失敗しました:', error);
  });
}

これはあるURLから画像を引っ張ってきてそれをBase64に変換して表示するコード。
ただしクロスサイトオリジンに引っかからないソースから引っ張る必要がある。

これだけでも十分熟練者以外は保存できないが、熟練者はあるものを使ってくる。
そう、皆さん大好き「開発者ツール」だ。

これが厄介なものでCSSやHTMLを直接編集できるときた。
これの対策はめんどくさいしやっても処理が重くなるのであきらめて、
画像のURLを悟らせないようにする方向へ切り替える。

さっきのJSファイルのURLの部分を環境変数を使ってこう書き換える。

window.addEventListener("load", (event) => {
  setBackgroundImage(process.env.url, 'contentID');
});

こうすることでURLの流出をなるべく抑えることができる。
さらにこうすると、いい点がもう１つある。
それはURLではあまり意味がなかった難読化が大きな意味を成すことだ。
文字列になったのでおそらく難読化されるだろう。

とまあこんな感じにすれば簡単にはURLは取得できないはずだ。