XMLHttpRequest->ドメイン制限とXSS-->エージェント

5531 ワード
javascript
XHRオブジェクト:
XMLHttp Requestオブジェクトは何ですか?XMLHttpRequestオブジェクトはバックグラウンドでサーバとデータを交換するために使用されます.XMLHttpRequestはAJAXの基礎です.XMLHttpRequestオブジェクトはW 3 Cの標準ですか?W 3 Cの推奨基準はいずれもXMLttpRequestオブジェクトを規定していません.AJAX要求とブラウザ要求の違い?本質的には、Ajaxであれ、ブラウザ要求であれ、HTTPに基づく一問一答プロセスである.機能上、ブラウザ要求(js、css、画像、フォーム提出)とAjax要求は、いずれもCookie情報を携帯しています.しかし、ブラウザでは、静的リソース要求および提出フォームは同源政策によって制限されず、Ajax要求は同ソースポリシーによって制限される.ajax要求とブラウザ要求はどうやって区別しますか?Request.IsAjaxRequest方法によってajaxからの要求かどうかを判断できます.ajaxからの要求はもう一つのプロトコルヘッダX-request-With:XMLtpRequestです.
XHR送信要求と受信応答:
要求をサーバーに送信する場合、XMLtpRequestオブジェクトのopen()とsend()を使用します.
// open         、URL           。
// send           。data    POST   。
var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://www.baidu.com?t='+Math.random(), true) 
xhr.setRequestHeader("Content-type","xxx") //    HTTP  
xhr.send(data)
サーバーからの応答が必要な場合は、XMLHttpRequestオブジェクトのレスポンスTextまたはレスポンスXML属性を使用します.サーバーからの応答がXMLでない場合は、レスポンスText属性を使用してください.
readyState    XMLHttpRequest     。  0（      ）   4（     ，      ）     。
status    HTTP     ， 1xx(hold on) 5xx(I fucked off)。
   readyState    ，     onreadystatechange   。
onreadystatechange       4  （0 - 4）,    ： 0-1、1-2、2-3、3-4。

 readyState  4     200  ，       ：
