【Pick Up!!】『ブログ用語集』始めました!100以上の用語をサクッと解説!

直リンク(ホットリンク)禁止とは|.htaccessで簡単制御!大事なファイルを守る方法

ホットリンクとは?画像を守れ!不正な直リンクを禁止しよう。

皆さんはご自分のサイト上で、多くの画像を使用されていることと思います。
中には、オリジナルのイラストや写真を、サイトの中で発表されている方もいらっしゃるでしょう。

ブログを含めたWEBサイトは、多くの方に見て頂くことを前提に公開されています。

ですがそんな、オリジナルのイラストや写真を勝手に不正使用される可能性があることをご存じですか?

今回はご自分のサイトやオリジナル作品を守る、一つの方法についてご案内致します。

特にオリジナルのイラストや写真を発表している、サイト内画像の無断利用を不可と考えている場合は、サイトへ文言の記載や、直リンク(ホットリンク)対策をしておくことをお勧めします。

この記事を読むと分かること
・直リンク(ホットリンク)とは何?
・直リンク(ホットリンク)の設定方法

ホットリンクと、画像のドラッグや右クリック操作を禁止すれば、より画像保護対策を強化できます。
良かったら、下記の記事も参考にしてみてください。

目次

直リンク(ホットリンク)とはどういう状態?

ホットリンク(直リンク)の画像使用イメージ
くま太君

外部から自分の画像等にリンクを直接張られて、利用される事だよ。

Hotlink(ホットリンク)とは、直リンクと言われます。

主に画像に対して使われる事が多い用語です(画像以外には、リンクしたPDFなど)。

自分のサイト以外から、許可無く画像にリンクを貼られ、他サイトで使用される事です。

例えば、WEBサイトの画像上で右クリックしてみてください。

当ページは「画像ドラッグ&右クリック禁止」にしているので、このアクションは無効になっています。
なぜこのような処理をしているのか、そしてこれら禁止の方法は、 こちらをご覧ください。

項目がいくつか出てきますよね。

その中の「画像のリンクをコピー」をクリックし、ペーストすると、

https://www.zero-blo.com/wp-content/uploads/2022/02/220207-hotlink.png

ちなみに、これが当ページのタイトルバナー(黄色い大きい画像)のURLです。

通常画像などは、自分のサイト上にアップロードしたものをリンクさせて使用しますよね。

ホットリンク(直リンク)は、上の黒ボックス内の画像URLを、他人が直接リンクを張って使用することを言います。

では、それの何が問題なのでしょうか?

なぜ直リンク(ホットリンク)が問題になるの?

・著作権侵害
・サイトへの負荷

著作権侵害になる

特にオリジナルのイラストや写真に対して無断利用されると、これに当たります。

最初にお話したように、WEBサイトは多くの方に見て頂くことを前提に公開されています。

そのため、この辺りはグレーゾーンとして捉えられる可能性があります。

但し、サイトに「無断利用不可」などの文言があれば、著作権侵害にあたります。

特にオリジナルのイラストや写真を発表していて、無断利用を不可と考えている場合は、サイトへ文言の記載や、ホットリンク対策をしておくことをお勧めします。

サーバーやサイトへの負荷になる

無断で自分のサイト画像にリンクを張られ、画像を利用されている状態がホットリンクです。

画像使用されている、ある外部のサイトが読み込まれます。

すると当然リンクされた自分の画像を表示するために、自分のサイト側画像にも、読み込み処理が発生します。

知らない所で通信が発生している現象が起こるのですね。

正直な所、相手側が個人の小規模サイトですと、そんなにサーバーやサイトへの負荷は大きくはないでしょう。

ですが、気持ちの良いものではありませんよね

細かい部分ではありますが、気になる方はホットリンク対策をしておくと良いでしょう。

直リンク(ホットリンク)の簡単設定方法

簡単にできる、おすすめのホットリンクの設定方法をご案内します。

