以前に請け負った仕事で、サイト内の画像を保存できないようにしてほしいとの要望があった事があります。
完全に保存禁止にするのは無理だろうと思っていて、調べたらやっぱり完全には不可能でした。開発者ツール(デベロッパーツール)を使える人には無意味なものになってしまいます。
今回は、そんな中でも出来る限り画像保存を防ぐ方法を解説していきます。
画像保存されるケース
画像を保存される場合どんなケースがあるのかと考えた時、以下のようなケースがあるかと思います。
- 右クリックで保存
- ドラッグ&ドロップで保存
- 長押しして保存(スマホ)
- スクリーンショットで保存
上記のような動作で保存される事が大半だと思いますので、出来る限り防ぐための方法を解説していきます。
画像保存を完全に防ぐのが難しい理由
画像保存を完全に防ぐのが難しい理由としては、CSSやJavaScriptを使用している為です。
開発者ツール(デベロッパーツール)を使用すると、CSSの無効化が出来たり画像のURLを取得できます。または、他のツール等でJavaScriptを無効化する事も可能だからです。
Webに少し詳しい人からすると対策は意味のないものになってしまいます。
右クリック禁止にする
ここからは、画像保存を禁止にする方法を解説していきます。
まずは、右クリックを禁止にする方法です。
CSSで右クリック禁止にする
CSSで右クリック禁止にするには、以下のようにpointer-eventsプロパティを使用します。
値をnoneに設定する事で画像を右クリックできなくなります。
img {
pointer-events: none;
}
上記の画像を右クリックすると、画像ではなく画像の後ろを右クリックしているのと同じ動作になります。
JavaScriptで右クリックを禁止にする
JavaScriptで画像を右クリック禁止にするは以下のように記述します。
const images = document.querySelectorAll('img');
images.forEach(img => {
img.addEventListener('contextmenu', function(event) {
event.preventDefault();
});
});上記のように記述する事で、画像上での右クリックを禁止にし、右クリックメニューも出ない状態になります。
画像のドラッグ＆ドロップを禁止にする
つづいて、画像のドラッグ＆ドロップを禁止にする方法です。
多くのユーザーがドラッグ＆ドロップで保存するかと思うのでそこそこ効果はあるかと思います。
ここでは、JavaScriptでimgタグに直接記載する方法と別に記載する方法を紹介します。
CSSでの対応方法もあるのですが、ブラウザやブラウザバージョンによって動作がまちまちなので、CSSでの対応方法は割愛します。
imgタグに直接記述する方法
ドラッグ＆ドロップさせたくない画像や要素に、onselectstartとonmousedownを記述しそれぞれの値をfalse;とreturn false;を指定します。
<img src="/file/sample_img.jpg" onselectstart="return false;" onmousedown="return false;">JavaScriptを別に記述する方法
const images = document.querySelectorAll('img');
images.forEach(img => {
img.addEventListener('dragstart', function(event) {
event.preventDefault();
});
});上記のように記述する事で、img要素すべてをドラッグ＆ドロップ禁止にする事ができます。
スマホで画像の長押し保存を禁止にする
次に、スマホでの画像の長押し保存を禁止にする方法です。
まずは以下のコードをご覧ください。
img {
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-touch-callout:none;
-moz-user-select:none;
user-select:none;
}上記のように、touch-calloutプロパティとuser-selectプロパティにnoneを指定します。
ベンダープレフィックスは必須になりますので注意してください。
touch-calloutプロパティは長押しした際の動作を無効にし、user-selectプロパティは長押しした際の文章の範囲選択を無効にします。user-selectプロパティはすべてのブラウザ対応していますが、touch-calloutプロパティはAndrroid未対応となりますので注意してください。
touch-calloutプロパティのブラウザ対応状況はこちら、user-selectプロパティのブラウザ対応状況はこちら。
スクリーンショットでの保存について
スクリーンショットでの保存の禁止は基本的には無理です。
というのも、スクリーンショットする為の特定キーの動作を検知して禁止にするぐらいは出来ますが、他にもスクリーンショットを撮る為のツール(ブラウザの拡張機能やアプリ、開発者ツール(デベロッパーツール)など)がありすぎるからです。
ですので、今回はスクリーンショットでの保存に対する対応策は無しとさせていただきます。
さいごに
いかがでしたでしょうか。
今回は、画像保存されるのを出来る限り防ぐ・禁止にする方法を解説しました。
なかなか完全に防ぐ事は出来ないのですが、実装する機会があった際にどうやるんだっけ?とならないように、どの程度実装可能なのか言えるようにしておきたいですね。
