クロスドメインの問題と解決策クロスドメインの問題と解決策

その他 2019-12-20 14:25:28 訪問数: null

クロスドメインの問題と解決策

 

 

1.何がクロスドメインであります

  • クロスドメインのリスク？

    • クロスドメインリクエストとAjax技術を大幅にページの体験を向上させますが、それはまた、CSRFからセキュリティリスク、最も重要なリスクをもたらします（クロスサイトリクエストフォージェリ）、クロスサイトリクエストフォージェリ。

    • 一般的な原則CSRF攻撃

      銀行振込操作は、次のURLで実行する場合：http://www.examplebank.com/withdraw?account=AccoutName&amount=1000&for=PayeeName

      まあ、絵を置くことができ、悪意のある攻撃者は、「http://www.examplebank.com/withdraw?account=Alice&amount=1000&for=Badman」に要求を送信するためには画像をクリックすると、クリックした誘惑するために別のウェブサイトに説明することはできません

      あなたはアリスという名前のユーザーのアカウントをお持ちの場合は、悪質なサイトを訪問し、彼女はちょうどログイン情報がまだ満了していない前に、その後、彼女は1000年の資金を失うことになるすぐに銀行を訪れていました。

  • ます。http：私たちのような、ウェブサイトを訪問することをクロスドメイン手段//127.0.0.1：8000このURLは、このページからこのURLにhttp://127.0.0.1:9000を訪問するために行ってきました、この時間は、クロスドメインの引き金とき、ドメイン名、ポート、二つの異なるドメイン名がクロスドメインにつながります。この時点で、サーバーのポート9000が要求を受け取ることができ、応答データは、ブラウザを提供しますが、ブラウザは、同一生成元ポリシーブラウザので、傍受された後に到着しました。

    URL 結果 理由
    http://www.cnblogs.com/liuweida 成功 ドメイン名、プロトコル、同じポート
    https://www.cnblogs.com/liuweida 故障 異なるプロトコル
    http://www.cnblogs.com:8888/liuweida 故障 別のポート
    http://www.cnblogs.cn/liuweida 故障 異なるドメイン

2.元ポリシーとは何ですか？

  • 元ポリシーが慣例である、それはまた、コアのブラウザで同一生成元ポリシーの欠如場合は、ブラウザの通常の機能が影響を受ける可能性があり、最も基本的なセキュリティ機能です。これは、同じプロトコル、ポート、URL、ドメイン名で同じドメイン上のブラウザのアドレスでなければなりません、URLアドレスを要請することで合意しました。そうでない場合、エラーは次のようになります。

  • 実際には、結果は要求を介して送信されていることである、ターゲット・サーバーは、要求に応答しますが、ブラウザがインターセプトに作られた非相同的要求の結果を返します。

埋め込みリソースの数は無制限

以下のような：

  • <script src="..."></script> クロスドメインスクリプトに埋め込まれたタグ。構文エラー情報は、相同スクリプトでキャプチャすることができます。
  • <link rel="stylesheet" href="..."> タグは、CSSを埋め込まれました。
  • <img> 組み込み絵。
  • <video> そして、  <audio> マルチメディアリソースを埋め込まれました。
  • <object>、  <embed> そして  <applet>プラグイン。
  • @font-face フォントの紹介。一部のブラウザでは、クロスドメインのフォント（クロスオリジン・フォント）、相同（同一生成元のフォントを）必要とフォントを可能にします。
  • <frame> そして、  <iframe>任意のリソースのロード。サイトでは、クロスドメインの相互作用のこのフォームを防ぐために、X-フレーム・オプションニュースのヘッドを使用することができます。

制限

非相同サイトで、限定されている行動の3種類があります。

  1. クッキー、のlocalStorage、indexDBを共有することはできません
  2. 私たちはお互いのDOM要素を操作することはできません
  3. Ajaxリクエストを送信できません

送信するには、クロスドメインリクエストの問題を解決する方法3。

3.1 JSONP

  • JSONPは、生成されたクロスドメインリクエストリソースを解決するためのソリューションは、非公式のクロスドメインのデータ交換プロトコルを作成するために、開発者に依存して、パディングとJSONの略です。

  • クロスドメインスクリプトタグの実装に基づいて、

    <!DOCTYPE html>
