JavaScriptやCSS内に記述するファイルへの絶対パス（フルパス）について教えてください。


CentOS（Linux）のお話になりますが、異なるディレクトリにあるHTMLファイルや  
PHPファイルから参照できるように、JavaScriptやCSS内に記述されている  
`相対パス`を`絶対パス`に変更したいです。

つまり、例えばJavaScriptだと、

[code]

    $("#size_s img").attr("src","common/img/XXXXXXX.gif");
    
[/code]

と記述されているのを、

[code]

    $("#size_s img").attr("src","/virtual/service/example.com/http/test/common/img/XXXXXXX.gif");
    
[/code]

というようにサーバーの絶対パスに変更したいのですが、これでは認識しないので、

[code]

    $("#size_s img").attr("src","http://www.example.com/test/common/img/XXXXXXX.gif");
    
[/code]

としたら認識してくれました。

でも、個人的には前者のサーバーの絶対パスで記述したいのです。

なぜなら、

[code]

    http://www.example.com/test/common/img/XXXXXXX.gif
    
[/code]

を、そのままブラウザで貼り付けるとXXXXXXX.gifだけが表示できてしまうからです。

XXXXXXX.gifだけがブラウザで表示されると問題あるかというと、そうではないのですが、  
気持ちが悪いのです。

やはりサーバー内で隠せるものは隠して、表示させるべきHTMLとCSSのデザインだけが  
ブラウザに表示されるようにしたいです。

JavaScriptやCSS内の相対パスを`サーバーの絶対パス`にする良い方法は  
ないものでしょうか？  
もしご存知の方がいらっしゃいましたら、方法をご教授ください。

【開発環境】

  * HTML
  * CSS
  * JavaScript
  * レンタルサーバー（CentOS 5）
  * WordPress（4.1.1）
  * PHP（5.2.16）
  * 作業環境（Windows7pro） 
  * コード編集用（NoEditor）




質問内容から推測すると

[code]

    /virtual/service/example.com/http/test/common/img/XXXXXXX.gif
    
[/code]

これはサーバー上で直接ファイルをブラウザに読み込ませた時に有効になる書き方です。  
Apatch等のサーバーソフトを介在してないローカルのファイルシステム上でしか通用しません。  
つまりローカルのファイルシステム上の絶対パスです。

[code]

    http://www.example.com/test/common/img/XXXXXXX.gif
    
[/code]

これはサーバーソフトを介在して初めて有効となる記述です。  
こちらがネットワーク経由のブラウザで表示するときの絶対パスとなります。  
質問に記述されている例で言うと`www.example.com`のルートディレクトリをサーバーソフトで  
ローカルの`/virtual/service/example.com/http/`に設定しています。

サーバーソフトを介在してブラウザに表示する場合は  
http / https で始まる形式に変換できる必要が有ります。  
つまりimgファイルのURL表記を  
/virtual/service/example.com/http/test/common/img/XXXXXXX.gif  
と記述した場合、正式なURLに展開すると頭にプロトコルとドメイン(<http://www.example.com>)が追加されて

[code]

    http://www.example.com/virtual/service/example.com/http/test/common/img/XXXXXXX.gif
    
[/code]

となります。  
あまり良くない方法ですが、これで表示できるようにするには、  
サーバー側にエリアスかシンボリックリンクを設定して同じ階層で  
ファイルにアクセスできるようにする必要があります。  
もちろんこれではURLを叩けば単独で表示できます。

.  
http通信の特性上読み込みは1ファイル単位で個別に読み込まれるので  
静的なリソースファイルはURLを叩けば大抵表示できます。

ブラウザでページ内に表示出来ている画像等を単独で表示不可能にする場合は  
リファラー制限とかhtmlからのリクエストに1回だけ読み込めるトークンや  
時間制限の認証等を埋め込むとかの処理を追加する必要が有ります。

前者のリファラー制限は簡単で負荷も低く  
偽装で簡単に回避されますが、効果は一般ユーザーに対してはそこそこ高いです。

後者の読み込みのリクエストに追加情報を使って制限をかけるような仕組みは  
精度も上がりますが負荷やコストが格段に高くなっていきます。

どちらを採用するかは作成しようとしているコンテンツの要件次第で  
判断すると良いでしょう。

