IdeaValue

Cookie の Secure・HttpOnly・SameSite 属性の設定方法

執筆：IDEAVALU運営 · 更新：

ログイン状態を保つ Cookie が盗まれると、パスワードがなくてもその人として操作されます。3つの属性で、盗まれる経路を減らせます。

3つの属性の役割

それぞれ、防ぐ経路が違います。

  • Secure：暗号化された HTTPS の通信でだけ Cookie を送ります。
  • HttpOnly：JavaScript から Cookie を読めなくします。XSS が起きても Cookie を盗まれにくくなります。
  • SameSite：他のサイトから送られたリクエストに Cookie を付けるかを決めます。Lax にすると、他サイトからのフォーム送信などに Cookie が付かず、CSRF を防ぎやすくなります。

自分で確認する方法

ブラウザの開発者ツールの「Application」（Firefox は「ストレージ」）→ Cookies で、各 Cookie の Secure・HttpOnly・SameSite の列を確認できます。curl なら Set-Cookie ヘッダーを表示します。

Set-Cookie を表示する

curl -sI https://example.com | grep -i set-cookie

直し方

Cookieの属性

Cookie に Secure・HttpOnly・SameSite を付けます。

Next.js（Route Handler / Server Action）の場合

const cookieStore = await cookies()
cookieStore.set('session', value, {
  secure: true,
  httpOnly: true,
  sameSite: 'lax',
  path: '/',
})

JavaScript から読む必要がある Cookie（表示設定など）以外は HttpOnly にしてください。ログイン用のトークンを localStorage や HttpOnly なしの Cookie に置くと、XSS で盗まれます。

よくある質問

ログイン用のトークンを localStorage に保存してもよいですか？
localStorage は JavaScript から読めるため、XSS が起きると盗まれます。可能なら HttpOnly の Cookie に保存してください。Supabase など、認証ライブラリの推奨する保存方法にも従ってください。
Cookieの Secure・HttpOnly・SameSite 属性の設定方法 | IDEAVALU