クロスドメイン制約 を document.domain の 変更 で 回避

2 件のコメント

クロスドメイン制約 を 回避 する クライアント実装 を 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 は、上位ドメインへの変更は可能ですが、他のドメインへ変更はできません。 また、上位ドメインでも comorg のような最上位への変更は ブラウザ によってできないようです。 ( Chrome ではできました… )

× 違うドメインへの変更はできない

document.domain = 'hoge.co.jp';     // 違うドメインなので エラー

△ 最上位ドメインへの変更は場合によりけり

document.domain = 'com';            // 最上位 ドメイン なので ブラウザ によっては エラー

注意

信頼するサーバーの範囲を広げることになるので、XSS に対する意識を持ち、対策を行う必要があります。 たとえば…

  • テキスト入力欄において、">", "<", "&" をエスケープする
  • JavaScript を動的に生成する場合、生成コードをエンコードする
  • href, src に JavaScript が含まれていないことを確認する

といったことを注意してください。

今回、以下のサイトを参考にしました。

  1. これってもうできませんよね?

    返信削除
  2. Haris Habib さん

    情報ありがとうございます。
    時間がなくて詳しい調査できていないですが…
    調べがついたらまた記事を起こしてみます!

    返信削除