HTML | 画像のコピー、ダウンロードを禁止する方法
HTMLの<img>タグで表示している画像のコピーやダウンロードを禁止する方法とサンプルコードを紹介しています。
画像のダウンロードを禁止する方法
画像のコピーやダウンロードを完全に防ぐ事は難しいですが、ダウンロードさせないためには以下のような方法があります。
- 画像の上に透過画像を設置する方法
- 右クリックを禁止する方法
- .htaccessでファイルフォルダに直接アクセスできなくする方法
画像の上に透過画像を設置する方法
画像の上に重ねて透過画像を設置する事でドラッグ＆ドロップによるダウンロード、右クリックメニューによるダウンロードができなくする事が可能です。
サンプルでは、1×1ピクセルの透過画像を要素の幅、高さに拡大して対象となる画像の上に設置しています。
<div style="position: relative;">
<img src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="サンプル用画像">
<img src="https://1-notes.com/wp-content/uploads/2023/10/transparent.png" alt="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
</div>
この場合、ページのソースコードを表示すれば画像ファイルのURL、パスが確認でき、直接開いてコピーする事は可能となります。
利用する場合は後で紹介している「.htaccessでファイルフォルダに直接アクセスできなくする方法」を併用すると効果は高くなるかもしれません。
右クリック禁止にする方法
右クリックの禁止は「oncontextmenu="return false;"」を対象要素に指定する事で実装可能です。
例えば「oncontextmenu="return false;"」を<body>タグに記述した場合はページ全体が右クリック禁止となります。
以下のサンプルでは対象となる画像の<img>タグに対して指定して、右クリックを禁止状態にしています。
<img src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="サンプル用画像" oncontextmenu="return false;">右クリック禁止は、JavaScriptが書けたり、拡張機能を使う事で簡単に解除可能な事を理解する必要があります。
.htaccessでファイルフォルダに直接アクセスできなくする方法
.htaccessファイルを編集して、画像を直接開いたり直リンクを防止する事を可能にします。
以下のサンプルコードの.htaccessファイルを画像フォルダ以下に設置する事で、画像の拡張子を持つファイルの直リンクを禁止します。
上記の「画像の上に透過画像を設置する方法」と組み合わせる事で、ソースコードから画像ファイルを直接開いてコピーするといった方法の対策となります。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_URI} \.(jpeg|jpg|png|gif|webp)$
RewriteRule .* - [R=404,L]
</IfModule>