ウェブを知っている: SOP (同じ起源政策)


おい人々!このポストでは、我々はSOP(同じ起源方針)について学びます.
SOPが何であるか、そしてなぜ我々がそれを必要とするかを理解する前に、質問をしましょう

もし何が起こるか


私がアクセスしようとするならばiframe JSを使用してコンテンツ?見つけましょう.
<body>
<iframe name="my_frame" src="http://google.com/webhp?igu=1"></iframe>
</body>
そして、それをあなたのブラウザーで開きます.今ではdev - toolsコンソールに向かい、JSを使ってアクセスしてみてください.
frames.my_name.document
ブーム!エラーです:

VM1678:1 Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
at :1:17


注意してください、私たちのウェブサイトの起源がブラウザにマッチしないので、それはクロス・フレーム・フレームにアクセスすることからブロック化されたフレームを言います.

同じ起源方針


MDNドキュメント

The same-origin policy is a critical security mechanism that restricts how a document or script loaded from one origin can interact with a resource from another origin. It helps isolate potentially malicious documents, reducing possible attack vectors.


それで、彼らが言うことはかなり明確です、しかし、起源は何ですか?つの起源が同じかどうか知っていますか?

起源はプロトコル/スキーム、ホスト名とポート番号の組み合わせです.

OR

今、URLと起源と混乱しないように、両方が異なっている.ヘッドオーバーhttp://example.com/abc/def . コンソールで次のようにします.

巻き毛のブラケットを描くのは難しい😅 しかし今、あなたはURLと起源の違いを見ることができます.
同じ起源と十字起源を理解する例は、ここにあります
オリジナル
オリジナル2
起源または同じ起源
http://example.com:80/
http://example.com/
HTTPのデフォルトポート番号は80です
http://example.com:80/
ポート、プロトコル、およびホスト名と同じ起源は同じです
https://example.co:80/
プロトコルとしてのクロス起源は異なります.オリジナル- 1はHTTPとオリジナル
http://www.example.com:80/
Origin - 2としてのクロス起源はサブドメイン( WWW )
http://example.net:80/
ホスト名のトップレベルドメイン(. com、. net)としてのクロス起源は一致しません
上記の表から、私たちは、2つの起源が同じであると結論することができます、それらのプロトコル、ホスト名、およびポート番号(言及されるならば)は同じでなければなりません.上記の例を試してみましょうlocation.href and location.origin ブラウザコンソールで.
我々は、なぜ我々が内部のコンテンツにアクセスすることができなかったかを説明することができますiframe 最初の質問では、我々は尋ねました.私たちのウェブページの起源とiframeの中のウェブサイトのそれは異なりました.起源が同じであるとき、iframe内容にアクセスしようとしましょう、ここでは単純なノードJSサーバーです:
//index.js
const app=require('express')();
const path=require('path');

app.get('/',(req,res)=>{
   res.sendFile(path.join(__dirname+'/main.html'));
});

app.get("/abc",(req,res)=>{
    res.send("Hi! I am inside iframe.");
});

app.listen(8080,(err)=>{
   if(err) console.log(err);
   console.log(">8080<");
});
and
<!--main.html-->
<body>
    <h1>Hi! I contain an iframe</h1>
    <iframe name="my_local_frame" src="/abc"></iframe>
</body>
走った後にhttp://localhost:8080 . 我々は、iframeのコンテンツとブームにアクセス!間違いありません.

起源をチェックするならば


ああ、それで、物事は現在かなりきれいです.あなたは、どのようにウェブページがCDNSから外部のスクリプトとリソースを読み込むことができるかを尋ねるかもしれません、彼らの起源は一致しません.それはむしろブロックするべきです.
それはなぜそれをブロックだろうか?
SOPの目的はスクリプトの動的な読み込みを妨げることではなく、あるサイトからスクリプトが他のサイトのデータにアクセスするのを防ぐことである.

セキュリティ


仮定して、同じ起源方針は存在しませんでした.
あなたが訪問しましょうtarget.com , ログインすると、有効なセッションクッキーを取得し、ログアウトせずに残します.
次に、あなたはevil.com あなたを偽装しようとすると悪の要求を送信するtarget.com (ブラウザから)あなたが決してログアウトしなかったので、あなたはまだ有効なセッションクッキーを持っていますtarget.com ), ターゲットは、あなたのブラウザを認識します.これをCross-Site Request Forgery (CSRF) . この攻撃を使用して、攻撃者はあなたの個人的な詳細にアクセスしたり、アカウントの資格情報を変更してしまうかもしれません.
これはSOPが遊びに来るところです.
悪の要求はあなたのブラウザによってブロックされませんがtarget.com CSRF攻撃に対してそれ自体を保護するために、応答は利用できませんevil.com .
だからtarget.com は、あなたの個人情報を要求するCSRF攻撃のために故障していますevil.com その情報を見てください.
それはSOPがするものです、そして、それはこのポストのためにすべてです.改善を提案し、間違いを指摘してください.