Zenn
Open19

フロントエンドセキュリティ本やる

mehm8128mehm8128

ちょっと読んで積んでたけどようやくちゃんとやる

mehm8128mehm8128

WSLだと/etc/hostsの設定しても上手くいかなかったので、生Windowsでやってる

mehm8128mehm8128

4章
単純リクエストって普通にfetch関数でGETとかPOSTとか飛ばすときも含まれるのかと思ってよく分かってなかったけど、imgタグでの画像取得とかformタグで送信するときとか、ブラウザのデフォルト動作の場合のみだった

CORS policyはあくまでもサーバーから取ってきたレスポンスをブラウザ側のjsで利用していいかどうかみたいな制限なので、単純リクエストでない場合はサーバーの処理が実行されるところまではできちゃってまずい（リソースの削除など）。よってpreflight requestを飛ばすことになる

mehm8128mehm8128

formタグでPOSTするときはpreflight request無しにサーバー側で処理が行われてしまうが問題ないのか？

mehm8128mehm8128

前から思ってたけど
Access-Control-Allow-Originに複数オリジンを指定できないのはなぜか？&ワイルドカードはOKなのはなぜか？
Goでサーバー書くときに複数オリジン指定できる何かはあったような気もする

mehm8128mehm8128

「fetchで取得したレスポンスをブラウザで利用していいかどうか」がCORS policyかと思ってたけど、preflight requestありのときはそもそもリクエストを送信していいかどうかという部分までCORS policyに含まれてそうで、結局CORS policyとは何を表すのかが分からなくなってる？言語化むずい

mehm8128mehm8128

ハンズオン

Access-Control-Allow-Headersの追加前
リクエスト

access-control-request-headers:x-token
access-control-request-method:GET

レスポンス

allow:GET,HEAD,POST

追加後
レスポンスに以下が追加されていた

access-control-allow-headers:X-Token

https://zenn.dev/link/comments/a821bb74896c84 で書いた複数指定する方法出てきた
リクエストごとにヘッダーの設定してるからこれでいいのか

mehm8128mehm8128

section 4.7
なんか難しかったので一旦スルー

mehm8128mehm8128

ちょっと戻るけどcrossorigin
fetchのmodeとかcredentialsとかcrossoriginとかあってややこしいけど、結局言いたいことは、CORSを用いることでimgタグなどでも安全にデータの取得をすることができるようになる、みたいな話だと理解した

mehm8128mehm8128

CSP
jsなどのリソースの読み込みを制限するやつ
なんか色々あるけど、主にnonceやhashを使ったStrict CSPと、文字列を検査してからシンクに代入するようにすることを強制するTrusted Typesの2つが紹介されていた

mehm8128mehm8128

CSPハンズオン
CSPを設定したらこう↓なって無事インラインスクリプトが実行されなくなった

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-z19iSvaa+kQhmDklW27JwvQc8KDGxBk3kutkUJEQnZM='), or a nonce ('nonce-...') is required to enable inline execution.

nonceをつけると再び実行された

strict-dynamic
動的に生成したscriptタグでjsを読み込むときはstrict-dynamicが必要とのことだったけど、今回の場合csp.ejsに以下を追加するのでもいけた。これでもいいのか？

script.nonce = "<%= nonce %>";

Trusted Typesも無事動いた

mehm8128mehm8128

理論的にどういう脆弱性があるからこういう対策をしている、というのは理解しているつもりだけど、具体的にどういう攻撃でどうなる、みたいなのがあまり分かってなくて感覚を掴めていないので、具体例を調べてみるとよさそう

mehm8128mehm8128

CSRF
cookieを使って勝手に変な操作されちゃうやつ
別オリジンなら使えないのではって思ってたけど、jsからいじらない or cookieにSameSite属性がついてなければできちゃうのか
トークンの利用、Double Submit Cookie、SameSite Cookie、CORSなどによる対策がある

ハンズオンはDouble Submit Cookieを用いた対策で、cookieとリクエストbodyのトークンが一致するときのみリクエストを受け付けるようにする手法

mehm8128mehm8128

6章の最後はクリックジャッキングとかオープンリダイレクトとか

mehm8128mehm8128

今後TODO

  • 7章以降
  • 飛ばしたsection 4.7
  • もうちょっと具体的な攻撃の例を調べてみる
  • その他諸々分かってないところ調べる

全体的に雰囲気は理解したけど、まだメンタルモデルが構築できていない状態なのと、既に半分くらい忘れた