2025-01-31 SPAセキュリティ

徳丸先生のSPAセキュリティの講演を聞いたのでメモ。

資料: https://www.docswell.com/s/ockeghem/ZM6VNK-phpconf2021-spa-security/1

メモ

JavaScript で複数サーバをまたがって通信する（XMLHttpRequestやFetch API）場合には CORS(Cross-Origin Resource Sharing) の理解が不可欠
CORS ヘッダ
- 【必須】Access-Control-Allow-Credentials: true
- 【必須】Access-Control-Allow-Origin: http://www.example.org
- Access-Control-Allow-Origin: * ではレスポンスを受け取れない
Firebaseを用いたSPAのサーバー構成
- Firebase Hosting: 静的ファイルのホスティング
  - https://www.example.com
  - HTML、画像、CSS、JavaScript
- API
  - firestore.googleapis.com
  - JSON
- 認証サーバー
  - https://identitytoolkit.googleapis.com
  - JWT等
ステートフルなトークンはセキュリティ要件を満たしやすい
- 完全なログアウトのためには、トークンの削除をする
- パスワード変更時に既存セッションを破棄する
ケーススタディ: ChatWork
- JWT形式を採用したChatWorkのアクセストークンについて - kubell Creator’s Note
  - Artifact
    - トークンにはメタデータを保持せずIDのみ。メタデータはサーバ側のストレージに持つことが一般的
  - Assertion
    - メタデータをすべて内包する形式。JWTはその代表格。

JWTのヘッダ形式

<Header>.<payload>.<signature>のフォーマット。

GET /api/user HTTP/1.1
Host: example.com
Authorization: Bearer eyJhbxxxxxx.eyJzdWxxxx.SflKxwxxx

ペイロードの例は下記

{
  "iss": "https://securetoken.google.com/firebbs-XXXXX",  // JWTの発行者 (issuer) の識別子
  "aud": "firebbs-XXXXX",                                 // JWTの受取先
  "auth_time": 1632916659,                                // 認証日時 (エポックタイム)
  "sub": "MhdJidRysBNPdHQ1zHIIaGE363y2",                   // ユーザーの一意な識別子 (不変のもの)
  "iat": 1632966032,                                      // JWT発行日時 (エポックタイム)
  "exp": 1632969632                                       // JWTの有効期限 (エポックタイム)
}