Webサイト画像のコピーガード（右クリック保存禁止・ドラッグ＆ドロップ禁止・プリントアウト禁止）処理のやり方まとめ

先日、依頼主の希望で画像の不正な二次利用がないようにWebページに画像のコピー（保存・ドラッグ＆ドロップ・プリントアウト）を禁止する処理をほどこすことがあったので、備忘録としてまとめました。

Webサイト画像のコピーとは

Webサイト画像のコピーとは、パソコンの場合は右クリックでコンテクストメニューを開いて画像のダウンロードをする方法やドラッグ＆ドロップでの画像の保存、印刷での保存方法があります。
スマホの場合は画像の長押しで画像フォルダに保存ができます。

画像を勝手に二次利用されたくない場合にHTMLやCSS、Javascript（jQuery）の編集で画像の保存を抑止することができます。

スクリーンショットを撮られたり、デベロッパーツールでソースを見たりすればコピーすることはできてしまいます。
あくまで「簡単にはコピーできないようにする」処置です。

JavaScript（jQuery）を使用して右クリックを禁止することで、画像のコピーやダウンロードをさせなくします。
ただしその他の右クリックメニューも使えなくなってしまい不便なためユーザーからの印象はあまり良くないようです。

<body oncontextmenu="return false;">

または

<script>
　$(document) 
  .on('contextmenu', 'img', function () { return false; });
</script>

<img src="画像のURL" oncontextmenu="return false;">

画像（img）に対してuser-select: none;、user-drag: none;を指定することで画像のドラッグ＆ドロップ保存を禁止できます。

img {
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

上記のCSSでの禁止処理だと、Firefoxではドラッグ＆ドロップができてしまいます。
Firefoxのシェアを考えてあえて何もしないというのもひとつの手です。

こちらでもマウスを押下時のアクションが無効化されるため、ドラッグ＆ドロップができなくなります。

<script>
$(document) 
  .on('mousedown', 'img', function (e) { e.preventDefault(); });
</script>

もっとも簡単な方法はCSSのpointer-events:none;を使用して、ドラッグ＆ドロップ禁止と、右クリック（スマホは画像長押し）時の「画像を保存」メニューをなくすことができます。
右クリック禁止にしたときと比べて、他のメニューが使えるのでストレスが少ないです。

img {
　pointer-events:none;
}

これだけだと画像にリンクをつけている場合は画像のクリックができなくなってしまいます。
画像がクリックできるようにするためにはa要素に対してdisplay:block;を指定します。

a {
　display:block;
}
img {
　pointer-events:none;
}

ページ全体を印刷させないためには下記のCSSを追加します。
印刷させないと言っても、印刷することはできます。印刷時のページの表示が真っ白になるということです。

@media print {
    body { display: none !important; }
}

画像のみを印刷させない場合は下記のCSSを追加します。

@media print {
    img { display: none !important; }
}

画像のコピーガード（保存禁止・ドラッグ＆ドロップ禁止・プリントアウト禁止）処理のやり方をまとめました。CSSでも対処できるというのがうれしいですね。