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

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;">

ドラッグ&ドロップ禁止

CSSの場合(Firefox、IEは対応不可)

画像(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のシェアを考えてあえて何もしないというのもひとつの手です。

jQueryの場合

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

<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でも対処できるというのがうれしいですね。

タイトルとURLをコピーしました