同じサーバー、違うドメインでクロスドメイン制限？

Question

ポップアップ風のウィンドウをhtmlのiframeを用いて実装しました。
プレビュー機能の実装をしています。

URLは都合上見せることはできません。申し訳ございません。
前提としては、同じサーバー内に

• sample.com
• sample2.com

というドメインがあります。

sample.comでプレビュー画面を押下すると、
sample2.comのpreview.htmlがiframeで呼ばれてポップアップのように表示されます。

しかし、google chromeのデベロッパーツールでみてみると以下のエラーが表示され
CSSを読み込むことができません。

Uncaught DOMException: Blocked a frame with origin "http://sample.com" from accessing a cross-origin frame.
    at contents (https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js:5:23123)
    at Function.map (https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js:4:6171)
    at init.x.fn.<computed> [as contents] (https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js:5:23203)
    at HTMLIFrameElement.<anonymous> (http://sample.com:28:24)
    at HTMLIFrameElement.dispatch (https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js:5:14113)
    at HTMLIFrameElement.v.handle (https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js:5:10850)

以下は、jQueryのコードです。
直接htmlに埋め込んでいます。

sample.com/contents/main.html
	<script>

	//previewのiframeを追加
	$(function(){
		$('#pre_iframe').append('<iframe src="http://sample2.com/contents/views/html/preview.html></iframe>');
	});
	
	//CSSをiframeに使用できるようにする
	$(function(){
	    $('#preview').on('load', function(){
	        $('#preview').contents().find('head').append('<link rel="stylesheet" href="http://sample2.com/contents/.css">');
	        $('body').css('overflow','hidden');
	    });
	});

	//クローズイベント
	$(document).on('click', '#close', function(){
  		$('#preIframe').remove();
  		$('body').css('overflow','scroll');
	});

	</script>

safariでは、「開発 > クロスオリジンの制限を無効にする」にチェックを入れれば綺麗に表示されます。

この場合、どのようにしてクロスドメイン制限を解除したら良いでしょうか。
JS上で解決できれば、それに越したことはないのですが、他に簡単な方法はないでしょうか。

Answer 1

この場合、どのようにしてクロスドメイン制限を解除したら良いでしょうか。

埋め込まれるsample2.comの側にJavaScriptを仕掛けて、sample.comとのやりとりはpostMessage（MDN）で行う、という手段になるかと思います。

（同じサーバなら、ドメインを揃えてしまうほうが早い気もしますが、それをできない事情はありますでしょうか）

Comments

[退会済みユーザー]

>（同じサーバなら、ドメインを揃えてしまうほうが早い気もしますが、それをできない事情はありますでしょうか）

こちらなのですが、ドメインを変えて管理画面とフロント画面で分けているため、
ドメインを揃えることができません。申し訳ございません。

[退会済みユーザー]

postMessageという手段について、少し調べてみます。
ヒントを頂きまして、ありがとうございます。

[退会済みユーザー]

連投すいません。
JSは初心者なので、調べてみたのですが
以下のページより、 *postMessage* を参照して問題ないでしょうか？
https://qiita.com/naoiwata/items/0a31d999b2dcd5098289

Answer 2

sample.com側からの対応だけで制限を外すことができると、どのサイトに対してもスクリプトを外部から挿入できることになるため、セキュリティ上の問題で「できない」と思っておいた方がいいです。

2 つのドキュメントが同一のオリジンではない場合、 Window オブジェクトや Location オブジェクトなど、限られたオブジェクトにのみアクセスすることができます。

同一オリジンポリシー - Web セキュリティ | MDN

sample2.com側からの対応ですが、DOMAPIのアクセス制限は、CORSなどと違ってレスポンスヘッダを通じて許可することもできないので、maisumakunさんのおっしゃるとおり、sample2.com側にスクリプトを埋めるしかないと思います。

sample.comをsample2.comのサブドメインとすることでも対応できるかと思いますが、これも、sample2.com側での対応が必要になるかと思います。

ページのオリジンは、いくつかの制限の下で変更されることがあります。スクリプトを用いると、 document.domain の値を現在のドメインまたは上位ドメインに変更できます。

同一オリジンポリシー - Web セキュリティ | MDN

Comments

[退会済みユーザー]

ご回答ありがとうございます。
sample2.comの方にスクリプトを埋め込むしかないこと、承知しました。

また、maisumakunさんにも質問させていただいているのですが、
https://qiita.com/naoiwata/items/0a31d999b2dcd5098289
こちらのpostMessageを参照して実装したら良いでしょうか？

このquiitaの記事だと、sample.comと、sample2.comの両方に
postMessageを使うための実装をしなければならない様なのですが、
sample2.comの方にだけスクリプトを埋め込めば、完結する処理なのでしょうか？

[Lhankor_Mhy]

いえ、両方です。
ただ、ご提示のスクリプトは「iframeで呼ばれたときだけ表示を変える」というものだと思うので、それなら、sample2.com側でwindow.parent で「自分がiframeで呼ばれているか」を識別して、表示を変えればいいのではないかな、と感じています。

もっと複雑なことをしているなら、postMessage でやり取りをするしかないでしょう。

[退会済みユーザー]

なるほど、わかりました！
ご丁寧にありがとうございます。

Lhankor_Mhyさんのおっしゃた通り、
前者を試してみてから、postMessageを使ってみます！