簡単に画像を「右クリック＆ドラッグ＆直接リンク」させない方法・対策

2024/08/05
2024/07/24
HowTo
WordPress

WordPress（ワードプレス）で作成している管理サイトで、/wp-content/uploads/ 以下の階層に保存されているフォルダの写真が、直接表示されていることがわかりました。

写真・画像に関しては、知識がある人であれば簡単に保存できるので、ある程度は致し方ないかな。とは思っていたのですが、アート写真等のフォトギャラリーとしてアップしている画像に関しては、やっぱり極力不正利用はされないようにしたいですよね。

ってことで、ほんの少し対策しておけば一般のユーザーの方からの不正利用やダウンロード等はかなり防げるかと思いますので、今回は『簡単に画像を「右クリック＆ドラッグ＆直接リンク」させない方法・対策』です。

簡単に画像を「右クリック＆ドラッグ＆直接リンク」させない方法

プラグインを入れたら簡単やん！という方もおられるかと思いますが、プラグインを複数入れることで管理が大変にもなりますし、競合することも多々あり、トラブルの原因となることもありますよね。ですのでプラグインを使わなくてすむのであれば、極力使わない方がいいと思っています。

ということで、ここでもプラグインを使わず進めていきます。

1 右クリック保存対策

まずはJavaScriptを使って右クリックできないようにする方法です。

<script type="text/javascript">
document.addEventListener('contextmenu', function (e) {
  if (e.target.tagName === 'IMG') {
    e.preventDefault();
  }
});
</script>

これをWordPressで読み込んでいるjsファイルなり、footer.phpファイルの閉じる直前に記述するなりすれば、右クリックで画像を保存はできなくなります。

ちなみにこの記述は、ページ読み込み後に実行されるようにするなど、なるべく最後の方に記述することをオススメします。

2 ドラッグ保存対策

上記の設定で画像は右クリックできないようになったので、問題解決かな？と思っていたのですが、
実は簡単にドラッグしてパソコン内にドラッグできちゃったんですよね。

といわけで、以下のcssを追記します。

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

これで画像をドラッグして保存できなくもなります。

ちなみに元からドラッグできないものもあったのですが、それはcssの設定やJavaScriptの処理によるもののようですね。

あと注意として、以下の記述を入れて、クリックできないようにしたのですが、これだとaタグのリンクで画像を使えないので、正直使えないかな？ということで却下しました。

img {
  pointer-events: none;
}

ただ個別に設定等すれば、使いようによっては使えるかもですね。

3 直接リンク対策

上記設定をしても、一応リンクを直接打てば、画像は普通に表示されます。

ですので、念の為画像の不正利用等の対策のために、/wp-config/uploads/ 以下にある画像ファイルは、他の外部サイトからの直接リンクできないようにします。

まずは、 /wp-content/uploads/ディレクトリに.htaccessファイルを作成し、以下の記述をコピペします。

<FilesMatch "\.(jpg|jpeg|png|gif|avif|webp)$">
  SetEnvIf Referer "^http(s)?://(www\.)?3stars\.life" local_referrer
  Order Allow,Deny
  Allow from env=local_referrer
  # セキュリティ強化のためのヘッダーを追加
  Header set X-Content-Type-Options "nosniff"
</FilesMatch>

これでOKです！と言っていたのですが、SNSでサムネが表示されていないことが確認されましたので、以下追記します。

追記：2024/8/4

SNSでシェアされるはずのサムネイルが表示されなくなったので、それを避けるため、この対策（記述）は最終的にオフにしました。

冷静にに考えたら、外部サイトからの直接リンクをできないようにしたので、そらそうなりますよね。

というわけで、これはSNSとかでシェアされない、できなくても問題ない時に記述してくださいね。

併用して対策を

WordPressで制作したサイトで、画像を表示しつつ、右クリック等での保存を防ぐ方法は他にもいくつかありますが、完全に思い通りに画像のダウンロードを防ぐことは現状ではできません。どんなに対策をしても、この記事を見てるようなWebデザイナーやプログラマーの方等、知識をもった方であれば簡単に画像なんて保存できてしまいますよね。知識がない方であっても、スクリーンショットすることもできますしね。

また、3 直接リンク対策に追記したように、SNSでサムネイルが表示されないなどの弊害もでてきます。

ですので、このような対策をよく考えて併用しておくことで、画像をダウンロード保存するのに一手間も二手間もかかり、簡単に画像を保存できない、という状況を作ることができ、一定の効果は見込めますので、ぜひ不正利用の防止に役立ててください！