xhr.onreadystatechange = function()  {  
  if (xhr.readyState ==4 && xhr.status==200)  {
   console.log(xhr.responseText) 
  }  
}
最も簡単な解決方法はJSONP:JSONP:GETのみサポートし、POST要求代理はサポートしていません.JSONPは最も柔軟であり、最も一般的な方法原理でもある.ブラウザはXHR(XMLHttpRequest)に対してのみ要求が制限されているが、scriptタグSrc属性、linkタグref属性、およびタグSrc属性に対してはこのような制限がなく、この「脆弱性」を利用すれば、クロスドメイン要求をうまく解決することができる.JSONPとは、scriptタグの同源制限がない特徴を利用して実現されたもので、第三者サイトに要求する場合、この要求をラベルのsrc属性に置くことができます.これは私たちが普通のJSスクリプトを要求するように、異なるサイトに自由に要求できます.p>
<pregt;lt;codet>lt;script type="text/javascript"src="http://www.baidu.com/?callback=hello'>
function hello{res}
consolie.log(res)
)
上記のコードの実行後、以下のエラーがありました.Cross-Origin Read Blocking(CORB)blocked cross-orrigin reponse https://www.baidu.com/?callba... with MIME type text/html
なぜブラウザはドメインをまたぐアクセスを制限しますか？
ブラウザがいつでも利用者がインターネットアプリケーションを利用し始めたら、このアプリケーションはこのユーザーを攻撃しようと試みています.つまり、インターネットアプリケーションはデフォルトでは信頼できません.最初にブラウザを強制的に不信任のインターネットアプリケーションという設計思想の攻撃方式を採用しました.クロススクリプトによるXSS攻撃（Cross Site Scrippting）の一般的な方法：1、巧妙な方法で悪意のある命令コードをウェブページに注入し、ユーザーに悪意のあるコードをロードさせ、実行させる.例えば、動的ページに挿入された内容にはこれらの特殊文字が含まれています.(例えば、2、ユーザが不明なリンクをクリックして攻撃サイトにアクセスし、攻撃サイトがJavaScriptスクリプトを実行し、ユーザ機器上のデータにアクセスして、攻撃者サーバに送信します.サイドスクリプト攻撃は多くのバリエーションがあります.ここでは最も一般的な考え方です.
同源政策は駅をまたぐ資源の共有を遮断し、攻撃を低減する。同源政策(Same Origin Policy、SOP)は、あるサーバからの「ソース」を言います.このサーバからのプログラムのデータは、他のソースからのデータとは別です. ， JavaScript ， ， ， ， 。-百科同源ポリシーは、データの融合を遮断します.例を挙げると、政府が大量のオープン公共データを公開し始めると、多くの異なるオープンデータサイトからデータをロードし、データの「融合」を提供するサイトがあります.――多くの異なるソースのデータを組み合わせて可視化し、単一のデータソースでは提供できない洞察力をユーザーに享受させる.
クロスドメイン資源共有CORS（Cross-Origin Resource Sharing）は、セキュリティクロスステーション資源共有を提供し、データ融合を実現する： CORSは、ソースサーバに対してブラウザを許可するW 3 C規格であり、XMLHttpRequest要求を発行することによって、AJAXは同じソースしか克服できません.CORSはブラウザとサーバが同時にサポートする必要があります.現在、すべてのブラウザはこの機能をサポートしています.IEブラウザはIE 10より低くてはいけません.CORS通信プロセス全体は、ブラウザが自動的に完了し、ユーザが参加する必要がありません.開発についています.CORS通信と同源のAJAX通信は同じで、コードは全く同じです.ブラウザがAJAXがソースをまたぐことを要求すると、追加のヘッダ情報が自動的に追加されます.追加の要求が一度以上発生することもありますが、ユーザーは感じられません.したがって、CORS通信を実現する鍵はサーバです.サーバがCORSインターフェースを実現すれば、ソースをまたぐ通信ができます.つまり、CORS通信を実現する鍵はオープンデータのリリース者を変更することであり、ブラウザメーカーはHTTP応答においてオープンデータのために特殊なCORSヘッダを追加することを要求する:
1、   （  ）
Access-control-allow-Origin: * //       
Access-control-allow-Origin: http://www.xx //       
2、    （       ）
Access-Control-Allow-Methods: GET, POST, PUT //                  
2、     （    Access-Control-Request-Headers   ）
          ，CORS                          。       ，          ：
Access-Control-Allow-Headers: Authorization, User...
3、Cookie  （  ）
CORS       Cookie HTTP    。    Cookie     ，         ，  
Access-Control-Allow-Credentials: true
    ，      AJAX     `withCredentials`  。
ブラウザはCORS要求を2つに分類します.簡単な要求と簡単ではない要求は両方ともヘッダ情報の中にOriginフィールドを追加します.簡単な要求に対しては、ブラウザが直接CORS要求を発行します.簡単ではない要求のCORS要求は、正式な通信の前にOptionsメソッドHTTPクエリ要求を追加します.「プレレビュー」要求(preflight)といいます.を選択します.ブラウザはまずサーバに問い合わせてみます.現在のウェブサイトのドメイン名はサーバーの許可リストの中にありますか?また、どのHTTP動詞とヘッダ情報フィールドが使えますか?
JSONPと比較すると、CORSはJSONPの使用目的と同じですが、JSONPよりも強いです.JSONPはXMLHttpRequestの要求のみサポートしています.CORSはすべてのタイプのHTTP要求をサポートしています.JSONPの利点は、旧式のブラウザをサポートすることと、CORSをサポートしないウェブサイトにデータを要求することです.
プロキシ:
ドメインをまたぐCORS標準方法に加えて、プロキシによって解決することもできます.nodejsとinxは逆代理でドメインをまたぐ問題を解決できます。は、ページリソースをHTTPサーバに置くと、ページのインターフェース要求はすべて相対アドレスを使用します.このように、ウェブサイトのすべての要求はHTTPサーバに進みます.HTTPサーバは要求路径(例えば、ルーティングモジュール)に従います.を区別して処理を行い、静的リソースを要求すると直接に戻り、インターフェース要求であればHTTPサーバエージェントによって要求が開始され、結果を得てからページインターフェースに戻り、クロスドメインが実現される.
npmのグローバルモジュールのインストール権限問題を修正します.