<html>
<head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> var messagetow = function(data){ alert(data); }; var url = "http://192.168.31.137/train/test/jsonpthree?callback=messagetow"; var script = document.createElement('script'); script.setAttribute('src', url); document.getElementsByTagName('body')[0].appendChild(script); </script> </head> <body> </body> </html>

  • クロスドメインのjQueryに基づきます

    $.ajax({
     type : 'get',
     url:'http://192.168.31.137/train/test/testjsonp',
     data : { name : name, sex : sex, address : address, looks : looks, }, cache :false, jsonp: "callback", jsonpCallback:"success", dataType : 'jsonp', success:function(data){ alert(data); }, error:function(data){ alert('error'); } });

3.2 CORS [推奨]

  • CORS（クロスオリジンリソースの共有、クロスドメイン・リソースの共有が）リソースは、ドメイン、ブラウザとサーバー間でアクセスしなければならない定義が通信する方法でなければならないことW3Cの標準である（クライアントとサーバーの同時処理が必要）。
  • CORS 2つの要求、シンプルかつ非単純な要求を要求。

単純な要求

  • 単純な要求は何ですか？

    只要同时满足以下两大条件，就属于简单请求。

（1）请求方法是以下三种方法之一：
  - HEAD
  - GET
  - POST
（2）HTTP的头信息不超出以下几种字段：
  - Accept
  - Accept-Language
  - Content-Language
  - Last-Event-ID
  - Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

  • 単純な要求のCORSを達成

    1.前端不需要进行特殊的操作
