同一生成元ポリシーについて

同一生成元ポリシーとは同一
生成元ポリシーの目的
JSONPを使用して同一生成元制限の問題を解決する
jsonpメソッドをカプセル化する
同一生成元以外のリクエストの制限に対する2番目の解決策----CORSクロスオリジンリソース共有

1.Ajaxリクエストの制限

Ajaxは、自身のサーバー側にのみリクエストを送信できます。

たとえば、WebサイトAとWebサイトBがあります。WebサイトAのHTMLファイルはWebサイトAのサーバーにのみAjaxリクエストを送信でき、WebサイトBのHTMLファイルはWebサイトBのサーバーにのみAjaxリクエストを送信できます。ただし、WebサイトAはAjaxリクエストをWebサイトBに送信できません。同様に、WebサイトBはAjaxリクエストをWebサイトAに送信できません。

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

2つのページが所有している場合相同的协议、域名和端口、2つのページは同じソースに属し、一方が異なる限り、それは異なるソースになります。次のように:

ここに画像の説明を挿入

3.同一生成元ポリシーの目的

同一生成元ポリシーは、ユーザー情報のセキュリティを確保し、悪意のあるWebサイトがデータを盗むのを防ぐことです。

元の同一生成元ポリシーは、クライアント側のWebサイトAによって設定されたCookieを参照しており、WebサイトBはそれにアクセスできません。

インターネットの発達に伴い、同一生成元ポリシーがますます厳しくなり、同一生成元が異なる場合、Ajaxリクエストを同一生成元以外のアドレスに送信できないという規制があります。 、ブラウザはエラーを報告します。

4. JSONPを使用して、同一生成元制限の問題を解決します

jsonpは、パディング付きのjsonの略語であり、ajaxに属していませんが、Ajaxリクエストをシミュレートできます。

1.スクリプトタグのsrc属性に、さまざまなソースのサーバー側リクエストアドレスを書き込みます

ここに画像の説明を挿入

2.サーバー側の応答データは関数呼び出しである必要があり、クライアントに送信される実際のデータは関数呼び出しのパラメーターとして使用される必要があります

ここに画像の説明を挿入

3.クライアントのグローバルスコープで関数fnを定義します

ここに画像の説明を挿入

4.サーバーから返されたデータをfn関数内で処理します

ここに画像の説明を挿入

具体的なコード例は次のとおりです。

ここに画像の説明を挿入
ここに画像の説明を挿入

JSONPコードの最適化

  1. クライアントは関数名をサーバー側に渡す必要があります
  2. スクリプトリクエストの送信を動的リクエストに変える
  3. jsonp関数をカプセル化して、リクエストの送信を容易にします
  4. サーバー側のコード最適化のres.jsonpメソッド

5.jsonpメソッドをカプセル化します

ここに画像の説明を挿入

ここに画像の説明を挿入

上記の梱包方法のデメリット

ここに画像の説明を挿入

改善1:fn1とjsonpを関連付ける

ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入

改善点2:関数名について

jsonpをカプセル化する関数内では、現在、送信するリクエストの数に関係なく、関数の名前は常にfn1です。

リクエストを継続的に送信する場合、つまりjsonp関数を継続的に呼び出す場合、潜在的な問題が発生します。後で送信されるリクエストは、ウィンドウオブジェクトの下にfn1関数をマウントします。これにより、最初に送信されたリクエストのウィンドウオブジェクトの下にマウントされたfn1関数が上書きされます。

したがって、カプセル化されたjsonp関数内では、関数の名前をハードコードされた名前にすることはできません。

改善点は次のとおりです。

ここに画像の説明を挿入
ここに画像の説明を挿入

再度最適化:複数のパラメーターを渡す要求

以前に最適化されたコードからわかるように、リクエストは1つのパラメーターコールバックパラメーターのみを渡します

ajax関数と同様に、呼び出すときにデータ属性を渡す必要があります。属性の値はオブジェクトであり、オブジェクトにはサーバーに送信するリクエストパラメーターが格納されます。

jsonpソリューションのリクエストは、getリクエストに属しています。スクリプトタグのsrc属性を介して送信されるリクエストであるため

ここに画像の説明を挿入
ここに画像の説明を挿入

最適化の別のラウンド:サーバー側コードの最適化

ここに画像の説明を挿入サーバー側のコードを最適化した結果:

ここに画像の説明を挿入

6.同一生成元以外のリクエスト制限に対する2番目のソリューション----CORSクロスオリジンリソースシェアリング

CORS:フルネームはクロスオリジンリソースシェアリング、つまりクロスオリジンリソースシェアリングです。これにより、ブラウザーはクロスオリジンサーバーにajaxリクエストを送信でき、Ajaxは同じオリジンでのみ使用できるという制限を克服します。

  • これはjsonpとは異なり、jsonpは同一生成元の制限をバイパスし、ajaxリクエストを送信しません。
  • この解決策は、サーバー側でいくつかの構成を実行することであり、クライアントは元のコードを保持できます
  • サーバー側では、クロスドメイン(構成済み)にアクセスできます。構成なしでアクセスできますが、許可されていません。

ここに画像の説明を挿入
ここに画像の説明を挿入
ノードサーバー側の設定応答ヘッダーコードの例:

ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/weixin_47505105/article/details/123436034