ugo's 読書感想文

読んだ本のまとめや学んだことを書いていきます。

フロントエンド開発のためのセキュリティ入門

概要

フロントエンド開発のためのセキュリティ入門 知らなかったでは済まされない脆弱性対策の必須知識

フロントエンド開発のためのセキュリティ入門 知らなかったでは済まされない脆弱性対策の必須知識

Amazon

フロントエンドエンジニアとしてのセキュリティの知識を身に付ける必要がある。

当然、フロントエンドで発生しうるセキュリティ問題は多い。

XSSや、クリックジャッキングなど、一歩間違えば大きな問題につながる。

その手法や、対応策を知ることが重要になり、当書はその入門にはうってつけの本となっている。

別でガッツリまとめたのだが、こちらでも軽くまとめようと思う。

扱う内容

  • HSTS(HTTP Strict Transport Security)について
  • Same-Origin Policy
  • CORS
  • プリフライトリクエスト
  • サイドチャネル攻撃
  • CSP(Content Security Policy)
    • Trusted Types
  • CSRF
  • クリックジャッキング
  • オープンリダイレクト
  • 認証

基本的に全ての項目でハンズオンを用意してあり、実際に自分で手を動かして脆弱性を仕込んでみたり、対策したりできたのがよかった。

ハンズオンには

バックエンドにExpressを使用し、ルーティングとミドルウェアを使用。

フロントはHTMLをそのまま使う時もあれば、ejsなどのテンプレートエンジンを使うこともあり。

各項目

HSTS

ユーザーにHTTPS通信を強制すること

mixed content

httpsの通信の中で、httpを含む通信が起こった時に、http通信が傍受され、改竄される危険性がある脆弱性

active mixed content

javascriptやcssといったブラウザ上でコードが実行されるリソースに対するmixed content

Same-Origin Policy

他のWebアプリケーションからのアクセスを制限する。

制限されるリソース - JavaScriptを使ったクロスオリジンへのリクエストの送信 - JavaScriptを使ったiframe内のクロスオリジンのページへのアクセス - クロスオリジンの画像を読み込んだ要素のデータへのアクセス - Web StorageやIndexedDBに保存されたクロスオリジンのデータへのアクセス

CORS

クロスオリジンへのリクエストを可能にする仕組み

Access-Controll-Allow-Origin ヘッダを使うことで許可を行うことができる

ただし、これはレスポンスのリソースへのアクセスをJavaScriptに許可するものである。

プリフライトリクエスト

副作用を伴うリクエストは安全とは言えないので、事前に送信しても問題ないかブラウザからサーバへ問い合わせを行う。

事前問い合わせのリクエストの結果をもとに、ブラウザはリクエストがサーバから許可されている内容かどうかを確認、

サーバから許可されていれば本来のリクエストを送信する。

プリフライトには OPTIONS メソッドが使われる。

リクエスト毎にプリフライトリクエストを送ると大量になるので

Access-Control-Max-Age ヘッダを使って、プリフライトリクエストを送信しない期間を設定することができる。

CORSのリクエストモード

サーバから受け取ったCORSヘッダをもとにリソースへのアクセスを行うだけでなく、

フロントエンドのJavaScriptからCORSでやりとりをするかどうかを指定することもできる。

  • cors CORSの設定がされていない or CORS違反となるリクエストが送信された時はエラーになる。 デフォルト値
  • no-cors 単純リクエストのみに制限される
  • same-origin 同一オリジンのみでやりとりを行う

サイドチャネル攻撃

コンピュータのCPUやメモリといったハードウェアの特性を悪用した攻撃のこと

XSS

Webアプリケーション内の脆弱性を利用して不正なスクリプトを実行する攻撃。

攻撃対象のページ内でJavaScriptを実行するため、同一オリジンポリシーでは防ぐ事ができない。

XSSの仕組み

攻撃者が不正なスクリプトを攻撃対象ページのHTMLに挿入して、ユーザーに不正スクリプトを実行させる。

ユーザーが入力した文字列をそのままHTMLへ挿入することで発生する脆弱性。

XSSの種類

攻撃者が用意した罠から発生するリクエストに対して、不正なスクリプトを含むHTMLをサーバで組み立ててしまうことが原因で発生するXSS

リクエストに含まれるコードをレスポンスのHTML内にそのまま出力することから「反射型XSS」と呼ばれる

不正なスクリプトがリクエストの内容に含まれた時のみ発生するので、「非持続型XSS」と呼ばれる

攻撃者がフォームなどから投稿した不正なスクリプトを含むデータがサーバ上に保存され、その保存されたデータ内の不正なスクリプトがWebアプリケーションのページに反映されることで発生されるXSS

不正なスクリプトを含むデータがサーバ内へ蓄積されていくことから「蓄積型XSS」または「格納型XSS」と呼ばれる

全てのユーザーに影響が出る

「持続型XSS」とも呼ばれる

  • DOM-based XSS

JavaScriptによるDOM操作が原因で発生するXSS

サーバを介さないので攻撃を検知することが難しい

CSP

CSP(Content Security Policy)とは、XSSなど不正なコードを埋め込むインジェクション攻撃を検知して

被害の発生を防ぐためのブラウザの機能

Trusted Types

基本的にはDOM-based XSSは文字列をそのままHTMLへ反映してしまうことが原因で発生する。

innerHTMLや、script.srcの仕様を変更することで、動かなくなるwebアプリケーションもあり問題がある。

そのため、検査されていない文字列をHTMLへ挿入することを禁止する「Trusted Types」というブラウザの機能が提案された。

デフォルトでは無効にされているため、これまでのwebアプリケーションとの互換性を破壊することはない。

  • TrustedHTML
  • TrustedScript
  • TrustedScriptURL

の3つの型がある。

クリックジャッキング

ユーザーの意図しないボタンをクリックさせることで、意図しない処理を実行させる攻撃

方法としては以下のようなものがある。

  1. 攻撃対象のWebアプリケーションのページをiframeを使って罠サイト上に重ねる
  2. iframeの透明な部分にボタンを配置する
  3. ボタンをクリックさせる
  4. ユーザーは罠サイト上のボタンをクリックしたつもりで、実際は透明に重ねられた攻撃対象のページ上のボタンがクリックされる

オープンリダイレクト

Webアプリケーション内にあるリダイレクト機能を利用して、罠サイトなど攻撃者の用意したページへ強制的に遷移させる攻撃。

フィッシングサイトや悪意あるスクリプトが埋め込まれたページへリダイレクトさせられ、機密情報が盗まれるといった脅威がある。

サーバ側でリダイレクト先として利用する場合に発生するが、ブラウザでJavaScriptから画面遷移する場合はも発生する。

まとめ

この記事では細かくはまとめていないですが、実際の本ではより細かい内容や、対策の仕方、実際のコードなどが書かれていて

フロントエンドをやる上で最低限知るべきな脆弱性の紹介がありました。

JavaScriptを扱う関係上、それにまつわる対策が多いですが、ブラウザというフロントが欠かせない媒体を使っている以上、ブラウザの知識というのも必要になってきます。

フロント部分のセキュリティについての情報を追うソースなども紹介もあったりするので

フロントエンドエンジニアの方でこれからセキュリティを学んでいこうという人には良い最初の1冊になるんじゃないかと思います。