2.后端需要加入请求头Access-Control-Allow-Origin，代码如下：
    def get_time(request): if request.method == 'GET': ntime = time.strftime('%Y-%m-%d %X') obj = HttpResponse(ntime) obj['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8001' return obj

複雑な要求

  • 2つの要求、送信データを開始する前に、第1の予備スクリーニングを行うことを要求され、そして後にのみデータの送信などの要求を送信することにより、事前のスクリーニング。

    - 请求方式：OPTIONS
- “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息
- 如何“预检”
  => Access-Control-Allow-Origin（必含）
     设置为'*',允许所有域名访问
     一般设置为指定域名，如：'Access-Control-Allow-Origin:http://192.168.12.87'
  => 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过
        Access-Control-Request-Method
  => 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过
        Access-Control-Request-Headers

  • 複雑な要求を実現

    フロント

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<button id="a" class="btn btn-success">go</button>
<script>
    $("#a").click(function () {
        $.ajax({
            url:'http://127.0.0.1:8000/money/',
            type:'post',
            contentType:'application/json',
            data:{"name":"yjh"},
            success:function (data) {
                alert(data)
            }
            }
        )
    })
</script>
</body>
</html>

    楽屋

    from django.http import QueryDict
def get_money(request,response): if request.method == 'OPTIONS': response['Access-Control-Allow-Origin'] = '*' # 允许所有域名访问，一般会设置成指定的域名 response['Access-Control-Allow-Headers'] = 'Content-Type' # 复杂请求添加的头信息 response['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8001' return response

グローバルコンフィギュレーション

  • グローバルコンフィギュレーションは、ミドルウェアに書き込むことができ、ブラウザが無効の場合は、データリターンでレスポンスヘッダを追加できるように、受信したリターンデータは、発生しているので、書き換えミドルウェアprocess_response方法

  • ステップ：PYファイルを書かれた次のコードでは：

    from django.utils.deprecation import MiddlewareMixin
class CorsMiddleWare(MiddlewareMixin): def process_response(self,request,response): if request.method=="OPTIONS": response['Access-Control-Allow-Origin'] = 'http://localhost' response["Access-Control-Allow-Headers"]="Content-Type" response["Access-Control-Allow-Origin"] = "http://localhost:8080" return response

  • ステップ2：settings.pyに設定ファイルに登録されたアドオンのミドルウェア

    MIDDLEWARE = [
    'app01.my_middleware.CorsMiddleware',  # 在第一行写是因为django中间件的执行顺序，process_response倒序执行
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', ]

 

1.何がクロスドメインであります

  • クロスドメインのリスク？

    • クロスドメインリクエストとAjax技術を大幅にページの体験を向上させますが、それはまた、CSRFからセキュリティリスク、最も重要なリスクをもたらします（クロスサイトリクエストフォージェリ）、クロスサイトリクエストフォージェリ。

    • 一般的な原則CSRF攻撃

      銀行振込操作は、次のURLで実行する場合：http://www.examplebank.com/withdraw?account=AccoutName&amount=1000&for=PayeeName

      まあ、絵を置くことができ、悪意のある攻撃者は、「http://www.examplebank.com/withdraw?account=Alice&amount=1000&for=Badman」に要求を送信するためには画像をクリックすると、クリックした誘惑するために別のウェブサイトに説明することはできません

      あなたはアリスという名前のユーザーのアカウントをお持ちの場合は、悪質なサイトを訪問し、彼女はちょうどログイン情報がまだ満了していない前に、その後、彼女は1000年の資金を失うことになるすぐに銀行を訪れていました。

  • ます。http：私たちのような、ウェブサイトを訪問することをクロスドメイン手段//127.0.0.1：8000このURLは、このページからこのURLにhttp://127.0.0.1:9000を訪問するために行ってきました、この時間は、クロスドメインの引き金とき、ドメイン名、ポート、二つの異なるドメイン名がクロスドメインにつながります。この時点で、サーバーのポート9000が要求を受け取ることができ、応答データは、ブラウザを提供しますが、ブラウザは、同一生成元ポリシーブラウザので、傍受された後に到着しました。

    URL 結果 理由
    http://www.cnblogs.com/liuweida 成功 ドメイン名、プロトコル、同じポート
    https://www.cnblogs.com/liuweida 故障 異なるプロトコル
    http://www.cnblogs.com:8888/liuweida 故障 別のポート
    http://www.cnblogs.cn/liuweida 故障 異なるドメイン

2.元ポリシーとは何ですか？

  • 元ポリシーが慣例である、それはまた、コアのブラウザで同一生成元ポリシーの欠如場合は、ブラウザの通常の機能が影響を受ける可能性があり、最も基本的なセキュリティ機能です。これは、同じプロトコル、ポート、URL、ドメイン名で同じドメイン上のブラウザのアドレスでなければなりません、URLアドレスを要請することで合意しました。そうでない場合、エラーは次のようになります。

  • 実際には、結果は要求を介して送信されていることである、ターゲット・サーバーは、要求に応答しますが、ブラウザがインターセプトに作られた非相同的要求の結果を返します。

埋め込みリソースの数は無制限

以下のような：

  • <script src="..."></script> クロスドメインスクリプトに埋め込まれたタグ。構文エラー情報は、相同スクリプトでキャプチャすることができます。
  • <link rel="stylesheet" href="..."> タグは、CSSを埋め込まれました。
  • <img> 組み込み絵。
  • <video> そして、  <audio> マルチメディアリソースを埋め込まれました。
  • <object>、  <embed> そして  <applet>プラグイン。
  • @font-face フォントの紹介。一部のブラウザでは、クロスドメインのフォント（クロスオリジン・フォント）、相同（同一生成元のフォントを）必要とフォントを可能にします。
  • <frame> そして、  <iframe>任意のリソースのロード。サイトでは、クロスドメインの相互作用のこのフォームを防ぐために、X-フレーム・オプションニュースのヘッドを使用することができます。

制限

非相同サイトで、限定されている行動の3種類があります。

  1. クッキー、のlocalStorage、indexDBを共有することはできません
  2. 私たちはお互いのDOM要素を操作することはできません
  3. Ajaxリクエストを送信できません

送信するには、クロスドメインリクエストの問題を解決する方法3。

3.1 JSONP

  • JSONPは、生成されたクロスドメインリクエストリソースを解決するためのソリューションは、非公式のクロスドメインのデータ交換プロトコルを作成するために、開発者に依存して、パディングとJSONの略です。

  • クロスドメインスクリプトタグの実装に基づいて、

    <!DOCTYPE html>
<html>
<head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> var messagetow = function(data){ alert(data); }; var url = "http://192.168.31.137/train/test/jsonpthree?callback=messagetow"; var script = document.createElement('script'); script.setAttribute('src', url); document.getElementsByTagName('body')[0].appendChild(script); </script> </head> <body> </body> </html>

  • クロスドメインのjQueryに基づきます

    $.ajax({
     type : 'get',
     url:'http://192.168.31.137/train/test/testjsonp',
     data : { name : name, sex : sex, address : address, looks : looks, }, cache :false, jsonp: "callback", jsonpCallback:"success", dataType : 'jsonp', success:function(data){ alert(data); }, error:function(data){ alert('error'); } });

3.2 CORS [推奨]

  • CORS（クロスオリジンリソースの共有、クロスドメイン・リソースの共有が）リソースは、ドメイン、ブラウザとサーバー間でアクセスしなければならない定義が通信する方法でなければならないことW3Cの標準である（クライアントとサーバーの同時処理が必要）。
  • CORS 2つの要求、シンプルかつ非単純な要求を要求。

単純な要求

  • 単純な要求は何ですか？

    只要同时满足以下两大条件，就属于简单请求。

（1）请求方法是以下三种方法之一：
  - HEAD
  - GET
  - POST
（2）HTTP的头信息不超出以下几种字段：
  - Accept
  - Accept-Language
  - Content-Language
  - Last-Event-ID
  - Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

  • 単純な要求のCORSを達成

    1.前端不需要进行特殊的操作
2.后端需要加入请求头Access-Control-Allow-Origin，代码如下：
    def get_time(request): if request.method == 'GET': ntime = time.strftime('%Y-%m-%d %X') obj = HttpResponse(ntime) obj['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8001' return obj

複雑な要求

  • 2つの要求、送信データを開始する前に、第1の予備スクリーニングを行うことを要求され、そして後にのみデータの送信などの要求を送信することにより、事前のスクリーニング。

    - 请求方式：OPTIONS
- “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息
- 如何“预检”
  => Access-Control-Allow-Origin（必含）
     设置为'*',允许所有域名访问
     一般设置为指定域名，如：'Access-Control-Allow-Origin:http://192.168.12.87'
  => 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过
        Access-Control-Request-Method
  => 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过
        Access-Control-Request-Headers

  • 複雑な要求を実現

    フロント

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<button id="a" class="btn btn-success">go</button>
<script>
    $("#a").click(function () {
        $.ajax({
            url:'http://127.0.0.1:8000/money/',
            type:'post',
            contentType:'application/json',
            data:{"name":"yjh"},
            success:function (data) {
                alert(data)
            }
            }
        )
    })
</script>
</body>
</html>

    楽屋

    from django.http import QueryDict
def get_money(request,response): if request.method == 'OPTIONS': response['Access-Control-Allow-Origin'] = '*' # 允许所有域名访问，一般会设置成指定的域名 response['Access-Control-Allow-Headers'] = 'Content-Type' # 复杂请求添加的头信息 response['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8001' return response

グローバルコンフィギュレーション

  • グローバルコンフィギュレーションは、ミドルウェアに書き込むことができ、ブラウザが無効の場合は、データリターンでレスポンスヘッダを追加できるように、受信したリターンデータは、発生しているので、書き換えミドルウェアprocess_response方法

  • ステップ：PYファイルを書かれた次のコードでは：

    from django.utils.deprecation import MiddlewareMixin
class CorsMiddleWare(MiddlewareMixin): def process_response(self,request,response): if request.method=="OPTIONS": response['Access-Control-Allow-Origin'] = 'http://localhost' response["Access-Control-Allow-Headers"]="Content-Type" response["Access-Control-Allow-Origin"] = "http://localhost:8080" return response

  • ステップ2：settings.pyに設定ファイルに登録されたアドオンのミドルウェア

    MIDDLEWARE = [
    'app01.my_middleware.CorsMiddleware',  # 在第一行写是因为django中间件的执行顺序，process_response倒序执行
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', ]

おすすめ

転載: www.cnblogs.com/xinghaonan/p/12072663.html
おすすめ
Arc Browser for Windows 1.0 が正式に提供開始
1990 年代生まれのプログラマーがビデオ移植ソフトウェアを開発し、1 年足らずで 700 万以上の利益を上げました。結末は非常に懲罰的でした。
ランキング
パフォーマンスプロファイラを実装する機能のようなCPPマクロ| C ++コードのパフォーマンステストを簡素化するためにマクロを使用する方法
クリック率を推定するための「特効薬」はありませんが、モデル構造よりも重要なことは何ですか？
Flink的重启策略（RestartStrategy）实战
Implementado en base a la tecnología de reconocimiento de huellas de voz Qualcomm SOC
Android custom encryption and decryption for playing audio and video (m3u8 independent encryption)
Oracleマルチテーブル結合クエリ、統計的合計、グループ化
MapReduceのワークフローと動作原理
ボタンを複数回押したときはどうすればサウンドのオーバーラップをすることができますか？
導出と理解SVM
Mac に Appium をインストールする
アーカイブ
もっと
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(31)
2024-04-24(30)

コードワールド

© 2018 codetd.com