

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）


CC BY-SA 3.0
2015-03-14T16:34:02.460
7917
2015-03-18T10:03:28.273
7634
question
javascript html css linux centos
JavaScriptやCSS内に記述するファイルへの絶対パス（フルパス）について教えてください。


ユーザーのブラウザでＨＴＭＬが表示される時には、  
まず、ＨＴＭＬとしてのテキストが読み込まれて、  
その所々にあるファイルをサーバーに要求しファイルを得て適切な位置に適切な様にユーザー側のブラウザが表示する（レンダリングする）というようにしています。  
なので、ファイルが絶対パスで書いてあったとすると、それは、ネットワーク上からアクセスできる絶対パスでなければいけません。  
つまり、ユーザー側に表示するためには何であれ獲得できる（つまり表示できる）ファイルでなければいけません。（サーバーが表示画面を構成してその画面全体を転送しているわけではないのです）

仮に絶対パスで書くことができたとしても、（ＨＴＴＰの仕組み上）そのファイルは直接獲得表示できるし（サーバーの管理するファイル・システムを直接見せていることになる）、同じフォルダのファイルも閲覧されてしまうかもしれません。  
むしろＨＴＴＰで限定された部分を見せているというのに反する（あなたの望む逆になる）ことになります。


CC BY-SA 3.0
2015-03-14T23:13:40.307
7926
2015-03-14T23:13:40.307
5044
7917
answer


質問内容から推測すると

[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回だけ読み込めるトークンや  
時間制限の認証等を埋め込むとかの処理を追加する必要が有ります。

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

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

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


CC BY-SA 3.0
2015-03-16T09:42:20.847
7979
2015-03-16T09:42:20.847
5479
7917
answer


サーバーの絶対パスであれば、PHPで`$_SERVER['DOCUMENT_ROOT']`を書き出します。

単純にWEB_ROOTという意味でしたら、`"/common/img/XXXXXXX.gif"`というように  
先頭に「`/`」が付いた記述が、いわゆるクライアントサイドにおける"絶対パス"です。


CC BY-SA 3.0
2015-03-16T12:12:16.730
7981
2015-03-16T23:09:43.573
2015-03-16T23:09:43.573
3160
1062
7917
answer


pathについては解答が付いてるので割愛。

画像のpathを隠蔽したかったら、phpで画像ファイルを読み込んで、HTMLに埋め込むしかないような気がします。  
当然、対象の画像を判別する方法は必要になります。  
以下の例では、IDで持たせていますが、パラメータにファイル名だけを渡して途中のpathはPHPで補完することで完全にとは言いませんが、直接ファイルを開かれるリスクは軽減できる気がします。

例のようにIDとpath紐付けるようなもの用意してやっても良いですが...規模がでかくなると無駄に大変なだけになる気がします。

<http://sanslanommer.com/php%E3%81%A7%E7%94%BB%E5%83%8F%E3%83%87%E3%83%BC%E3%82%BF%EF%BC%88%E3%83%90%E3%82%A4%E3%83%8A%E3%83%AA%EF%BC%89%E3%82%92%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%81%95/>


CC BY-SA 3.0
2015-03-16T12:31:05.210
7983
2015-03-16T12:31:05.210
2383
7917
answer


質問の的を素直に射ている解答がないような気がしたので一応。(といっても何を求められているのかよく分かりませんが)

示されている

[code]

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

の **ドメインをコードに含めたくない** という意味であれば

[code]

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

のようにすればいいでしょう。


CC BY-SA 3.0
2015-03-16T19:13:58.067
7989
2015-03-16T19:13:58.067
2376
7917
answer


ちょっと懐かしいですが、Referer
を使って他のサイトからの画像[直リン](http://ja.wikipedia.org/wiki/%E7%9B%B4%E3%83%AA%E3%83%B3%E3%82%AF)を阻止する、という方法がありますね。  
これなら Web_beginner さんが設置しているサーバ以外の URL から画像を見られることは少なくなります。(絶対防ぐ、というのは HTTP
上不可能だと思います)

画像が置いてあるフォルダにファイル名を `.htaccess` というファイルを作って記述します。

[code]

    SetEnvIf Referer "^http://www\.example\.com" ref_ok
    order deny,allow
    deny from all
    allow from env=ref_ok
    
[/code]

上記の例では、www.example.com ドメインのリファラ情報を持っていない限り、そのユーザは画像を直接閲覧することができなくなります。  
www.example.com を Web_beginner さんの URL に置き換えて頂ければ。

ただし、一度リファラ情報を保持したまま画像にアクセスすると画像は表示できてしまいますのでお気を付け下さい。  
例：)<http://www.hoge.com> にアクセスした直後に <http://www.hoge.com/hoge.jpg>
を見に行くと見れてしまう。(ただし、ここで画面更新するとリファラ情報が途切れて見れなくなります。)

## 補足

Web
ページにアクセスした際、ブラウザは[リファラ](http://ja.wikipedia.org/wiki/HTTP%E3%83%AA%E3%83%95%E3%82%A1%E3%83%A9)という情報を記録します。  
これはリンク元の URL で、PHP では以下のように情報を取得することができます。  
リンク元が無い場合、以下のコードは null を返します。

[code]

    $referer = filter_input(INPUT_SERVER, 'HTTP_REFERER');
    
[/code]

または

[code]

    $referer = $_SERVER['HTTP_REFERER'];
    
[/code]

## 蛇足

スーパーグローバル変数を直接使うこと自体が個人的には好きではないので、必ず [`filter_input()
関数`](http://php.net/manual/ja/function.filter-input.php)を利用してアクセスするようにしてます。  
`$_SERVER` でも `filter_value(INPUT_SERVER,...)` でも取れる情報に大差はありませんのでお好みで使ってください。


CC BY-SA 3.0
2015-03-18T10:03:28.273
8067
2015-03-18T10:03:28.273
7926
7917
answer