HTMLはその特性上画像をダウンロードしたり、ソースを閲覧することが容易にできるようになっています。
ただ昨今、著作権や大人の事情等で画像をダウンロードできないようにしなければいけないケースがあります。特定ｗｅｂでのみ使用可の契約をした画像を使用する場合等です。
そのような場合に重宝するのが「右クリック禁止」です。
これをするだけで、直接的な画像ダウンロードができなくなります。
今回はそのやり方について記述します。
論より証拠。まずは実物を見てください。
1番目の例は、特定画像のみ右クリック禁止にした例です。
2番目の例は、ページ全体を右クリック禁止にした例です。
個人的には2番目のページ全体を右クリック禁止にする方法がおすすめです。
なぜならば、1番目の例だとソース表示してから画像ダウンロードが実行できてしまうためです。
ではどうやれば右クリック禁止を実装できるのか解説いたします。
右クリックを禁止にするコード
右クリックを禁止する方法はいたって簡単です。
次のコードをタグに直接記述するだけでＯＫです。
oncontextmenu="return false;" onselectstart="return false;" onmousedown="return false;"画像の右クリックを禁止にする場合の記述例
<img src="img.jpg" width="400" height="400" oncontextmenu="return false;" onselectstart="return false;" onmousedown="return false;">
ページ全体を右クリック禁止にする場合はbodyタグに記述します。
<body oncontextmenu="return false;" onselectstart="return false;" onmousedown="return false;">
何も考えずにコピーするだけで右クリックを禁止できます。
各記述についての解説
今回3つの命令を記述しています。
その意味について解説いたします。
（１）oncontextmenu 右クリック制御
この命令は、右クリックの禁止・許可を制御します。
記述例では、oncontextmenu=”return false;” と書いておりますが、return true; と書くと右クリックが許可されます。
つまりfaseが返れば「右クリック禁止」
tureが帰れば「右クリック許可」
となります。
（２）onselectstart テキスト選択制御
この命令はテキストの選択の禁止・許可を制御します。
return false; でテキスト選択が禁止され、return true;でテキスト選択が許可されます。
（３）onmousedown マウスクリック制御
この命令は、マウスのクリック禁止・許可を制御します。
return false;でマウスクリックが禁止され、return true;でマウスクリックが許可されます。
要は、マウスドラックでも画像ダウンロードができてしまうため、それを禁止しています。
また、この記述がreturn false;だと、onselectstartをreturn true;にしていてもテキスト選択ができなくなります。
要は複合的に禁止にしてガードを強めています。
右クリック制御だけならば、（１）のoncontextmenuだけでよいのですが、複合的にガードすることでよりＨＴＭＬの保護を強化しています。
スマホでダウンロードすることを想定してのことです。
ただこれでも完璧とはいえません
ここまですれば完璧と思えるかもしれませんが、実際はそうではありません。
なぜならば、スクリーンショットはガードできないためです。
さらに言えば、画面をカメラで撮影した場合等も同様です。
HTMLで画像を完璧に保護することはほぼ不可能なのです。
ただ、直接的なダウンロードを禁止することで、ある程度抑止はできます。
少なくとも、画像掲載の契約条件がある場合は、右クリックを禁止することが求められます。
本当に保護したい場合は、「そもそも画像を掲載しない」が無難です。
スクリーンショットはしょうがないであれば、今回の対策でOKですが、スクリーンショットもNGということであれば、事実上web上に掲載すること自体NGということになります。
どの対策をとるかは、契約時に相談して決めておきましょう。