みなさんこんにちは、ガノー（Twitter:Ganohr）です。
最近悪質な広告ブロッカーである『uBlock Origin』が当サイトのコンテンツを誤認ブロックし、サイトに数々の不具合を引き起こしました。
その調査とサイト修復のために1週間以上かかりましたが、uBlock Originの当該の不具合を引き起こした元凶となる関係者へ連絡し、解決することはできました。
結果、そのサイト調査の一貫で様々なサイト改修を行うこととなり、怪我の功名かな「不具合の少ない画像のホットリンク対策手法の開発に成功した」ため共有します。
更新履歴
2023/02/04 対処コードに解説を付記
2023/01/28 対策がよりわかりやすいように章立てを変更
2023/01/18 内容を更新
2023/01/17 公開
目次
- 1.この記事を実践するとどうなる?
- 2.ホットリンクとは何か
- 3.ホットリンクの問題点
- 4.あまり知られていないホットリンク対策の落とし穴
- 5.ホットリンク対策の3パターン
- 5.1..htaccessを用いた画像のホットリンク対策1：自サイトや検索エンジン・クローラー以外の画像アクセスを404等で遮断する
- 5.1.1..htaccessで画像へアクセスするクローラーを許可する
- 5.1.2..htaccessで予め許可したアクセス元以外の画像へのホットリンクは404を返却して遮断する
- 5.2.画像のホットリンク対策2：不審なサイトからのホットリンクを別の画像へ置き換える
- 5.3.画像のホットリンク対策3：予め問題ないことがわかっているサイトからのホットリンクは許可し、それ以外の場合はサイトのファビコン等へ置換し、スプログからのホットリンクには画像の置換を行う
- 6.ホットリンク対策の問題点をJavaScriptで対処する
- 7.悪質なホットリンクを行っているサイトは野放しにせず、OCSRI（One Click Spam Reporting Interface）でお薬（スパムレポート）を処方しよう
- 8.最後に
- 9.関連記事
この記事を実践するとどうなる?
画像のホットリンクを細かく制御でき、スプログ対策に役立ちます。
また、それ以外の通常のサイトへはロゴ画像を提供し、Google検索やTwitterなどからのホットリンクは許可するといったことが行なえます。
ホットリンクとは何か
‘ホットリンク’（hotlink）とは、日本語ではよく‘直リンク’（direct link）と表現されます。ここでいう直リンクとはインターネット上のリソースへリンクを貼ることを意味します。
インターネット上には様々なリソースがあります。
リソースとはウェブサイト上の記事（ページ）そのものであったり、CSSやJavaScript等のファイルだったり、画像だったり音楽や動画の場合もあります。これら全ての要素をリソースと呼び、インターネット上のコンテンツを表示するためには、これらのリソースを取得して表示する必要があります。
こうしたインターネット上の様々なリソースを取得したり、それらのリソースへ誘導することを‘リンク’（link）といい、「リンクする」といった表現を行います。
特に、このリンクが「その記事の配置されているドメイン/サブドメインから取得/誘導することを内部リンク」といいます。
対して、いわゆる直リンクとは外部リンクのことであり、直リンクとは「その記事とは直接関係のないドメインへのリンク」のことです。
メモ：HTMLとハイパーリンクと、直リンク、直リンクという用語に付きまとう誤解
ウェブサイトの運営における、リンクと‘HTML’の関係は、切り離すことができません。
HTMLとはHypeText Markup Languageの略語であり、ハイパーテキスト・マークアップ・ランゲージ、通常エイチ・ティー・エム・エルと読みます。
HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）は、ハイパーテキストを記述するためのマークアップ言語の1つで、プログラミング言語ではない。主にWorld Wide Web（WWW）において、ウェブページを表現するために用いられる。略してHTML（エイチティーエムエル）と呼ばれることが多い。ハイパーリンクや画像等のマルチメディアを埋め込むハイパーテキストとしての機能、見出しや段落といったドキュメントの抽象構造、フォントや文字色の指定などの見た目の指定、などといった機能がある。
こうしたHTMLのHyperTextから、コンテンツ（Hypermedia）をつなぎ合わせる動作をするのがリンク（Hyperlink、最近では単にlinkという方が多い）です。
また、ウェブでリンクといえば‘アンカーリンク’（Anchor Link、HTMLのaタグ）を思い浮かべると思います。これはあくまでもリンクの一つであり、もともとは下線（アンカー/Anchor）付きのリンクという意味合いでした。
実際はaタグでのリンクの他にも「imgタグによる画像の設置もリンクの一種」であり、ブラウザが解釈する段階で「通常は画像を取得して表示しているだけ」なのです。
そして悲しいかな、直リンクなどの用語は存外誤った意味で理解されているフシがあります。
例えば、以下の記事では「直リンクはファイルへのリンクについて限定された用語」のように解説されていますが、これは誤りです。
同じWebサイト内のページ間を連結するハイパーリンクを「内部リンク」、外部の別のサイトへ（あるいは外部から）繋ぐリンクを「外部リンク」という。画像ファイルなどページ（HTMLファイル）以外の資源へ外部から直接繋いだリンクを「直リンク」、サイトの深い階層にある個別のページを外部から直に参照するリンクを「ディープリンク」という。
正しい意味の‘直リンク’（direct link、hotlink）とは、インターネット上のリソースへリンクを貼ることであり、主に別サイトのリソース（画像や動画等含め、ページ（HTML含む））へのリンクのことです。
念のためWikipediaの直リンクを引用しておきますが、最近ではWikipediaよりも胡散臭いエセ辞典がIT用語辞典などと名乗っているので本当に質が悪いです。
直リンク（じかリンク、ちょくリンク）とは、インターネットのWWWで公開されている画像などのメディアファイルのURLを参照し、インラインで表示する形態で別のウェブサイトにあるウェブページに貼り付けたり、リンクを貼ったりすることである。直リンとも呼ばれる。ダウンロードに一定の手順を踏む必要がある画像掲示板や、アップローダー上のファイルに対して、ダウンロード用のURLではなくファイルそのもののURLを掲示する場合も「直リン」とされることがある。ホットリンクとも言う。
サイト外部からの直接アクセスを想定していないファイルへのリンク（前述のようにリンクでない場合もあるが）を通常のリンクとは区別する意味で「直リン」と呼称している。
多くの素材提供サイトでは、直リンクを禁止している。あまりに外部サイトからの閲覧数が増えすぎると、素材提供サイトのサーバに負荷がかかりすぎることが理由の一つである（帯域幅）。しかし、禁止を呼びかけても.htaccessなどで参照できないようにしなければ、ファイルへの直リンクは可能である。一方、サイトによっては、外部サイトからの閲覧数を把握したいとして直リンクを推奨している場合もある。
ホットリンクの問題点
ホットリンクは歴史的な背景を振り返ると、インターネットが登場しHTMLが発展してきた当初から、様々な立場の方たちが意見対立を引き起こしてきました。
HTMLの「HT」が「HyperText」の略語であることは既にご存知かと思いますが、このHyperTextとは、「テキストや画像や動画、動作に必要なHyperMediaを、HyperLinkで相互に関連付けた文章ファイル」です。
ホットリンク肯定派は、こうした背景から「インターネット（要はHTML）の規定上、リンクを貼るのが同一サイトである必要があるのか、別サイトはだめなのかといったことは、仕様上定義されていない」ことを盾にして、ホットリンクは問題ないと主張してきました。
しかし、この主張は滑稽です。
そもそも技術は常に進化するものであり、インターネットが登場した当初は一部の大学教授や会社の研究者といった専門家が論文などの発表の場として発展してきたものです。これはインターネットが全世界的に、そして一般へも普及した昨今の情勢とは、完全に相反します。
では、あなた達が今使っているお金は「まだ貝殻なんですか? 巨大な石貨なんですか?」と。
そしてよく誤解されるのが‘埋込み型リンク’です。
これは上掲のimgタグやmediaタグ、scriptタグやiframeタグなどによって、「他サイト等のコンテンツ/リソース」をページ内に埋め込むものです。
これらは基本的には単なるリンクですが、実質的にはブラウザによって内部に埋め込まれたり実行されたりするため、「埋込み型リンクは、著作物の引用要件を満たす必要がある」のです。
実際、多くのフィッシングサイトやスプログ（スパムを配信するブログ）等の、悪質なサイトの多くがホットリンクを用いてサイトコンテンツを埋め込みます。
日本の #Minecraft ブロガーへ警告！ blogspot.com経由のコンテンツ不正利用が横行中！最近マインクラフトの情報を発信するブログから、海外（特に中国・東南アジア）の運営者が、画像や本文・タイトルなどを不正にコピーしスパムを配信する行為（スプログ配信）が横行している。今回はその告発と対策方法を公開する ... 続きを読む Googleはブログスポットのスパムを即刻排除すべき。またはSpammerへ改名せよBloggerは無料でありながら簡単に収益化できるため、一般利用者よりもスパマーに愛用される。BlogSpotの75%のブログはスパムであると言われるが、Googleはその現状を改善しようとしない。この記事は実際に当サイトの被害状況を告発する ... 続きを読む
ホットリンクの問題点はひとえに「正しいホットリンクと、悪質なホットリンクが見極めにくい」という点です。
以下に正しいホットリンクと、悪質なホットリンクの違いを例示しますが、これは一般的または一例であるためその点はご留意ください。
【正しいホットリンクと悪質なホットリンクの例】
- 正しいホットリンク
- コンテンツ提供者がホットリンクを想定して提供している場合
- 例えばサイトのリンク用にバナータグを提供しているような場合、バナー画像をホットリンクにて提供することで、バナー画像を後から変更しても、自動的に変更が追随されます。
- 例えばjQuery等のJavaScriptライブラリなどを、CDNなどからホットリンクを用いてブラウザに配信することが一般的に行われています。
- 例えばブログカードなどを設置し、その記事のアイキャッチ画像やファビコン画像のみを参照する場合。この場合は概ね正しいホットリンクとして認識されることが多くあります。ただし、「直リンク禁止と謳っていて、何らかの理由がある場合は拒絶反応を持たれる」可能性はあるので、臨機応変に対処する必要はあります。
- コンテンツ提供者がホットリンクを想定して提供している場合
- 悪質なホットリンク
- 外部サイトから他サイトの画像等のリソースを埋め込み、誤認や誤解等を狙っている場合
- 例えばGoogleのブログスポット（Blogger）上にある75%はスプログであると言われており、そこでは他サイトのコンテンツをホットリンクで埋め込む行為が横行しています
- 例えばフィッシングサイトによっては、
iframeなどを利用してなりすますサイトを埋め込む行為が横行しています。
- 外部サイトから他サイトの画像等のリソースを埋め込み、誤認や誤解等を狙っている場合
あまり知られていないホットリンク対策の落とし穴
一番多いのが、ホットリンク対策によって検索エンジンの検索結果にサイトの画像が表示できなくなるといった問題です。
同様にSNSへ記事をシェアしても、カードプレビューで画像が表示されないといった問題が起こりえます。
また、諸々困るのがホットリンク対策で画像を置換したり、ホットリンクされた画像に対して「404 Not Found」や「403 Forbidden」などのステータスコードを返却してしまうと、その後利用者が実際に自サイトへ訪れた際に「画像がキャッシュされていて表示されない」といった不具合が起こりうることです。
これはサイトの設定でブラウザキャッシュや画像等のキャッシュを無効化していれば顕在化しませんが、昨今の情勢を鑑みればブラウザキャッシュは有効化すべきです。
ホットリンク対策の3パターン
ホットリンク対策には以下に示す3つのパターンがありますが、当サイト管理人は3番目をお勧めしています。
- 自サイトや検索エンジン・クローラー以外の画像アクセスを404等で遮断する
- 不審なサイトからのホットリンクを別の画像へ置換する
- 予め問題ないことがわかっているサイトからのホットリンクは許可し、それ以外の場合はサイトのファビコン等へ置換し、スプログ等からのホットリンクは別画像へ置換する
また、どのパターンを実践しても「JavaScriptでホットリンク対策の問題点を回避する」が必要です。
.htaccessを用いた画像のホットリンク対策1：自サイトや検索エンジン・クローラー以外の画像アクセスを404等で遮断する
まずはオーソドックスな対策である、自サイトや検索エンジン以外からの画像アクセスを遮断する設定を公開します。
この定義は.htaccessを用いますので、テキストエディタを用いて編集し、FTP等でアップロードしてご利用ください。
.htaccessで画像へアクセスするクローラーを許可する
# CC BY-SA 4.0 ガノー（ https://twitter.com/ganohr ）https://ganohr.net/blog/supremes-for-the-image-hotlink-prevention/
#画像へのアクセスを許可するクローラー
# MSN
SetEnvIfNoCase User-Agent "msnbot" VIEW=yes
SetEnvIfNoCase User-Agent "bingbot" VIEW=yes
# Google
SetEnvIfNoCase User-Agent "Googlebot" VIEW=yes
SetEnvIfNoCase User-Agent "Googlebot-Image" VIEW=yes
SetEnvIfNoCase User-Agent "Googlebot-Mobile" VIEW=yes
SetEnvIfNoCase User-Agent "^Mediapartners-Google$" VIEW=yes
SetEnvIfNoCase User-Agent "Google-AMPHTML" VIEW=yes
# Yahoo
SetEnvIfNoCase User-Agent "Yahoo" VIEW=yes
SetEnvIfNoCase User-Agent "Slurp" VIEW=yes
SetEnvIfNoCase User-Agent "Y!J" VIEW=yes
# Twitter許可
SetEnvIfNoCase User-Agent "Twitterbot" VIEW=yes
# APPLEBOT 許可
SetEnvIfNoCase User-Agent "Applebot" VIEW=yes
# FaceBook 許可
SetEnvIfNoCase User-Agent "facebookexternalhit" VIEW=yes
SetEnvIfNoCase User-Agent "Facebot" VIEW=yes
SetEnvIfNoCase User-Agent "facebookplatform.*$" VIEW=yes
SetEnvIfNoCase User-Agent "^$" VIEW=yes
# notebot/slackbot/hatena許可
SetEnvIfNoCase User-Agent "notebot" VIEW=yes
SetEnvIfNoCase User-Agent "Slackbot-LinkExpanding" VIEW=yes
SetEnvIfNoCase User-Agent "Hatena-Favicon/2" VIEW=yes
SetEnvIfNoCase User-Agent "Hatena Star UserAgent/2" VIEW=yesこの定義を利用して実際に活用する際は
RewriteCond %{ENV:VIEW} !yesとして指定します。
実際の利用例は次の節を参考にしてください。
.htaccessで予め許可したアクセス元以外の画像へのホットリンクは404を返却して遮断する
# CC BY-SA 4.0 ガノー（ https://twitter.com/ganohr ）https://ganohr.net/blog/supremes-for-the-image-hotlink-prevention/
# 自サイト及び特定のサイトからのホットリンクは許可するが、それ以外は404で弾く
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^https?://([a-z0-9_-]+\.)*ganohr\.net [NC]
RewriteCond %{HTTP_REFERER} !^https?://ganohr-net\.translate\.goog [NC]
RewriteCond %{ENV:VIEW} !yes
RewriteCond %{REQUEST_URI} !^/android-chrome
RewriteCond %{REQUEST_URI} !^/apple-touch-icon
RewriteCond %{REQUEST_URI} !^/keikoku2\.(png|jpg)
RewriteRule \.(gif|jpe?g2?|jfif|png|webp|svg|ico)$ - [R=404,L]この定義を利用すれば、日本で一般的に利用されている検索エンジン及びGoogle翻訳やSNSにはホットリンクを許可しつつ、その他のサイトからのホットリンクは404で拒否できます。
まだ運営して間もないサイトや、月間2～3万アクセスもないのであればこの定義で十分でしょう。
画像のホットリンク対策2：不審なサイトからのホットリンクを別の画像へ置き換える
ある程度アクセス数が増えてくると、それに呼応するように一気にスプログからのホットリンクが増えてきます。
それと同時に、他の有用なサイトからの正当なホットリンクも増えてきます。
単純に404で遮断するのではなく、不審なサイトからのホットリンクは別画像へ置換することで対策を行いましょう。
この定義を利用する場合は、上述の「対策1」の定義は除去してから追加してください。
# CC BY-SA 4.0 ガノー（ https://twitter.com/ganohr ）https://ganohr.net/blog/supremes-for-the-image-hotlink-prevention/
# .jp/.coを除いた2文字ドメイン（国別ドメイン）からの画像のホットリンクを拒否する
SetEnvIf Referer "\.c[a-np-z]($|#|\?| |/)" access=no
SetEnvIf Referer "\.j[a-oq-z]($|#|\?| |/)" access=no
SetEnvIf Referer "\.[abd-ik-z][a-z]($|#|\?| |/)" access=no
#画像の不正なホットリンクが多いものを一括指定する
SetEnvIf Referer "\.cat(#|\?|$|/)" access=no
SetEnvIf Referer "\.edu(#|\?|$|/)" access=no
SetEnvIf Referer "\.top(#|\?|$|/)" access=no
SetEnvIf Referer "\.life(#|\?|$|/)" access=no
SetEnvIf Referer "\.today(#|\?|$|/)" access=no
SetEnvIf Referer "\.store(#|\?|$|/)" access=no
SetEnvIf Referer "\.agency(#|\?|$|/)" access=no
SetEnvIf Referer "\.pharmacy(#|\?|$|/)" access=no
SetEnvIf Referer "\.wew\.jp(#|\?|$|/)" access=no
SetEnvIf Referer "(^|/|\.)netlify\.com(#|\?|$|/)" access=no
SetEnvIf Referer "(^|/|\.)blogspot\.com(#|\?|$|/)" access=no
SetEnvIf Referer "(^|/|\.)web\.app(#|\?|$|/)" access=no
#個別の指定はここで行う
#SetEnvIf Referer "(^|/|\.)拒否したいドメインを書く(#|\?|$|/)" access=no
#問題の多いホットリンクを警告画像へ差し替える
RewriteEngine On
RewriteCond %{ENV:access} no
RewriteCond %{REQUEST_URI} !^/keikoku2\.png$
RewriteRule ^.*\.(gif|jpe?g2?|jfif|png|webp|svg|ico)$ /keikoku2.png [R=302,END]
このとき以下に示すようなkeikoku2.pngを用意しておく必要があります。
※ 画像は参考例です。この画像を流用しても構いませんが、ファイルはダウンロードしてお使いください。ホットリンク禁止！（笑）
画像のホットリンク対策3：予め問題ないことがわかっているサイトからのホットリンクは許可し、それ以外の場合はサイトのファビコン等へ置換し、スプログからのホットリンクには画像の置換を行う
サイトの規模が大きくなってくれば、色々なサイトからリンクを貼られるようになります。
また、最近ではブログカードとしてリンクを貼ることが増えているため、単純に404などで遮断してしまうと「リンクを張ってくれたサイトで、画像のリンク切れが起こってしまう」ことになります。
そこで、上掲の対策1の「.htaccessで画像へアクセスするクローラーを許可する」を利用し、上掲の対策2を追加して、不審なサイトからの画像のホットリンクには警告画像を返却し、それ以外のホットリンクにはファビコン画像を返却するように設定しましょう。
もちろん、上掲2の対策が有効のため、自サイトや検索エンジンにクローラー等へは画像をそのまま返却できます。
# CC BY-SA 4.0 ガノー（ https://twitter.com/ganohr ）https://ganohr.net/blog/supremes-for-the-image-hotlink-prevention/
# 自サイト及び特定のサイトからのホットリンクは許可する/それ以外はアイコン画像に差し替える
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^https?://([a-z0-9_-]+\.)*ganohr\.net [NC]
RewriteCond %{HTTP_REFERER} !^https?://([a-z0-9_-]+\.)*許可したいドメイン [NC]
RewriteCond %{HTTP_REFERER} !^https?://ganohr-net\.translate\.goog [NC]
RewriteCond %{ENV:VIEW} !yes
RewriteCond %{REQUEST_URI} !^/android-chrome
RewriteCond %{REQUEST_URI} !^/apple-touch-icon
RewriteCond %{REQUEST_URI} !^/keikoku2\.(png|jpg)
#ここでファビコン画像を指定する
RewriteRule ^.*\.(gif|jpe?g2?|jfif|png|webp|svg|ico)$ /icon-512x512.png [R=302,END]※ 以下に完全版を折りたたんでおくので、いまいち分からないという方は参考にしてください。
予め問題ないことがわかっているサイトやクローラーからのホットリンクは直接返す、それ以外の場合はサイトのファビコン等へ置換する
# CC BY-SA 4.0 ガノー（ https://twitter.com/ganohr ）https://ganohr.net/blog/supremes-for-the-image-hotlink-prevention/
# .jp/.coを除いた2文字ドメイン（国別ドメイン）からの画像のホットリンクを拒否する
SetEnvIf Referer "\.c[a-np-z]($|#|\?| |/)" access=no
SetEnvIf Referer "\.j[a-oq-z]($|#|\?| |/)" access=no
SetEnvIf Referer "\.[abd-ik-z][a-z]($|#|\?| |/)" access=no
#画像の不正なホットリンクが多いものを一括指定する
SetEnvIf Referer "\.cat(#|\?|$|/)" access=no
SetEnvIf Referer "\.edu(#|\?|$|/)" access=no
SetEnvIf Referer "\.top(#|\?|$|/)" access=no
SetEnvIf Referer "\.life(#|\?|$|/)" access=no
SetEnvIf Referer "\.today(#|\?|$|/)" access=no
SetEnvIf Referer "\.store(#|\?|$|/)" access=no
SetEnvIf Referer "\.agency(#|\?|$|/)" access=no
SetEnvIf Referer "\.pharmacy(#|\?|$|/)" access=no
SetEnvIf Referer "\.wew\.jp(#|\?|$|/)" access=no
SetEnvIf Referer "(^|/|\.)netlify\.com(#|\?|$|/)" access=no
SetEnvIf Referer "(^|/|\.)blogspot\.com(#|\?|$|/)" access=no
SetEnvIf Referer "(^|/|\.)web\.app(#|\?|$|/)" access=no
#個別の指定はここで行う
#SetEnvIf Referer "(^|/|\.)拒否したいドメインを書く(#|\?|$|/)" access=no
#問題の多いホットリンクを警告画像へ差し替える
RewriteEngine On
RewriteCond %{ENV:access} no
RewriteCond %{REQUEST_URI} !^/keikoku2\.png$
RewriteRule ^.*\.(gif|jpe?g2?|jfif|png|webp|svg|ico)$ /keikoku2.png [R=302,END]
#画像へのアクセスを許可するクローラー
# MSN
SetEnvIfNoCase User-Agent "msnbot" VIEW=yes
SetEnvIfNoCase User-Agent "bingbot" VIEW=yes
# Google
SetEnvIfNoCase User-Agent "Googlebot" VIEW=yes
SetEnvIfNoCase User-Agent "Googlebot-Image" VIEW=yes
SetEnvIfNoCase User-Agent "Googlebot-Mobile" VIEW=yes
SetEnvIfNoCase User-Agent "^Mediapartners-Google$" VIEW=yes
SetEnvIfNoCase User-Agent "Google-AMPHTML" VIEW=yes
# Yahoo
SetEnvIfNoCase User-Agent "Yahoo" VIEW=yes
SetEnvIfNoCase User-Agent "Slurp" VIEW=yes
SetEnvIfNoCase User-Agent "Y!J" VIEW=yes
# Twitter許可
SetEnvIfNoCase User-Agent "Twitterbot" VIEW=yes
# APPLEBOT 許可
SetEnvIfNoCase User-Agent "Applebot" VIEW=yes
# FaceBook 許可
SetEnvIfNoCase User-Agent "facebookexternalhit" VIEW=yes
SetEnvIfNoCase User-Agent "Facebot" VIEW=yes
SetEnvIfNoCase User-Agent "facebookplatform.*$" VIEW=yes
SetEnvIfNoCase User-Agent "^$" VIEW=yes
# notebot/slackbot/hatena許可
SetEnvIfNoCase User-Agent "notebot" VIEW=yes
SetEnvIfNoCase User-Agent "Slackbot-LinkExpanding" VIEW=yes
SetEnvIfNoCase User-Agent "Hatena-Favicon/2" VIEW=yes
SetEnvIfNoCase User-Agent "Hatena Star UserAgent/2" VIEW=yes
# 自サイト及び特定のサイトからのホットリンクは許可する/それ以外はアイコン画像に差し替える
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^https?://([a-z0-9_-]+\.)*ganohr\.net [NC]
RewriteCond %{HTTP_REFERER} !^https?://([a-z0-9_-]+\.)*許可したいドメイン [NC]
RewriteCond %{HTTP_REFERER} !^https?://ganohr-net\.translate\.goog [NC]
RewriteCond %{ENV:VIEW} !yes
RewriteCond %{REQUEST_URI} !^/android-chrome
RewriteCond %{REQUEST_URI} !^/apple-touch-icon
RewriteCond %{REQUEST_URI} !^/keikoku2\.(png|jpg)
#ここでファビコン画像を指定する
RewriteRule ^.*\.(gif|jpe?g2?|jfif|png|webp|svg|ico)$ /icon-512x512.png [R=302,END]ホットリンク対策の問題点をJavaScriptで対処する
<script>
/*!
*! CC BY-SA 4.0 ガノー（ https://twitter.com/ganohr ）https://ganohr.net/blog/supremes-for-the-image-hotlink-prevention/
*/
document.querySelectorAll(
`img[src^="https://***.***/"`
).forEach(
e => e.src = e.src + "?cachecontroll=1"
);
</script>このコードはbodyタグの最後へ追加してください。
また、他サイトの画像をホットリンクしている際に相手に迷惑をかけないよう、リロードする対象を自サイト（自ドメイン）上にある画像だけに限定する必要があります。必ず6行目にご自身のドメイン名に書き換えてご利用ください。
このコードの効果により、サイトへアクセスされた後、自動的に画像をリロードします。
また、
このコードは必要以上に画像のリロードが起こらないよう、?cachecontroll=1という固定のクエリパラメータを追加するだけにとどめています。
もしもこれをランダムな値やアクセス日時にしてしまうと、サイトへアクセスするたびに2倍の画像リロードが起こるためよろしくありません。
あくまでもホットリンクで404や別画像として読み込まれてしまっているリソースを対策するだけですので、この定義で十分です。
悪質なホットリンクを行っているサイトは野放しにせず、OCSRI（One Click Spam Reporting Interface）でお薬（スパムレポート）を処方しよう
↓ ブックマークレットの入手や使い方はこちらから
OCSRI―One Click Spam Reporting Interface―表示しているサイトを一発でスパムレポートするブックマークレットを開発しました最近ブラックハットSEOというかネガティブSEOの被害が著しいです.そうした糞サイトにはスパムレポートを送信するくらいしか手がないので私はGoogleが公開していたChrome拡張を使ってちまちま報告してました.なんでだGoogle!やっぱり貴様はスパム大好きかよ!なんでスパムレポートを簡単に提出できる機能をなくすんだよ!なんとその拡張機能が公開停止になってました.あほじゃね?てことで同じ機能を持ったブックマークレットを開発しました.その名も『OCSRI』（おくすり）.スプロ ... 続きを読む
悪質なホットリンクは基本的にスプログ・フィッシングサイト・偽ショッピングサイトなどに利用されています。
こうしたサイトはGoogle検索結果から排除することを目的に「スパムレポート」を送信し、Google八分を行わさせる手助けができます。
当サイトのコンテンツをホットリンク等で悪用しているサイトは、発見次第スパムレポートを提出しています。
もはや
ホットリンクはリスクしか無い危険行為ですので、みなさんは絶対にやらないようにしましょう。
最後に
ホットリンク対策は昨今の情勢を鑑みれば必須と言えます。
だれでも
他人の褌で相撲を取っている奴らが配信するコンテンツが、ゴミだろうと予測することは簡単でしょう。
そして何より、ホットリンクについて解説しているサイトの多くが、ホットリンクを対策するとどのような不具合が起こりうるのかや、はたまたその対処方法を公開していません。
ウェブサイトを守るためにも、そして何より閲覧者を守るためにも、この記事が役に立てば幸いです。
また、この記事が参考になったという方は、ぜひともSNSで共有したり、ブログで共有していただければ感無量です。
参考になったら、SNSへシェアしたり、ブックマークしてくだされば励みになります。
以上、ガノー（Twitter:Ganohr）でした！
関連記事
W3 Total CacheのLazy Loadingでエラーが起きる場合の対処方法WordPressプラグインW3 Total CacheのLazy Loading（遅延読み込み）は誤ったステータスコードをブラウザがキャッシュしていると読み込みに失敗する。今回はこの問題の対処コードを共有する ... 続きを読む 
