baseタグを使って、画像やJSファイル・CSSファイルのパスを分かりにくくする方法



右クリックを禁止しても、基本的には、HTMLソースを見られてしまえば「終わり」という事態が発生しえます。しかしながら、HTMLソース全体を暗号化すると、SEOへの影響が心配だったり、「ちょこっと文字を修正したい場合などに大変」とか問題もあります。ただ、プロテクトしたいコンテンツがHTMLソースそのものであったり、テキスト本文ではなくて、画像ファイルやJSファイル（JavaScript）、CSSファイル（スタイルシート）である場合、baseタグを使って、これららをプロテクトする方法があります。


１．そもそもbaseタグとは？

baseタグによって、リンク先や画像などのパスの基準となるURLを指定できます。例えば、このページでは、

<base href="http://www.broadband-xp.com/hidesource/base123/">
としています。

そして、下記の画像：

を表示するためのソースは、
<img src="t_flower.jpg">
となっています。ここで、baseタグの仕組みを理解できない人は、このページのURLが「 http://www.broadband-xp.com/hidesource/base.html 」であるので、画像の本体のパスは
「 http://www.broadband-xp.com/hidesource/t_flower.jpg 」であるかのように誤認します。

しかし、実際にこのURLにアクセスしてみると、ファイルが存在しないために、「404エラー　ファイルが見つかりません。」になります。この画像の本当のパスは、baseタグとの組み合わせにより、「 http://www.broadband-xp.com/hidesource/base123/t_flower.jpg 」になります。

※ なお、本体策の大前提として、右クリック禁止の対策は既に行っていて、右クリックで画像のパスを確認することが不可能なようにしておく必要があります。

２．baseタグが丸見えでは、結局意味がないのでは？

はい、執拗なユーザーから画像などをプロテクトするためには、もう少し対策を強化する必要があります。

a. baseタグをJavaScript化し、外部ファイル化します。
baseタグをdocument.writeで書き出すようにして、それをJSファイル化します。即ち、base.js（ファイル名は任意ですが、拡張子はjs）の中で、

document.write('<base href="http://www.broadband-xp.com/hidesource/base123/">');

としておいて、

ヘッダ部（<head>〜</head>）内で「 <script type="text/javascript" src="base.js"></script> 」と書いて読み込むようにします。

この対策により、画像を保存したいと考えたサイト訪問者は、まず、base.jsをダウンロードして、その中で指定されている基準となるURLを解明し、その次に、HTML本体のソース内に記された画像のパスと組み合わせて、画像のURLを解読するという二段階を踏まなければならなくなります。かなり、面倒な作業ですので、諦めてくれる可能性がそれだけ高くなります。

また、JavaScriptを解析できない多くの一括ダウンロードソフトに対しては、本体策で十分になります。
サンプル１


b. baseタグをJavaScript化し、外部ファイル化した後、そのJSファイルを暗号化します。
いくら、上記「a.」のやり方で外部ファイル化しても、その外部ファイルを再ダウンロードしたり、キャッシュファイルから探し出された場合、基準となるURLが分かりますので、本当の画像ファイルのパスが分かってしまいます。そこで、当サイトのウェブマスターが開発したHTML暗号化ソフト「SHTML」を使って、この外部ファイルを暗号化してみます。

「SHTML」では、JavaScriptの暗号化に特化した「JS Encoder」というメニューがありますので、このメニューで難読化・暗号化が可能です。「 document.write('<base href="http://www.broadband-xp.com/hidesource/base123/">'); 」を難読化・暗号化することを考えます。

サンプル２（JSファイルを難読化させた例）
※ SHTMLの体験版は、「難読化」の範囲なら制限事項なく30日間、難読化できます。SHTML体験版のダウンロードはこちら

サンプル３（JSファイルを難読化+暗号化させた例）


３．考慮すべき問題など

