クロスサイト・リクエスト


クロスサイト・リクエストとは

  1. 現在の(アドレスバーの)ドキュメントがあって、
  2. そこから別のドメインへのリクエスト

画面遷移あり: ドキュメントが入れ替わる

画面遷移なし: 別のドキュメントを内部で利用

CORS


警戒すべき理由

攻撃: クロスサイト・リクエストフォージェリ(CSRF)

攻撃: クロスサイト・スクリプティング(XSS)

(XSSはクロスサイト・リクエストでなくてもリスクあり)


単純なGETかつ画面遷移する場合

=> 比較的には安全


CSRFの対策

セッション情報を必須に

注意: cookie自動付加

  1. サイトA: ユーザがログイン (ログアウトせず)
  2. 攻撃者サイト: ユーザが訪問
    • サイトAへクロスサイト・リクエスト (画面上はこっそりと)
    • cookie自動付加
  3. サーバが処理してしまう

XSSの対策


同一オリジンポリシー

fetch()する側 == される側

同一オリジン == プロトコル・ドメイン・ポートがすべて同じ

クロスオリジンfetch()のレスポンスをブロック


画面遷移系と埋め込み系はクロスサイトほぼ許可

画面遷移系タグ

埋め込み系タグ


fetch()のレスポンス利用制限とは

リクエストはできる

レスポンスもブラウザに届く

それを現ドキュメントで内部利用できない

fetch('http://別オリジン.example.com/パス', init).then(
  res => res.text() // この中に到達せずエラー
).then(console.log).catch(console.error)

=> 注意: 「リクエスト到達 == 攻撃成功」の場合あり


localStorageの制限内容

別オリジンへ許可できない

XSSに注意


cookieの制限内容