ホームページ >ウェブフロントエンド >htmlチュートリアル >なぜ jsonp はドメインを越えることができるのでしょうか? この tomb_html/css_WEB-ITnose を盗んでみましょう。
なぜ jsonp はドメインを越えることができるのでしょうか? この tomb_html/css_WEB-ITnose を盗んでみましょう。
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-21 09:00:371356ブラウズ
最近「ランプを吹くゴースト: ドラゴンの秘密」を観たかわかりませんが、プロットは良くありませんが、IMAX-3D 効果は非常に優れていると思います。 、効果はあります。さて、今日も墓荒らしをします。なぜjsonpがドメインを越えることができるのかを掘り下げます。この記事を読んだということは、クロスドメインについてよく知っているはずです。簡単に言えば、それは異なるドメインからリソースをリクエストすることを意味します。しかし、それはどのようにしてクロスドメインを構成するのでしょうか? この問題については、「White Hats Talk about Web Security」という本で詳しく説明されているようですので、この記事では詳しく説明しません。
基本的な考え方
3f1c4e4b6b16bbbd69b2ee476dc4f83a タグが src 経由で js ファイルをインポートできることは誰もが知っています。もちろん、js ファイルをインポートできるだけでなく、多くのリソースもインポートできます。たとえば、以下を見てください:
これは、新浪汽車ホームページの新浪自動ギャラリーを紹介する php ファイルです。 ip.php を開くと、次の情報が返されます (実際には、JS コードの一部、2 つの JS メソッド get_city と get_ip_city):
クロスドメイン インターフェイスを開発またはデバッグしたことがある場合は、基本的に jsonp であることがわかるでしょう。 json にはコールバック関数と呼ばれるコールバック パラメーターがありません。このコールバック関数によって穴が決定されたので、ここから掘り始めます。
インターフェース
全員のテストを容易にするために、私はインターフェースを個別に作成しません。既製のものを探しましょう:
http://news.auto.sina.com.cn/m/label/get_label_info.php?label=%E8%BD%A6%E8%81%94%E7%BD%91&length=1&page=1&callback=callback
このインターフェースはクロスをサポートします。ドメイン。次は掘り始めましょう。
クロスドメインのテスト
インターフェイスがクロスドメインをサポートし、その他の制限がない場合、このインターフェイスはどこからでも呼び出すことができることを意味します。新しい test.html ファイルをローカルに作成します。ファイルの内容は次のとおりです。
<html><head><script src="http://news.auto.sina.com.cn/m/label/get_label_info.php?label=%E8%BD%A6%E8%81%94%E7%BD%91&length=2&page=1&callback=func"></script></head><body></body></html>
上記のファイルを Chrome で開き、右クリックして要素を確認すると、エラー メッセージが表示されます。エラー メッセージをクリックすると、次の画像が表示されます。
実際、このエラー メッセージは、関数が定義されていないことを示しています。実際、これは、渡したコールバックのパラメーターが未定義であることを意味します。では、これはどこで定義する必要があるのでしょうか?もちろん、HTML ページでは、HTML で定義します。コードは次のとおりです。
<html><head><script>function func(data){ console.log(data);}</script><script src="http://news.auto.sina.com.cn/m/label/get_label_info.php?label=%E8%BD%A6%E8%81%94%E7%BD%91&length=2&page=1&callback=func"></script></head><body></body></html> 上記のコードに func メソッドを追加しました。このメソッドはパラメーターを受け取り、受信した値をコンソール。上記のコードを Chrome で実行し、ソース コードを確認します。結果は次のようになります。
今回はエラーは報告されず、戻り値は予想どおりコンソールに出力されました。 , ここで、値は実際には json 形式です。
js の jsonp リクエスト
ここでは、jQuery.ajax() メソッドを使用して、上記のインターフェイスに jsonp リクエストを実行するようリクエストします。もちろん、XMLHttpRequest/ActiveXObject を使用することもできますが、互換性に注意してください。コードは次のとおりです:
<html><head><!-- 引入jquery包 --><script src="http://code.jquery.com/jquery-1.11.3.min.js"></script><script>$(function(){ $.ajax({ url: 'http://news.auto.sina.com.cn/m/label/get_label_info.php?label=%E8%BD%A6%E8%81%94%E7%BD%91&length=2&page=1', dataType:'jsonp', success:function(res){ console.log(res); } });});</script></head><body></body></html> Chrome で上記のファイルを開き、要素を検査します (ページを更新することを忘れないでください)。結果は次のようになります:
謎を解き明かし、宝物を発見
上記の 2 つの方法を体験したら、おそらくすでに答えがわかっているでしょう。答えは、js はクロスドメイン コードを導入して実行できますが、jsonp はコールバック関数を使用してリモート リソースとローカル js コードをリンクすることはできません。コールバック関数はローカルですが、コールバック関数の実行とパラメータの受け渡しはリモートで実装されます。言い換えると、jsonp はコードを返しますが、json はデータを返します。ブラウザはセキュリティ上の理由からクロスドメイン データ要求を許可しませんが、リモート コードの実行には制限がありません。
バックエンド開発者は、次のコード (PHP バージョン) を記述します。
echo $callback."(".json_encode(['data']).")"; 実際、これは、 js メソッド、js の呼び出し コード内のコールバック メソッド。json の文字列を返すだけの場合は、データを返します。 JS 開発者は、jsonp によって返される値が JS コードの一部であることに注意する必要があります。これは危険です。たとえば、コールバックの前に while(1){} を追加すると、コードが次のようになります。他人のインターフェースを簡単に使用しないでください。さらに、jsonp は POST ではなく GET を通じてのみ送信できることを皆さんに思い出していただく必要があります。
作業を終えて、今日は jsonp がどのようにクロスドメインを完成させるかを 2 つの角度から考えました。実際、このプロセスを徹底的に理解したい場合は、試してみるのが最善です。