フロントエンドインタビューに必要なホモロジーとクロスドメインの詳細な説明

フロントエンドインタビューに必要なホモロジーとクロスドメインの詳細な説明

序文

ご存知のとおり、ブラウザの相同性戦略とクロスドメイン方式も、フロントエンド面接で頻繁に遭遇する問題です。この記事では、主にフロントエンド面接で遭遇する相同性とクロスドメインの問題についてご紹介します。詳しい紹介を見てみましょう。

同一生成元ポリシーとは何ですか?

同一生成元ポリシーは、ある生成元から読み込まれたドキュメントやスクリプトが別の生成元のリソースとやり取りする方法を制限するために使用されます。これは、悪意のある可能性のあるファイルを隔離するための重要なセキュリティ メカニズムです。

相同性とは何ですか?

2 つのページのプロトコル、ドメイン名、ポートが同じである場合、その 2 つのページは同じオリジンからのものです。たとえば、Web サイト http://www.hyuhan.com/index.html のプロトコルは http、ドメイン名は www.hyuhan.com、ポート番号は 80 (デフォルト ポート) です。その相同性は次のとおりです。

  • http://www.hyuhan.com/other.html: 同じソース
  • http://hyuhan.com/other.html: 別のソース(別のドメイン名)
  • https://www.hyuhan.com/other.html: 異なるソース(異なるプロトコル)
  • http://www.hyuhan.com:81/other.html: 別のソース(別のポート)

同一オリジン ポリシーは、ユーザー情報のセキュリティを保護するためのものです。同一オリジン ポリシーによって、次の動作が制限されます。

  1. Cookie、LocalStorage、IndexDBは読み取れません
  2. DOMは操作できません
  3. AJAXリクエストを送信できません

クロスドメインアクセスを実行する方法

ドメイン間でAJAXリクエストを行う方法

同一オリジンポリシーの制限を回避し、クロスドメイン AJAX リクエストを行うには、主に 3 つの方法があります。

JSONP

JSONP は、クライアントとサーバー間のクロスドメイン通信によく使用される方法です。クロスドメイン <script&bt; 要素を使用して、サーバーから JSON データを要求します。要求を受信すると、サーバーはデータをコールバック関数に格納して返します。実装は次のとおりです。

window.onload = 関数() {
    var スクリプト = document.createElement('script');
    script.src = "http://example.com/callback=test";
    document.appendChild(スクリプト);
}
関数テスト(res) {
    コンソールログ(res);
}

src の callback パラメータは、バックエンドが呼び出す必要があるコールバック関数の名前を設定するために使用されます。サーバーから返されるデータは次のとおりです。

テスト({
    "名前": "シャオミン",
    「年齢」: 24
    })

このようにして、フロントエンドはドメイン間でバックエンドデータを読み取ることができます。ただし、jsopn は get リクエストのみを実行でき、post リクエストを送信することはできません。

ウェブソケット

WebSocket は TCP をベースにした新しいネットワーク プロトコルです。同一オリジン ポリシーを実装せず、サーバーがサポートしている限りクロスドメイン アクセスを実行できます。さらに、WebSocket は Ajax モードでの通信に限定されません。Ajax テクノロジではクライアントがリクエストを開始する必要があり、WebSocket サーバーとクライアントは互いに情報をプッシュできるためです。

CORS

CORS は、Access-Control-Allow-Origin (Cross-Origin Resource Sharing) の略称で、W3C 標準です。 CORS はブラウザとサーバーの両方からのサポートが必要です。現在、ほぼすべてのブラウザがこの機能をサポートしています。 CORS のサーバー側サポートは、主に Access-Control-Allow-Origin を設定することによって実現されます。ブラウザが対応する設定を検出すると、ドメイン間での Ajax アクセスを許可できます。

ドキュメント.ドメイン

クッキーはサーバーからブラウザに書き込まれる情報です。セキュリティ上の理由から、同じオリジンの Web ページのみがクッキーを共有できます。ただし、2 つの Web ページのトップレベル ドメイン名が同じで、ヘッドフォンのドメイン名が異なる場合は、document.domain を設定することで Cookie を共有できます。

