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