相同性とクロスドメイン、jsonp（関数カプセル化）、CORS原則の詳細な分析

同一起源ポリシー

Ajax リクエストの制限:

Ajaxは自身のサーバーにのみリクエストを送信できる

同一生成元ポリシーはブラウザのセキュリティ機能です。異なる生成元のクライアント スクリプトは、明示的な承認なしに互いのリソースを読み書きすることはできません。

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

ウェブサイト B の HTML ファイルはウェブサイト B にのみ Ajax リクエストを送信しますが、ウェブサイト A はウェブサイト B に Ajax リクエストを送信できません。

同様に、Web サイト B は Web サイト A に Ajax リクエストを送信できません。

相同:

2 つのページのプロトコル、ドメイン名、ポートが同じ場合、2 つのページは同じソースに属します。どちらか 1 つだけが異なる場合は、異なるソースからのものです。

http://www.example.com/dir/page.html

• http://www.example.com/dir2/other.html: 同じオリジン
• http://example.com/dir/other.html: 異なるオリジン（異なるドメイン名）
• http://v2.www.example.com/dir/other.html: 異なるオリジン（異なるドメイン名）
• http://www.example.com:81/dir/other.html: 異なるソース (異なるポート)
• https://www.example.com/dir/page.html: 異なるオリジン (異なるプロトコル)

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

• 同一オリジンポリシーは、ユーザー情報のセキュリティを確保し、悪意のある Web サイトによるデータの盗難を防ぐために設計されています。元の同一生成元ポリシーは、クライアント上の Web サイト A によって設定された Cookie に Web サイト B がアクセスできないことを意味します。
• インターネットの発展に伴い、同一オリジンポリシーはますます厳格になってきました。異なるソースの場合、Ajax リクエストを非同一オリジンのアドレスに送信できないという規制があります。リクエストが行われると、ブラウザはエラーを報告します。

同一生成元ポリシーによる制限なし:

ページ内のリンク、リダイレクト、フォーム送信は同一オリジンポリシーの対象ではなく、クロスドメイン リソースの導入が許可されます。しかし、js はロードされたコンテンツを読み書きできません。ページに埋め込まれた<script src="..."></script> 、 <img> 、 <link> 、 <iframe>など

クロスドメインの問題

クロスドメイン: プロトコル、ドメイン名、ポート番号に違いがあれば、クロスドメインです。

クロスドメインの理由:

クロスドメイン問題は、JavaScript の同一生成元ポリシーに起因します。つまり、プロトコル + ホスト名 + ポート番号 (存在する場合) が同じ場合にのみ相互アクセスが許可されます。

特定のドメイン名のインターフェースが他のドメイン名の Web ページによって不正に呼び出されるのを防ぐために、ブラウザは JavaScript にセキュリティ制限を課します。

つまり、JavaScript は自身のドメインの下にあるリソースにのみアクセスして操作することができ、他のドメインの下にあるリソースにアクセスして操作することはできません。

クロスドメインの問題はJSとAjax、 HTML 自体にはクロスドメインの問題はありません。

たとえば、タグ、スクリプト タグ、さらにはフォーム タグ (ドメイン間でデータを直接送受信できる) などです。

クロスドメインの問題を解決する:

JSONP : スクリプト タグのクロスドメイン機能を使用すると、現在のスクリプトの関数をクロスドメイン スクリプト内で直接呼び戻すことができます。

CORS : サーバーは、HTTP 応答ヘッダーのAccess-Control-Allow-Origin値を設定して、クロスドメイン制限を削除します。 注: これらのクロスドメイン ソリューションには両方とも致命的な欠陥があり、バックエンドの支援に大きく依存しています。

Reverse Proxyプロキシ: フロントエンドで独立して解決できるクロスドメイン ソリューション:

インターネット上の接続要求を受け入れるためにプロキシ サーバーを使用することを指します。

その後、要求は内部ネットワーク上のサーバーに転送されます。

そして、サーバーから取得した結果をインターネット上の接続を要求しているクライアントに返します。

この時点で、プロキシ サーバーは外部からはリバース プロキシ サーバーとして表示されます。

