mongolyyのブログ

開発(Javascript, Typescript, React, Next.js)や開発手法(スクラム, アジャイル)、勉強したことについて色々書ければと。

「フロントエンド開発のためのセキュリティ入門」を読んだ

はじめに

メーカーのコーポレート部門でテックリードをしているモンゴルです。
最近はフロントエンド開発をメインにやっていることもあり、今回、「フロントエンド開発のためのセキュリティ入門」を読んだので感想を書いていこうと思います。

感想

ブラウザが守ってくれている

次のような機能は本書を読んで知りました。

  • 許可されたHTTPメソッドを含むリクエストが飛ばないようにプリフライトリクエストが事前に飛ぶ場合がある
  • 異なるオリジンで許可されていないレスポンスについてはJSに渡さないという制御が入っている
  • サイドチャネル攻撃から守るために、レンダリングプロセスがドメインごとに独立している

安全なWebアプリを作るためにはユーザー側が安全なWebブラウザを使っていることが前提になるし、一般公開されたサイトの場合は脆弱性を含むブラウザからのリクエストに対して最悪な事態にならないように設計する必要があるなということが分かりました。

ReactでもXSSは気をつける必要がある

Reactを使っているとXSS対策が組み込まれていて、 dangerouslySetInnerHTML を使わない限り気にする必要はないと思っていました。
しかし、本書を読んでjavascriptスキームのXSSはコンソールで警告が出るものの、機能的に防いではいないということを知りました。

azukiazusa.dev

クリックジャッキングなども防げるという理由から、私がよく使うNext.jsを使う場合、理由がない限りCSPは設定した方が良さそうだと感じました。

nextjs.org

おわりに

ハンズオンがあったのがすごくよかったです。
個人的にはただ文字を追うだけだと、ちゃんと理解できず想像で補完しながら読むことが多かったので助かりました。

ハンズオンがあってわかりやすいので、フロントエンド開発をしているエンジニアの方は、自分が分かっていない項目だけでいいので読むことをお勧めします。