ホームページ > バックエンド開発 > PHPチュートリアル > Web サイトのクロスドメイン向け 5 つのソリューション

Web サイトのクロスドメイン向け 5 つのソリューション

little bottle
リリース: 2023-04-06 12:44:02
転載
5232 人が閲覧しました

ブラウザは同一生成元ポリシーを使用するため、クロスドメインリクエストが発生します。 Web ページが、異なるドメイン名/異なるプロトコル/異なるポートを使用して別の Web ページにリソースを要求します。これはクロスドメインです。この記事では、Web サイトのクロスドメインの問題を解決する 5 つの方法を紹介します。興味のある友人は参照してください。

1.リープフロッグとは何ですか?

  • Web ページが、異なるドメイン名/異なるプロトコル/異なるポートを持つ別の Web ページからリソースを要求します。これはクロスドメインです。
  • クロスドメインの理由: 現在のドメイン名リクエスト Web サイトでは、Ajax リクエストを介して他のドメイン名を送信することはデフォルトで許可されていません。

2. クロスドメインリクエストが発生するのはなぜですか?

  • ブラウザは同一オリジン ポリシーを使用するため、

3. 同一オリジン ポリシーとは何ですか?

  • 同一オリジン ポリシーは、Netscape によって提案されたよく知られたセキュリティ ポリシーであり、現在 JavaScript をサポートするすべてのブラウザでこのポリシーが使用されています。同一オリジン ポリシーはブラウザの中核で最も基本的なセキュリティ機能であり、同一オリジン ポリシーが存在しない場合、ブラウザの通常の機能に影響が出る可能性があります。 Web は同一オリジン ポリシーに基づいて構築されており、ブラウザは同一オリジン ポリシーの実装にすぎないと言えます。

4. ブラウザが同一生成元ポリシーを使用するのはなぜですか?

  • は、ユーザー情報のセキュリティを確保し、悪意のある Web サイトがデータを盗むのを防ぐためのものです。Web ページが同一オリジン要件を満たしていない場合、次のことができなくなります。

    • 1. Cookie、LocalStorage、IndexDB の共有
  • ##2. DOM
    • ## の取得
  • #3. AJAX リクエストは送信できません
    同一生成元ポリシーの非絶対的な性質:
  • <script></script>
    <img/>
    <iframe/>
    <link/>
    <video/>
    <audio/>
    ログイン後にコピー
および src 属性を持つその他のタグは、異なるドメインから送信できます。 リソースをロードして実行します。他のプラグインの同一オリジン ポリシー: Flash、Java アプレット、Silverlight、Google Gears などのブラウザによって読み込まれるサードパーティ プラグインにも独自の同一オリジン ポリシーがありますが、これらの同一オリジン ポリシーは属しません。ブラウザのネイティブの同一オリジン ポリシーに適用されます。抜け穴がある場合、ハッカーによって悪用され、XSS 攻撃の結果が残る可能性があります。

いわゆる同一オリジンとは、ドメイン名、ネットワーク プロトコル、およびポート番号は同じですが、1つでも異なるとクロスドメインが発生します。たとえば、ブラウザを使用して

http://baidu.com

を開き、ブラウザが JavaScript スクリプトを実行すると、スクリプトが

http:// にリクエストを送信していることがわかります。 cloud.baidu.com ドメイン名。ブラウザは、クロスドメイン エラーであるエラーを報告します。 解決策は 5 つあります:

1. フロントエンドで jsonp を使用します (推奨されません)

通常、JSON データをリクエストすると、サーバーは次のように返します。 JSON タイプのデータの文字列。JSONP モードを使用してデータをリクエストすると、サーバーは実行可能な JavaScript コードを返します。 jsonp のクロスドメインの原則は、スクリプトの src を動的にロードすることであるため、パラメーターは URL 経由でのみ渡すことができるため、jsonp の型 type は取得のみ可能です。例:

    $.ajax({
        url: &#39;http://192.168.1.114/yii/demos/test.php&#39;, //不同的域
        type: &#39;GET&#39;, // jsonp模式只有GET 是合法的
        data: {
            &#39;action&#39;: &#39;aaron&#39;
        },
        dataType: &#39;jsonp&#39;, // 数据类型
        jsonp: &#39;backfunc&#39;, // 指定回调函数名,与服务器端接收的一致,并回传回来
    })
    ログイン後にコピー
  • JSONP モードを使用してデータをリクエストするプロセス全体: クライアントはリクエストを送信し、実行可能な関数名を指定します (ここでは、jQuery がカプセル化プロセスを実行し、自動的にコールバック関数を生成し、success 属性のデータを取り出します)メソッド) コールバック ハンドルを渡す代わりに呼び出し)、サーバーは backfunc 関数名を受け入れ、実際のパラメーターの形式でデータを送信します
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート