HTMLで画像の右クリック保存をガードする

2022年11月22日

HTMLはその特性上画像をダウンロードしたり、ソースを閲覧することが容易にできるようになっています。

ただ昨今、著作権や大人の事情等で画像をダウンロードできないようにしなければいけないケースがあります。特定ｗｅｂでのみ使用可の契約をした画像を使用する場合等です。

そのような場合に重宝するのが「右クリック禁止」です。
これをするだけで、直接的な画像ダウンロードができなくなります。

今回はそのやり方について記述します。

論より証拠。まずは実物を見てください。

1. 画像のみ右クリック禁止の例
2. ページ全体右クリック禁止の例

1番目の例は、特定画像のみ右クリック禁止にした例です。
2番目の例は、ページ全体を右クリック禁止にした例です。

個人的には2番目のページ全体を右クリック禁止にする方法がおすすめです。
なぜならば、1番目の例だとソース表示してから画像ダウンロードが実行できてしまうためです。

ではどうやれば右クリック禁止を実装できるのか解説いたします。

右クリックを禁止にするコード

右クリックを禁止する方法はいたって簡単です。
次のコードをタグに直接記述するだけでＯＫです。

画像の右クリックを禁止にする場合の記述例

ページ全体を右クリック禁止にする場合はbodyタグに記述します。

何も考えずにコピーするだけで右クリックを禁止できます。

各記述についての解説

今回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ということになります。

どの対策をとるかは、契約時に相談して決めておきましょう。