2012/10/03 (Wed) Javascript: Same origin policy を回避する

Javascriptは、何かとセキュリティにうるさい言語で、他のプログラミング言語なら簡単に出来るファイルの読み込みや書き込みに強い制約がかかっている。これは、そもそもWeb上で動くことを想定しているためで、とりわけローカルファイルへのアクセスや他のウェブサイトへのアクセスは難しい。参考：Same origin policy (wikipedia)。

例えば、自分のウェブサイトにインラインフレーム(iframe)を設置して、そのソースをyahooのトップページに指定するとする。当然、ブラウザで閲覧する際には、自分のページの中でyahooを使うことができる。しかし、javascriptによって、このiframeの要素へアクセスすることはできない。この「アクセス」にはソースコードの読み込みも含まれる。ブラウザから閲覧するときにはもちろんフレームのソースを参照することができるけど、スクリプトを介するとできない仕組みになっている。

あるページからjavascriptによってアクセスできる範囲は、その同一ドメインに限られる。簡単な実験ページを作成した。
http://jsdemo.choitoippuku.com/same-domain.html
このリンク先のページへいくと、2つのiframeが設置してある。上のiframeのソースは同一ドメイン (http://jsdemo.choitoippuku.com) のファイルで、下のiframeのソースはYahoo Japanになっている。
それぞれ、右側にあるボタンを押すと、iframeのソースがテキストエリアに表示されるようにjavascriptが書かれている（Chrome, Firefoxで動作確認済み。IEだと怪しいかも）。

ボタンをクリックすると、上の方ではきちんとソースが表示される（広告が含まれているのはご愛嬌）が、下の方では「取得しようとしています・・・」というメッセージが出るだけのはず。これは、外部のページであるYahooのソースを取得しようとするとエラーが出て、スクリプトがそこで止まってしまっているということだ。


こういう仕様なのはまぁ仕方ないとして、面倒くさいことに、Chromeの場合、同じディレクトリにあるローカルファイルを同一ドメインにあると見てくれないらしい。例えば、
http://jsdemo.choitoippuku.com/same-domain.html
http://jsdemo.choitoippuku.com/mypage.html
の2つのソースをローカルに保存して、same-domain.htmlの動作を確認してみると、今度は上のiframeのソースも取得できない。Firefoxの場合は問題なく動いた。

さて、これで困るのは、ローカルではChromeによるHTMLファイルの編集・動作確認ができないということだ。いちいちサーバーにあげつつデバッグなんてしていたら日が暮れる。これを回避するには、Chromeをオプション付きで開けば良い。

まず、Chromeのウィンドウを閉じる（残っているウィンドウがあると上手くいかない）。
Linuxの場合、端末から
google-chrome --allow-file-access-from-files
で開く。するとローカルファイルへのアクセスが認められるので、サーバーにあげたのと同じ動作になる。

google-chrome --disable-web-security
で開くと、セキュリティ制限が取り払われるので、Yahooのソースも取得できるようになる。


Macの場合（未確認）
open -a Google\ Chrome --args --allow-file-access-from-files
open -a Google\ Chrome --args --disable-web-security

Winの場合（末確認）
chrome.exe --allow-file-access-from-files
chrome.exe --disable-web-security



＊この方法を使うと、ローカルにあるテキストファイルの読み込みまでは簡単に実装できる（たとえば、テキストファイルをiframeのソースとして読み込んでから、そのソースを取得すればいい）が、書き込みはまた次元が違うようだ。


参考ページ：
http://stackoverflow.com/questions/3102819/chrome-disable-same-origin-policy 
http://stackoverflow.com/questions/3481977/is-there-a-way-to-bypass-javascript-jquerys-same-origin-policy-for-local-acce