baseタグを活用することで、あらかじめ、このbaseタグの特性を知り、余計な問題が生じないようにしなければなりません。

  • 画像だけでなく、<a href="">タグなど全てに影響します。
    相対パスを使っている場合には、ハイパーリンクを張るときにも注意が必要です。心配な場合には、絶対パス（http://〜のURL形式もしくは、ドキュメントルートからのパスをスラッシュ「/」で始める形式）を用いてください。

    ※ ペー内リンク（「#hogehoge」）でも同様です。「<a href="#hogehoge">hogehoge</a>」の指定方法では、別のページにジャンプする結果になりますので、注意が必要です。

  • baseタグはヘッダ部分に入れてください。
    IE6では、ボディ部（<body>〜</body>）で設定されている場合でも動作していましたが、IE7では、動作しません。必ずヘッダ部（<head>〜</head>）に囲まれた部分に入れるようにしてください。

  • JSファイルやCSSファイルを保護したい場合、ヘッダ部の中でも、それらのタグよりも上に配置させえてください。
    例えば、このページのように、
    <base href="http://www.broadband-xp.com/hidesource/base123/">
    <link rel="stylesheet" type="text/css" href="css.css">
    のようになっている場合、CSSファイルのパスは、http://www.broadband-xp.com/hidesource/base123/css.cssになりますが、順番が逆で、
    <link rel="stylesheet" type="text/css" href="css.css">
    <base href="http://www.broadband-xp.com/hidesource/base123/">
    の場合は、CSSファイルのパスはこのページのURLから見た普通のパスであり、http://www.broadband-xp.com/hidesource/css.css を読み込むことになります。

  • 右クリックを禁止してください。
    いくらbaseタグを活用して画像のパスを隠そうとしても、右クリックされてしまえば終わりです。ですから、右クリック禁止は最低限行っていることが大前提の対策になります。bodyタグの中で、

    <body oncontextmenu="return false;">
    もしくは、
    <body oncontextmenu="alert('右クリック禁止');return false;">

    とすれば、たいていのブラウザで右クリック禁止が可能になります。ただし、右クリックを禁止できない一部のブラウザ（Opera）などのことを考慮するのであれば、SHTMLのご利用をお奨めいたします。

    SHTMLには、右クリック禁止を回避されたとしても、画像の本当のパスを右クリックでは分からなくする「画像保護機能」というものがあります。右クリックを行い、画像のプロパティを見てもダミー画像が表示されるようにできます。

    画像保護機能は、JavaScriptの暗号化を専門に行う「JS Encoder」には残念ながら存在しないので、「どこでもSHTML」というメニューを使います。「どこでもSHTML」は、任意の一部分のHTMLソースだけを暗号化できます。「どこでもSHTML」で「<base href="http://www.broadband-xp.com/hidesource/base123/">」だけを暗号化し、さらに画像保護機能や、ウインドウ名をチェックする機能を使ってみたのが、下記のサンプル4です。

    サンプル４（「どこでもSHTML」でbaseタグだけを暗号化＋ダミー画像による画像保護機能）

  • JavaScriptをoffにしている人のことを考慮してください。
    baseタグをJavaScriptによって外部ファイル化した場合、JavaScriptをoffにしている人は画像が表示されないことを意味します。また、CSSファイルを相対パスで指定しているのであれば、CSSファイルが読み込まれないため、レイアウトが崩れる可能性があります。また、JSファイルを相対パスで指定しているのであれば、JavaScriptが読み込まれないため、期待通りには動作しません。

    また、相対パスで他のページにリンクしているのであれば、そのリンクをたどることができません。特に問題なのがサーチエンジン・ロボットがそのリンクをたどることができないため、SEO上、問題が発生する場合があります。ですから、少なくとも、他のページへのリンク（<a href="">）は絶対パス形式で指定する必要があろうかと思われます。

    その上で、「JavaScriptをoffにしているが故に画像が表示されていない」ことを理解してもらえるように、

    --------------------------------------------------------------------------------
    <noscript><b>このサイトは、JavaScriptが有効になっていることを前提に設計されています。JavaScriptを無効にされている場合には、画像は表示されません。JavaScriptを有効に設定してください。設定方法は、こちらをご参照ください。</b></noscript>
    --------------------------------------------------------------------------------

    のようなHTMLタグをHTMLソース内のbody部のできるだけ上の方に入れるようにされることをお勧めいたします。（もしくは、次項で説明するように、代替画像そのものの中で、JavaScriptの設定を有効にするように促しても良いでしょう。）

    JavaScriptをoffにしているユーザーからのアクセスに対しては、別のページにリダイレクト（転送）するように設定することもＲＳプロテクトでは可能ですが、この場合、サーチエンジン・ロボットも、その本来のページではなく、別のページをインデックスすることになりますので注意が必要です。サーチエンジン・ロボットと人間のアクセスを区別する方法がないわけではありませんが、サーチエンジン・スパム（クローキング/ドアウェイページ）と判定されてしまう可能性がありますのでお勧めできません。

    結論として、JavaScriptをoffにしているユーザーからのアクセスに対しては、最初は（=JavaScriptの設定を変更してもらうまでの間は）画像が表示されていなかったりレイアウトが崩れることがありうることを覚悟しなければならないことになります。

  • 404エラー（「ファイルが見つかりません。」）に対応する
    JavaScriptをoffにしているユーザーは、画像が表示されないということは、違うパスをサーバが探しに行っているからに他なりません。その結果、404エラーが発生します。あらかじめ、JavaScriptをoffにしている場合にサーバが探しに行くであろうパスは想像できるのですから、最初から代替画像（「画像を表示させるためには、JavaScriptの設定を有効にしてください」というメッセージの書いた画像でもいい訳です。）を表示させるようにしても良いでしょう。サンプル３（JSファイルを難読化+暗号化させた例）で、JavaScriptの設定を有効にした場合とそうでない場合とでどのように表示結果が変わるかを試してみてください。

