見出し画像
Photo by amayado_rineco

画像の保存を禁止する方法とその回避方法

もるるん

ホームページ制作している際にごくごくたまに気にされる方がいらっしゃいます。
それは画像保存できないようにしてほしいという要望です。
こういう掲載する画像を保存しにくいようにする対策とその回避方法を
ご紹介します。
回避方法に関しては既存のサイトでも使えるかもしれないです！？ので悪用はしないでください。
また、ここに載っている方法は回避可能なので他の方法を検討する必要があります。

① 透明の画像を被せる
➁ 右クリックを禁止する
➂ ドラッグを禁止する
➃ 画像のURLから直接アクセスできないようにする

① 透明の画像を被せる
保存されたくない画像の上に透明の画像をかぶせます。
これで右クリックから画像を保存しても、透明の画像が保存されるようになり画像を守ります。
１.同サイズまたはそれより大きいサイズの透明な画像を用意
 2.z-indexを指定する 

<img src="/images/somepic.png" alt="保存されたくない画像" width="800" height="600"/>
<img src="/images/dummy.png" alt="透明の画像" width="800" height="600" style="z-index: 2"/>

ディベロッパーツールを使って透明の画像を指定しているHTML要素を削除するだけで保存することが可能です。

右クリックで画像保存できないようにする方法


ページ全体を右クリックできないようにする場合

<body oncontextmenu="return false;">

画像のみ右クリックできないようにする場合

<img src="/img/sample.png" alt="sample画像" oncontextmenu="return false;" />

JavaScriptでする場合 

document.oncontextmenu = function(){ return false; };
document.body.oncontextmenu = "return false;"

ディベロッパーツールを使って下記のように書き換えることで保存できるようになります。

document.oncontextmenu='';
document.body.oncontextmenu='';

ドラッグアンドドロップをできないように
これはドラッグができないようにする方法です。
ページ全体をドラッグできないようにする場合

<body onselectstart="return false;" onmousedown="return false;">

画像のみドラッグできないようにする場合

<img src="/img/sample.jpg" alt="sample画像"  onselectstart="return false;" onmousedown="return false;" />

Javascriptでする場合

document.onselectstart = function(){ return false; };
document.onmousedown = function(){ return false; };
document.body.onselectstart = "return false;"
document.body.onmousedown = "return false;"

JavaScriptでonselectstartとonmousedownに設定しているreturn false;を削除することでドラッグができるようになります。 

document.onselectstart='';
document.onmousedown='';
document.body.onselectstart='';
document.body.onmousedown='';

画像URLから直アクセスすればいいんじゃ？と思われる方も多いと思います。
そういう場合、画像URLから直アクセスできないようにする方法は以下の通りです。

画像のURLをそのままブラウザで開いたりcurlやwgetでダウンロードするのを防ぐ方法があります(回避方法はありますが)
バックエンド側で対応する方法です

Refererでフィルタリングする
Refererが自ドメインで無ければ403を返すようにします。
nginxでの設定は以下の通りです。

location ~* /images/.*\.(jpg|png|gif|jpeg|webp)$ {
   valid_referers server_names *.yoursite.com;
   if ($invalid_referer) {
       return 403;
   }
}

Node.jsで行う場合は以下のように確認するとよいでしょう。

if (!/^https?.*\.yoursite.com/).test(req.referer) {
 res.send(403);
}

curlやwgetでRefererをリクエスト時に付与することで画像を保存することができるようになります。 

​curl -OL http://www.sample.com/img/sample.jpg -H "Referer: http://www.sample.com"
wget http://www.sample.com/img/sample.jpg --referer=http://www.yoursite.com

フロントエンドやリクエストヘッダー、エンドユーザー側で
設定できるような方法では画像の保存を防ぐことはできません。
絶対に保存できないようにすることは難しいでしょう。

複数の方法をうまく組み合わせたりすることで画像保存しにくいように、工夫して対応するのがいいかもしれません。

この記事が気に入ったらサポートをしてみませんか？