iframeのクロスドメインでよく使われるいくつかの方法
背景
事業が大きくなれば、当然、各プロジェクトのパブリックな業務が抽出され、パブリックなコンポーネントとなる。しかし、プロジェクトごとに異なる技術スタックを使用しているため、このパブリックコンポーネントを簡単に参照することができません。そこで、このコンポーネントをドメイン名の下に別ページとして記述し、他のプロジェクトではこのページをiframeやwebviewで読み込むことで、シンプルな機能の再利用を実現します。
しかし、この作業も多くの問題が発生し、クロスドメインだけでも何度か登場することになります。以下、私が遭遇したクロスドメインの問題と、その回避策をいくつか説明します。
なぜスパン
Netscapeはユーザー情報のセキュリティを確保するため、95年にsame-origin policyを導入した。same-originとは、プロトコル、ドメイン名、ポートの3つを同一とするものである。
ホモロジーポリシーに違反すると、クロスドメイン問題が発生し、主に3つの方法で顕在化する。
- Cookie、localStorage、indexDBが読めない
- DOMが取得できない {を使用します。 ajax リクエストを送信できませんでした。
風景
最近、私はある要件に取り組んでいました。私は誰かがラップしたビデオプレーヤーのようなものを導入するためにiframeを使用する必要があります。iframeは、クリックすると、私はiframeをフルスクリーンにするページが必要、ホモロジーポリシーの制限のために、iframeがフルスクリーンにページを伝えることができない内部フルスクリーンボタンを持っています。
解決方法
セットドメイン
document.domainの役割は、現在のドキュメントの元のドメイン部分を取得/設定することです、同じソースポリシーは、2つのドキュメントの元のドメインが同じかどうかを決定するために決定されますクロスドメインです。つまり、この値をsameにすることで、クロスドメインの問題を解決することができます。
ここでは、ドメインを第一レベルドメインの値に設定し、a.demo.com のページ url、iframe 参照 b のページ url を b.demo.com に設定し、特定の設定を
document.domain = 'demo.com'
設定後、iframeをフルスクリーンにするためにページ上にウィンドウをマウントします。
// a page
window.toggleFullScreen = () => {
// do something
}
ページbでは、ページaのウィンドウ・オブジェクトを取得して、直接呼び出すことができます
// b page
window.parent.toggleFullScreen()
しかし、この値にも一定の制限があり、ドメインの前のレベルの現在のドキュメントか、ドメインの同じ値を持つドキュメントのURLにしか設定できないようになっています。URLがa.demo.comの場合、ドメインはdemo.comかa.demo.comにしか設定できない。したがって、ドメインを設定する方法は、メインドメインが同じでサブドメインが異なる場合のみ解決できる方法です。
中間ページの利用
ページbがページcをロードし，ページcがページaのメソッドを呼び出すことで，ページbがページaのメソッドを呼び出すことができるようになる．
このルートは中間ページとしてページcをロードし、ページcのurlはa.demo.com/cとなります。ページcは、windowのonloadイベントでページaのメソッドを呼び出すだけの、シンプルなhtmlページです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
window.onload = function () {
parent.parent.toggleFullScreen();
}
</script>
</body>
</html>
ページcとページaはsame-originポリシーに準拠しているため、クロスドメインの問題を回避してフルスクリーンでのアプローチを行うことができます。
ポストメッセージ
/
window.postMessageメソッドは、安全なクロスオリジン通信を可能にするメソッドです。ターゲットウィンドウのプロトコル、ホストアドレス、ポートを記述して、メッセージを送信します。
// b page
parent.postMessage(
value,
"http://a.demo.com"
);
// a page
window.addEventListener("message", function( event ) {
if (event.origin ! == 'http://b.demo.com') return;
toggleFullScreen()
});
念のため、メッセージ受信後に event.origin を確認し、メッセージを受信したいウィンドウから送信されたかどうかを判断してください。
概要
上記の方法を用いることで、iframeと自由に通信することができるようになります。
以上が今回の内容ですが、皆様の学習のお役に立てれば幸いです。また、スクリプトハウスをもっと応援していただければ幸いです。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン