Webアプリケーションで広く使われるCookieには、セキュリティを高めるための属性がいくつも存在します。その中でもHttpOnly属性は、「JavaScriptからCookieを参照できなくする」ための重要な属性です。

HttpOnly属性を正しく理解すると、なぜXSS（クロスサイトスクリプティング）対策としてCookie保護が重要なのかが見えてきます。

本記事では、HttpOnlyの基本的な意味や仕組み、Set-Cookieで付与される場所、XSSによるCookie盗難との関係を解説し、Cookie設計を安全に考えるための全体像を分かりやすく説明します。

目次

• HttpOnlyとは何か？
• なぜHttpOnly属性が必要なのか
• HttpOnlyの設定方法
  • 基本形：Set-CookieでHttpOnlyを付与する
  • 代表的な属性セット：Path／Domain／Max-Age(Expires)／Secure／SameSite
• HttpOnlyの確認方法（ブラウザ・ヘッダ・運用での見方）
  • 開発者ツールでの確認方法
  • ConsoleでJavaScriptを実行してcookie取得できるかテストする
• HttpOnlyだけでは安全にならない
• まとめ

HttpOnlyとは何か？

HttpOnlyとは、Cookieに付与できる属性の一つで、JavaScriptからのcookie取得を禁止するための設定です。

例えば、サーバが次のようにレスポンスヘッダを返すとします。

Set-Cookie: session_id=abc123; HttpOnly; Secure

この場合、ブラウザにはCookieが保存されますが、JavaScriptで下記のCookie取得プロパティを使用しても、HttpOnly属性が付与されているためsession_id は取得できません。

document.cookie

これにより、脆弱性を悪用してCookieを盗み取る攻撃を防ぐことができます。

なぜHttpOnly属性が必要なのか

HttpOnly属性が必要とされる理由は、クロスサイトスクリプティング（XSS）という深刻な脆弱性からCookieを守るためです。

攻撃者はJavaScriptを実行し、document.cookieによるcookie 取得を狙いますが、HttpOnlyを設定しておけば、この読み取り自体ができなくなり、認証情報の漏えいリスクを下げられます。

参考：クロスサイトスクリプティング（XSS）を図解で理解！攻撃事例と対策を徹底解説

HttpOnlyの設定方法

ここからは、HttpOnly属性の設定方法について解説していきます。

基本形：Set-CookieでHttpOnlyを付与する

HttpOnlyは、サーバレスポンスであるSet-Cookieヘッダで設定します。

次のようにレスポンスを返すことで、CookieにHttpOnlyという属性を付与できます。

Set-Cookie: session_id=abc123; HttpOnly; Secure

代表的な属性セット：Path／Domain／Max-Age(Expires)／Secure／SameSite

CookieにはHttpOnly以外にも複数の属性を組み合わせて設定するのが一般的です。

例えば次のようなSet-Cookieがあります。

Set-Cookie: session_id=abc123; Path=/; Domain=example.com; Max-Age=3600; HttpOnly; Secure; SameSite=Lax

PathやDomainは送信範囲を制御し、Max-Age（Expires）は有効期限を決めます。Secure属性はHTTPS通信時のみ送信され、SameSiteはCSRFを抑制します。

これらを適切に設定すると、XSSなどの脆弱性によるcookie 取得リスクを下げられます。

HttpOnlyの確認方法（ブラウザ・ヘッダ・運用での見方）

HttpOnly属性がサーバーレスポンスに付与されているかどうか確認する方法はいくつかあります。

開発者ツールでの確認方法

HttpOnlyが正しく設定されているかは、ブラウザの開発者ツールで確認できます。

GoogleChromeの場合、まず右上の３点ボタンを押下します。

次に、[その他のツール]から[デベロッパーツール]を押下します。

すると、開発者ツールを開くことができ、画像のようにレスポンスヘッダーのhttpOnly属性を確認できます。

ConsoleでJavaScriptを実行してcookie取得できるかテストする

開発者ツールのConsoleで、document.cookieと入力することで、httpOnly属性が正常に機能していることの確認ができます。

上の画像のように、document.cookieを実行して、空のcookie情報が表示されれば、cookie情報を取得できなかったことを意味するため、httpOnly属性が機能していることの確認が取れます。

HttpOnlyだけでは安全にならない

ここまでhttpOnly属性の設定方法について解説しましたが、これを設定すればすべて安全になるわけではありません。

例えば、Cookieを読めなくても、不正な操作やなりすましリクエストは実行される可能性があります。そのため、通信を守るSecure属性や入力値の対策と組み合わせることが前提になります。

実際に守れているかを確認するには、Cookieの状態や挙動を定期的にチェックする必要があります。

まとめ

本記事の内容をまとめると以下の通りです。

• HttpOnly属性はCookieを盗み取るXSS攻撃を防ぐことができる
• Set-CookieでHttpOnlyを付与できる
• HttpOnly属性以外にも様々な属性を組み合わせることでセキュリティを高められる
• HttpOnlyだけでは安全にならないので注意

HttpOnly属性をまだ設定していないという方は、いますぐにでも設定してみましょう。

また、HttpOnly属性以外にもXSS対策方法について記事を投稿していますので、下の記事も合わせて読んでみてください。

参考記事①：JavaScriptのinnerHTMLは危険？XSS攻撃が成立する条件を検証

参考記事②：CSP（Content Security Policy）とは？XSS対策に欠かせない理由と注意点

最後まで読んでいただき、ありがとうございました。