４．結論

このbaseタグを活用した画像のパス隠蔽工作は、ページ全体を暗号化しないで済むため、SEOにやさしいというメリットを享受することができます。それでいてソースを見られても画像の本当のパスが分からないため、単純な方法でありながら、非常にすぐれた手法であると言えます。

しかも、JavaScriptをoffにしているユーザーにはそもそも画像が見えないので、右クリックしても画像は保存できません。「JavaScriptをoffにしたら右クリックでいくらでも画像を保存できるではないか？」という批判には応えることができるはずです。画像保護が主な目的の方には、最高の手法であると言えるかと思います。

ただし、テキスト保護（テキスト本文/HTMLコーディングそのもの/外部ファイル化せずにHTML本体内に埋め込んだスタイルシート・JavaScript）などを主体に考えている場合には、「ソースを見られれば終わり」という問題をクリアすることはできません。

また、仮にbaseタグの部分を暗号化しても、それでも絶対に漏れないかというと、そういうことはありません。ですから、余裕のある方は、下記の方法のいずれか（もしくは、その全て）を併用してみることを検討してみてください。

a.ツールバー・メニューバーのないサブウインドウ内にコンテンツを表示させる
右クリックを禁止しても、メニューからソースなどは表示できます。ソース自体を表示させられないように、ツールバー・メニューバーを消したウインドウ内にコンテンツを表示させると、プロテクトの強度がそれだけ上がります。サブウインドウ表示用のJavaScriptは、HTML暗号化ソフト「SHTML」の付属ツール「Sub Window Maker 2007」（30日間利用可能な体験版でも、制限事項なく利用可能です。）

b. Referer（参照元）をチェックする
画像を表示させる場合、ブラウザが画像をサーバーにダウンロード要求をします。その際、Referer（参照元）を通常、サーバに送信します。Refererには、画像を読み込んでいるページ（HTMLファイル）が残ります。もし、画像に直接アクセスしているならば、Refererが空になります。

即ち、Refererが空であれば、HTMLファイルを介さずに直接アクセスしている（かもしれない）ことを意味し、画像をコピーしようと考えているアクセスである可能性が高いです。ですから、Refererをチェックすることで、一定の防御策になりえます。

Refererをチェックするには、<img src="hogehoge.jpg">のようにするのではなく、<img src="getimg.php?filename=hogehoge">などのように、PHP・CGI（Perl）などのサーバサイド・プログラムを介して画像を表示させる仕組みを取るのが普通です。

もしくは、.htaccessを用いて、ディレクトリー単位で、Refererの妥当性をチェックする方法を取ります。いずれにしましても、多少のプログラム経験が必要なことは、どちらの方法でも一緒です。

さらに、Refererは偽装しようと思えば偽装できなくもないことはあらかじめ知っておく必要があるでしょう。また、もっと問題なのは、セキュリティ製品やその設定、またブラウザの設定・Proxyサーバの設定によっては、ユーザーに悪意がなくてもRefererが遮断されている可能性があります。ですから、無実の人を犯人扱いしてしまう可能性がありますので、注意してください。

c. 画像のパスを定期的に変更する
baseタグで画像のパスを指定している場合に、もし高度な知識を持つ人間少数が先駆けて解読し、それのパスを不特定多数の人間に公開された場合、対策が無意味になります。画像のパスは定期的に変えておけば、このような情報も常に、古い間違った情報となります。

もちろん、画像置き場だからといって、「image」のような分かりやすいフォルダー名は避けるべきです。

d. キャッシュ対策をする
いくら、画像の本当のパスが分からないようにしても、キャッシュ対策をしていなければ無意味です。弊社でもそのようなプログラムのお手伝いをさせていただくことは可能です。サポート（件名は変えないでください。）まで、ご相談ください。

また、baseタグが書かれたJSファイルを難読化・暗号化しない場合で、より強固なプロテクトを目指される場合は、JSファイルのキャッシュ対策も必須になってくるでしょう。


HTMLソースを隠す方法」トップに戻る