たとえば、ある Web ページのドメイン名が http://w1.example.com/a.html で、別の Web ページのドメイン名が http://w2.example.com/b.html の場合、これら 2 つの Web ページは同じ document.domain で設定されている限り、Cookie を共有できます。

ポストメッセージAPI

postMessage() メソッドを使用すると、異なるソースからのスクリプトが制限された方法で非同期に通信できるようになり、ドキュメント間、マルチウィンドウ、およびドメイン間のメッセージ配信を実現できます。 postMessage() 関数を使用してメッセージを渡し、ターゲット ページはウィンドウのメッセージ イベントをリッスンしてメッセージを受信します。 postMessage を使用すると、ドメイン間で LocalStorage、IndexDB、DOM データを読み取ることができます。

ウィンドウ名

ブラウザ ウィンドウには window.name プロパティがあり、同じオリジンであるかどうかに関係なく、同じウィンドウ内にある限り、前の Web ページでこのプロパティが設定されていれば、次の Web ページはそれを読み取ることができると規定されています。つまり、ウィンドウのライフ サイクル中、ウィンドウにロードされるすべてのページは window.name を共有し、各ページには window.name に対する読み取りおよび書き込み権限があり、window.name はウィンドウにロードされるすべてのページに保持されます。明らかに、これによりクロスドメイン アクセスを実現できます。

要約する

上記はこの記事の全内容です。この記事の内容が皆さんの勉強や仕事に一定の参考学習価値を持つことを願っています。ご質問があれば、メッセージを残してコミュニケーションしてください。123WORDPRESS.COM を応援していただきありがとうございます。

<<:  文字列から指定された文字を削除または抽出する JavaScript メソッド (非常によく使用されます)

>>:  PXEを使用してLinuxシステムを自動的に展開する方法

推薦する

ウェブデザイナーのための超便利なツール 50 選

ウェブデザイナーになるのは簡単ではありません。デザインやアーキテクチャを考慮するだけでなく、さまざま...

docker を使用して influxdb と mongo をデプロイするための一般的なコマンド

Docker ベースのデータベースをデプロイするsudo docker pull influxdb ...

MySQL mysqladmin クライアントの使用の概要

目次1. サーバーの状態を確認します。 2. ルートパスワードを変更します。 3. mysqlser...

Brotli圧縮アルゴリズムを有効にするNginxの実装プロセスの詳細な説明

序文Web アプリケーションでは、トラフィックを節約し、転送データのサイズを縮小し、転送効率を向上さ...

jQueryチェーン呼び出しの詳細な説明

目次チェーン呼び出し小さなケースチェーン呼び出しjQuery オブジェクトが任意のメソッド (ノード...

JavaScript の高度なクロージャの説明

目次1. 閉鎖の概念追加の知識ポイント: 2. 閉鎖の役割: 3. 閉鎖例3.1 liをクリックする...

MySQL 圧縮版 zip のインストールに関する問題の解決策

本日、MySQLの圧縮版をインストールする際に問題が発生しました。サービスが起動できず、2、3時間苦...

nginxリバースプロキシを介したデバッグコードの実装

背景現在、会社のプロジェクトは、フロントエンドとバックエンドが分離された方法で開発されています。新し...

MySQL オンライン DDL ツール gh-ost 原理分析

目次1. はじめに1.1 原則1.2 プロセス1.3 特徴1.4 githubアドレス2. テスト環...

シンプルなスネークを実現するためのネイティブjsキャンバス

この記事では、参考までに、簡単なスネークゲームを実装するためのjsキャンバスの具体的なコードを共有し...

JavaScript のプロトタイプとプロトタイプチェーンの詳細な説明

目次プロトタイプチェーン図プロトタイピングに必須の知識プロトタイププロパティ(プロトタイプを表示) ...

VUE+Canvasは、インゴットを受け取る富の神のゲームを実装します

前回のキャンバス ゲーム シリーズへようこそ: 《VUEがFlappy Birdを実装しました〜〜〜...

テキストの両側に水平線を描くための CSS のサンプルコード

この記事では、テキスト中央の両側に水平線を引く効果を実現する CSS のサンプルコードを紹介し、皆さ...

Linux または Android でファイル システムを追加する属性インターフェイスを解析する方法

最初のもの: 1. 主要なヘッダーファイルを追加します。 #include <linux/of...