その前に一つ。

直リンク(ホットリンク)対策として、コピー不可、右クリック不可ではどうなのか?

くま太君

盗用対策としてはマル!
でも、利用者側からしたら、チョット不便かもしれないよ。

まれにWEBサイトを閲覧していると、ページ全体をコピー不可、右クリック不可にしているサイトに出会います。

盗用対策として考えられる対策の一つですね。

これだと、右クリック不可なので、画像のURLやHTMLソースを見る事が出来ません。

対策として良いと思います。

ですが、ブラウザの拡張機能など用いれば意味をなしません。

また、サイトのテキストがコピー出来ないのも、実は良し悪しと言えます。

ページ内で出てきた単語等を新たに調べようとしたり、またHTMLやCSSのコード付きのページであれば、折角調べても見るだけです。

コピーができないので、そこから先の閲覧者側のアクションが止まり、そのサイトから離脱してしまう可能性が高いのです。

私自身もWEB関係の仕事をしているので、利用したいコードを探しにネット検索を利用します。

仕事上色々調べてたどり着いた先のページがコピー不可であれば、コードを参照・使用することができません。

コードを全て手入力は時間がかかり面倒ですし、間違えの元です。

そうなると当然そのページを離脱し、他のサイトを探します

自分にとって有用な記事があっても、コピーできないからな、と私はそのサイトを利用しなくなるでしょう。

この方法は一長一短ですので、ご自身のサイトの内容に応じて使い分けるのが良いと思います。

.htaccessを用いた直リンク(ホットリンク)禁止の方法

では、実際に直リンク(ホットリンク)の禁止方法を見てみましょう。

ここでは、.htaccessファイルを使用します。

ファイルを書き換える時は、必ずバックアップをした上で、自己責任の下行ってください。

STEP
FTPで対象の.htaccessファイルをダウンロードする

ファイルの置き場所は、

/wp-content/uploads/.htaccess

「uploads」フォルダは、Wordpressでデフォルトで画像が収納されるフォルダです。

この中の.htaccessファイルをダウンロードします。

STEP
ダウンロードした.htaccessファイルを書き換える

.htaccessファイルは不可視ファイルなので、ファイル名を「htaccess.txt」に変更します。

“.txt”を追加してもいいか聞かれるので、OKで拡張子を付けましょう。

STEP
ファイル名変更後のhtaccess.txtをエディタで開く

ファイルを開くと、画像関連に対する記述が既にあるかもしれません。

それは消さずに、1番上に追加すればOKです。

追加のコードはこれです。

6・7行目のURLの部分のみ、ご自身のサイト名に変更し、あとは丸々コピペでOKです。

記述した後は保存してファイルを閉じます。

※この下のコードの解説をご確認ください。

<IfModule mod_rewrite.c>
<Files *.php>
deny from all
</Files>
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^http(s)?://www.aaaaa.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://aaaaa.com [NC]
RewriteCond %{HTTP_REFERER} !google\. [NC]
RewriteCond %{HTTP_REFERER} !yahoo\. [NC]
RewriteCond %{HTTP_REFERER} !bing\. [NC]
RewriteCond %{HTTP_REFERER} !msn\. [NC]
RewriteCond %{HTTP_REFERER} !search\?q=cache [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_USER_AGENT} !(twitter|Twitterbot|facebookexternalhit|fbcdn|google|hatena|freedly) [NC]
RewriteCond %{HTTP_USER_AGENT} !(googlebot|yahoo|bingbot|msnbot) [NC]
RewriteRule \.(jpg|jpeg|png|gif|webp|js|css|svg)$ - [F]
</IfModule>

ここからは、上のコードに何が書かれているかを簡単に解説します。

読み飛ばして頂いてもOKです。

<IfModule mod_rewrite.c>
この記述をすることで、
設定ファイルを書き換えるよ〜と宣言しています。
</IfModule>

次に、下記はおまけで付けたコードなので、削除してOKです。

