クロスドメイン制約 を 回避 する クライアント実装 を document.domain を利用して実現します。
クロスドメイン通信 を実現するには "サーバー側" と "クライアント側" の2カ所に対して手を入れる必要があるかどうか考えます。 ここでは、"クライアント側" に手を加えて クロスドメイン通信 を実現する方法を載せます。 具体的には、document.domain を変更することで信頼する範囲を広げて クロスドメイン通信 を行えるようにします。
想定する クロスドメイン通信 環境
サーバーA から HTML & JavaScript を受信し、足りない リソース を サーバーB から取得する環境を想定します。
今回の方法は、サーバーA と サーバーB の 上位ドメインが同一であること が条件になります。
信頼する ドメイン ( サーバー ) を広げる実装
サーバーA から配信される HTML & JavaScript において、以下のような実装を行います。
ドメイン の変更 サンプルコード ( http://www.example.com/index.html )
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> < html > < head > < title >クロスドメイン通信 サンプル</ title > <script type="text/javascript"> document.domain = 'example.com' ; </script> </ head > < body > </ body > </ html > |
サーバーA、サーバーBともに example.com の ドメイン に存在しているので、 上記コードを含む HTML & JavaScript を サーバーA から受信すると、 クライアントは、 サーバーA( www.example.com )、サーバーB( service.example.com ) ともに信頼して通信が可能となります。
document.domain
は、上位ドメインへの変更は可能ですが、他のドメインへ変更はできません。
また、上位ドメインでも com や org のような最上位への変更は ブラウザ によってできないようです。
( Chrome ではできました… )
× 違うドメインへの変更はできない
1 | document.domain = 'hoge.co.jp' ; // 違うドメインなので エラー |
△ 最上位ドメインへの変更は場合によりけり
1 | document.domain = 'com' ; // 最上位 ドメイン なので ブラウザ によっては エラー |
注意
信頼するサーバーの範囲を広げることになるので、XSS に対する意識を持ち、対策を行う必要があります。 たとえば…
- テキスト入力欄において、"
>
", "<
", "&
" をエスケープする - JavaScript を動的に生成する場合、生成コードをエンコードする
href
,src
に JavaScript が含まれていないことを確認する
といったことを注意してください。
今回、以下のサイトを参考にしました。
- MDN - document.domain
- MSDN - domain property
- @IT - クロスサイトスクリプティング脆弱性とは?
- 三度の飯とエレクトロン - クロスサイトスクリプティング対策としてやるべき5つのこと
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね!」または 「Twitter の フォロー」 お願いします!!