JSONP

JSONPで解決

jsonp は、JSON with padding の略語です。Ajax リクエストには属しませんが、Ajax リクエストをシミュレートできます。

JSONPはコールバック関数とデータの2つの部分で構成されています

• コールバック関数は、応答が来たときにページ内で呼び出される関数です。コールバック関数の名前は通常、リクエストで指定されます。
• data はコールバック関数に渡される JSON データです。

解決：

簡単に理解すると、サーバー側では、JSONデータが関数パラメータとして使用され、関数に入力され、関数がクライアント上で呼び出されてデータが処理されます。

クロスドメイン リクエストを実装するための JSONP の原則は、単に<script>タグを動的に作成し、 <script>の src を使用して、同一オリジン ポリシーに制約されることなくドメイン間でデータを取得することです。

JSONP の利点と欠点:

アドバンテージ：

同一生成元ポリシーによって制限される XMLHttpRequest オブジェクトによって実装される Ajax リクエストとは異なり、互換性が高く、古いブラウザーでも実行できます。

XMLHttpRequest または ActiveX のサポートは必要なく、リクエストが完了した後にコールバックを呼び出すことによって結果を返すことができます。

欠点:

GET リクエストのみがサポートされており、POST などの他の種類の HTTP リクエストはサポートされていません。クロスドメイン HTTP リクエストのみがサポートされています。

異なるドメインの2つのページ間でJavaScript呼び出しを行う方法は解決されません。

JSONP コードの最適化:

クライアントは関数名をサーバーに渡す必要がある

スクリプトリクエストを動的リクエストに変換する

リクエストの送信を容易にするためにjsonp関数をカプセル化する

サーバー側コード最適化 res.jsonp メソッド

JSONP関数のカプセル化:

関数 jsonp (オプション) {
    // スクリプトタグを動的に作成します var script = document.createElement('script');
    // 文字列を連結するための変数 var params = '';
    for (var attr in options.data) {
        パラメータ += '&' + 属性 + '=' + オプション.data[属性];
    }
    //myJsonp0124741
    var fnName = 'myJsonp' + Math.random().toString().replace('.', '');
    // グローバル関数にする window[fnName] = options.success;
    // スクリプト タグに src 属性を追加します。script.src = options.url + '?callback=' + fnName + params;
    // ページにスクリプト タグを追加します。 document.body.appendChild(script);
    // スクリプトタグにonloadイベントを追加する script.onload = function () {
        document.body.removeChild(スクリプト);
    }
}

使用：

// ボタンを取得します var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
// ボタンにクリックイベントを追加する btn1.onclick = function () {
    jsonp({
        // リクエストアドレス URL: 'http://localhost:3001/better',
        データ： {
            名前: 'lisi',
            年齢: 30
        },
        成功: 関数 (データ) {
            コンソールログ(123)
            コンソール.log(データ)
        }
    })
}
btn2.onclick = 関数（）{
    jsonp({
        // リクエストアドレス URL: 'http://localhost:3001/better',
        成功: 関数 (データ) {
            コンソールログ(456789)
            コンソール.log(データ)
        }
    })
}

CORS

CORSで解決する

CORS: 正式名称はクロスオリジン リソース共有で、これによりブラウザーはクロスドメイン サーバーに Ajax リクエストを送信できるようになり、Ajax は同じオリジンでのみ使用できるという制限を克服します。

//クロスドメインを実現するためにサーバーのレスポンスヘッダー情報を設定します res.setHeader("Access-Control-Allow-Origin", "*"); /* アスタリスクはすべてのドメインが許容されることを示します。 */

Express フレームワークでのクロスドメイン実装:

クロスドメインモジュールをインストールします。構文: npm install cors

app.js ファイルに cors モジュールをインポートします: var cors = require('cors')

クロスドメインモジュールを使用します（app.js ファイル内）： app.use(cors())

上記は、同一オリジンとクロスドメイン、jsonp（関数のカプセル化）、および CORS の原則の詳細な分析です。同一オリジンとクロスドメイン、jsonp（関数のカプセル化）、および CORS の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。