ウェブサイト上にある画像のコピーやダウンロードを防ぐ方法

こんにちは、ナカムラです。
最近携わった案件に「ウェブサイト上の画像のコピーやダウンロードを防ぎたい」というご要望がありました。
検索すると解説されているページはたくさんあるのですが、備忘録として記しておきたいと思います。

ウェブサイト上の画像のコピーやダウンロードは防げるのか

まず前提として完全に防ぐことはできません。
そもそもページを表示している時点で読み込まれています。
ですので、考え方としては「簡単にはできないようにする」ということになります。
防ぐことができる操作別にそれぞれの防止方法をまとめていきます。

右クリック

何もしていない状態だと、右クリックで表示されるメニューにある「名前をつけて画像を保存」で保存できます。

対象のタグにoncontextmenu="return false;"を追加することで防ぎます。

<img src="https://placehold.jp/3d4070/ffffff/150x150.png" oncontextmenu="return false;" alt="コピーを防止している画像" />

コピー＆ペースト

コピーしたい画像を選択してショートカットや防止されていなければ右クリックのメニューでコピーすることができます。あとはどこかへペーストすることで画像を取得できます。

対象のタグにoncopy="return false;"を追加することで防ぎます。

<img src="https://placehold.jp/3d4070/ffffff/150x150.png" oncopy="return false;" alt="コピーを防止している画像" />

CSSでそもそも選択できないようにすることも可能です。

.noCopy {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

ドラック＆ドロップ

コピーしたい画像をドラック＆ドロップすることで画像を取得できます。

対象のタグにonselectstart="return false;" onmousedown="return false;"を追加することで防ぎます。

<img src="https://placehold.jp/3d4070/ffffff/150x150.png" onselectstart="return false;" onmousedown="return false;" alt="ドラックを防止している画像" />

CSSで操作できないようにすることも可能です。

.noDrag {
  pointer-events: none;
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  -ms-pointer-events: none;
}

スマホの長押し

スマホの場合は画像の部分を長押しすることで右クリックのようにメニューが表示されます。「写真に保存」などでダウンロードすることができます。

CSSで防止できますが、まだ標準の機能ではないです。

.noTouchCallout {
  -webkit-touch-callout:none;
  -moz-touch-callout:none;
}

その他の防ぎ方

imgタグではなく、背景画像として表示する方法もあります。
背景なのでそもそも操作対象になりません。

DEMO

それぞれ書いてみましたので見比べてみてください。

防げないもの

スクリーンショットやページの保存などは防ぐことができません。
ページの保存は右クリックを防止することで操作しづらくすることはできますが、ブラウザのメニューからもできてしまいます。
また、わざわざ保存しなくてもソースの見方や開発者ツールの使い方を知っている人であればソースから画像のURLを見つけるのは簡単です。

まとめ

こちらで防げるものはごく僅かです。
今回の紹介ではimgタグ個別に指定していますが、bodyに対して一括で指定する方法もあります。
実装する分には簡単ではありますが画像以外の文字などが選択できないなど、ユーザーの操作を大きく妨げてしまうことになります。
何を優先するのか、どこまで対応するかなど、クライアントと相談の上ご対応ください。