序文 ご存知のとおり、ブラウザの相同性戦略とクロスドメイン方式も、フロントエンド面接で頻繁に遭遇する問題です。この記事では、主にフロントエンド面接で遭遇する相同性とクロスドメインの問題についてご紹介します。詳しい紹介を見てみましょう。 同一生成元ポリシーとは何ですか? 同一生成元ポリシーは、ある生成元から読み込まれたドキュメントやスクリプトが別の生成元のリソースとやり取りする方法を制限するために使用されます。これは、悪意のある可能性のあるファイルを隔離するための重要なセキュリティ メカニズムです。 相同性とは何ですか? 2 つのページのプロトコル、ドメイン名、ポートが同じである場合、その 2 つのページは同じオリジンからのものです。たとえば、Web サイト http://www.hyuhan.com/index.html のプロトコルは http、ドメイン名は www.hyuhan.com、ポート番号は 80 (デフォルト ポート) です。その相同性は次のとおりです。
同一オリジン ポリシーは、ユーザー情報のセキュリティを保護するためのものです。同一オリジン ポリシーによって、次の動作が制限されます。
クロスドメインアクセスを実行する方法 ドメイン間で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システムを自動的に展開する方法
IE6 と IE7 では CSS の解釈に多くの違いがあります。今日はそのうちの 1 つである高さに...
目次1. 関数の抽出2. 重複した条件付きスニペットを結合する3. 条件分岐文を関数に抽出する4. ...
方法1: SET PASSWORDコマンドを使用する mysql> username@loca...
序文最初はCentOS8でwgetを使ってダウンロードし、解凍して環境変数を設定するつもりだったので...
MYSQL5.7.17 が MAC で接続できない問題。SQLBench_community 6.3...
前回の記事では、Vue で画像の切り抜きや拡大・縮小、回転を実現する方法を紹介しました。今回は、アイ...
CSSとは# CSS (Cascading Style Sheets の略) は、「カスケーディング...
1. はじめにls コマンドはディレクトリの内容を表示するために使用され、Linux で頻繁に使用さ...
実際、XHTML 1.0 は、Transitional DOCTYPE と Strict DOCTY...
まずは本体から始めましょう:ウェブページを閲覧するとき、最初に目に留まるのは通常、ページの背景です。...
1 背景JDK1.8-u181とTomcat8.5.53がインストールされました。インストール後、環...
目次開発環境用のDocker-ceをインストールする開発環境用のDocker-composeをインス...
1. オブジェクトを動的に作成するJavaScript からオブジェクトを動的に作成する方法は 2 ...
/etc/my.cnf または /etc/mysql/my.cnf ファイルを変更する [クライアン...
環境設定1: MySQLをインストールし、MySQLのbinディレクトリを環境変数に追加する環境設定...