Jsonp クロスドメイン原理の詳細な説明と簡単な適用-jsチュートリアル-php.cn

Jsonp クロスドメイン原理の詳細な説明と簡単な適用

藏色散人

リリース： 2020-01-30 19:08:46

転載

3311 人が閲覧しました

ブラウザの同一生成元ポリシー:

同一生成元ポリシーは規約であり、よく知られたセキュリティポリシーです。 Netscape によって提案され、同じソースからロードされたドキュメントまたはスクリプトが別のソースからのリソースと対話する方法を制限します。これは、潜在的に悪意のあるファイルを隔離するための重要なセキュリティメカニズムです。

同じオリジンの定義: 2 つのページのプロトコル、ポート (指定されている場合)、およびホストが同じ場合、2 つのページは同じオリジンを持つことになります。これを「プロトコル/ホスト/ポートタプル」、または単に「タプル」と呼ぶこともできます (「タプル」、「要素」とは、(1, 2) など、全体を形成するためにグループ化されたいくつかのものを指します)はバイナリ、(1, 2, 3) はターナリと呼ばれます)

プロトコル、ポート、ホスト(ドメイン名またはIPアドレス、IPアドレスの場合はルートドメイン名とみなされます) )、サブドメイン名、そのうちの 1 つが異なる場合、リクエストにはクロスドメインの問題が発生します。

次の表は、http://store.company.com/dir/page.html に関連した同一オリジン検出の例を示しています。

Jsonp クロスドメイン原理の詳細な説明と簡単な適用

同一生成元ポリシーの制限を突破する:

1. script タグの src/img タグの src、または href制限付き

2、srcまたはhrefにリンクされた静的リソースは本質的にgetリクエストです

JSONPとは何ですか? json に関連していますか?

Json (JavaScript Object Notation) は軽量のデータ交換形式です。

JSONP は JSON with Padding の略称です。これは、サーバー側でスクリプトタグを統合してクライアントに返すことを可能にする非公式の送信プロトコルであり、JavaScript コールバックの形式でクロスドメインアクセスを可能にします。

JSONP の簡単な実装:

html コード: (http://zrcloud.com/test.html でローカルで実行)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jsonp简单实例</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h3>JSONP简单实例</h3>
<script type="text/javascript">
  $(function() {
    $.ajax({
      type:&#39;get&#39;,
      async:false,//同步请求
      url:&#39;http://mqcms.com/test.php&#39;,
      dataType:&#39;jsonp&#39;,
      jsonp:&#39;callback&#39;,//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
      jsonpCallback:&#39;test&#39;,//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
      success:function(data){
          console.log(data);
      }
    })
  })
</script>
</body>
</html>

ログイン後にコピー

PHP サーバー側コード:

<?php
header(&#39;Content-Type:application/json; charset=utf-8&#39;);
$callback =isset($_GET[&#39;callback&#39;]) ? trim($_GET[&#39;callback&#39;]) : &#39;&#39;;
$arr=[&#39;name&#39;=>&#39;test&#39;,&#39;age&#39;=>18,&#39;sex&#39;=>1];
echo $callback.&#39;(&#39;.json_encode($arr).&#39;)&#39;;
?>

ログイン後にコピー

実行結果:

注:なぜ今回はテスト関数を書かなかったのでしょうか?そして実際にそれはうまくいきました！

これは jQuery の貢献です。jquery が jsonp タイプの ajax を処理するとき (jquery は jsonp を ajax に分類しますが、実際には同じものではありません)、自動的にコールバックを生成します。関数を作成してデータを取り出します。呼び出す成功属性メソッド。 Jsonp クロスドメイン原理の詳細な説明と簡単な適用