この意味は、バックドア禁止、いわゆる不正PHPの書き換えなど、悪さをさせないための記述です。

<Files *.php>
deny from all
</Files>

次のコードはmod_rewriteの書き換えを有効にするね!という意味です。

RewriteEngine on

6・7行目のURLの部分は、ご自身のサイト名に変更してください。

http(s)でS付き・無しの両方に対応し、www.がある・無いで分けて記述しています。

その下の記述はGoogleなどの検索に対しては画像利用をOKにしています。

9〜12行目は削除してOKですが、画像表示を正確に行うなら、合った方が確実です。

# 画像へのリンクを許可するサイトを記載
# 複数ある場合は行を分けて書く
RewriteCond %{HTTP_REFERER} !^http(s)?://www.zero-blo.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://zero-blo.com [NC]
RewriteCond %{HTTP_REFERER} !google\. [NC]
RewriteCond %{HTTP_REFERER} !yahoo\. [NC]
RewriteCond %{HTTP_REFERER} !bing\. [NC]
RewriteCond %{HTTP_REFERER} !msn\. [NC]
RewriteCond %{HTTP_REFERER} !search\?q=cache [NC]

13〜15行目はSNSへの画像表示の許可や、検索用クローラーへのアクセスをOKとしています。

# アドレスバー直打ち(リファラーなし)を許容
RewriteCond %{HTTP_REFERER} !^$
# SNS などからの画像参照を許可
RewriteCond %{HTTP_USER_AGENT} !(twitter|Twitterbot|facebookexternalhit|fbcdn|google|hatena|freedly) [NC]
# bot のアクセスを許可
RewriteCond %{HTTP_USER_AGENT} !(googlebot|yahoo|bingbot|msnbot) [NC]

次のコードは直リンクされた時に403Forbiddenエラー画面を出します。

# 直リンク禁止ファイルアクセス時にエラーを返す
RewriteRule \.(jpg|jpeg|png|gif|webp|js|css|svg)$ - [F]
403forbiddenエラーの表示画面
403Forbiddenページ
STEP
htaccess.txtを元の.htaccessにファイル名を戻す

拡張子.txtを削除しますよ、不可視ファイルになりますよ、とアラートが出ますがOKで進めてください。

STEP
.htaccessファイルをFTPの元の場所にアップロードする

FTPのアップ場所を確認してください。

/wp-content/uploads/.htaccess

アップロードする前に、バックアップはきちんとされていますか?

元(変更前)の.htaccessファイルをバックアップしているだけでもOKなので、確認してください。

問題無ければ、変更後の.htaccessファイルをアップロードして終了です。

お疲れ様でした。

私は当サイトの他に、テスト用サイトを持っていますので、上記の課程後、テストサイトで当ブログの画像を直リンクで張ってみました。

結果は無事、上記の403Forbiddenエラー画面が表示されました。

今回のまとめ。直リンク(ホットリンク)対策は余裕があったら、やってみよう。

ホットリンクはいわゆる、直リンクの意味になります。

知らない外部サイトから、自分のサイトの画像にリンクを張られ使用されるということですね。

相手側が小規模サイトであれば、自分のサーバーやサイトへの負荷は大きいものではありません。
目くじらを立てて対策をする程の事でもないかもしれません。

ですが、通信も発生しますし、何だか気持ち悪い感じがします。

オリジナルのイラストや写真を無断利用される事を考えると、そのような場合はホットリンク対策は有用になります。

また、無闇に画像をダウンロードさせないための対策も合わせると、より有用です。

画像ドラッグ&右クリック禁止も、宜しければ合わせて設定してみてください。

グレーゾーン扱いの内容ではありますが、ご自身のサイトを守る為の一方法として、ご参考にしていただければ幸いと思います。

ここまでお読みいただき、ありがとうございました。

☆読んでくれてありがとう!よかったらシェアしてね!☆
目次