CINXE.COM

<!DOCTYPE html><html lang="ja" data-scope-path="layouts/application"><head prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#"><link crossorigin="" href="https://www.google-analytics.com/analytics.js" rel="preconnect" /><link rel="preload" href="/fonts/noto-sans-jp-v24-japanese-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="/fonts/noto-sans-jp-v24-japanese-700.woff2" as="font" type="font/woff2" crossorigin="anonymous"> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-25666851-3"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-25666851-3'); </script> <link rel="stylesheet" media="all" href="/assets/ress-d1ba3a251927ab1f2bcc841c9a810109355bcb4260a522a0f76452fdc2fe6095.css" /><link rel="stylesheet" media="all" href="/assets/scopes/layouts/application-dda4ec688c139c8f29c39a2a795bcf4af04c4326643549a37f5d8843fffaebab.css" /><link rel="stylesheet" media="all" href="/assets/scopes/articles/show-37905516c06229c8fde10714e660fc48bc7b6ce7881755707db8b0327ceb5bf1.css" /><link rel="stylesheet" media="all" href="/assets/scopes/partials/_viewer-3a78a10250bb498047a06b71271b62ea949e304d25b9781c4450cf998aa2640c.css" /><link rel="stylesheet" media="all" href="/assets/scopes/layouts/_header-db87b54171cc020758ab7d1494677f8f6c2e9c93b453e896af82e4814eaacc7c.css" /><link rel="stylesheet" media="all" href="/assets/scopes/layouts/_breadcrumbs-744a099ab0b9eb5c4bd45215617e267c7d7c404ddddce8810eead5335512e637.css" /><link rel="stylesheet" media="all" href="/assets/scopes/layouts/_footer-a06961717440c6d0183c582c7f21768011f334d368f51b614eabc87bb17b3bbf.css" /><script src="/packs/application-02365dbc4dc28919eee1.js" defer="defer"></script><link href="/icon.png" rel="icon" type="image/png" /><link href="/apple-touch-icon.png" rel="apple-touch-icon" type="image/png" /><link href="/feed" rel="alternate" title="RSS2.0" type="application/rss+xml" /><title>今時の CSRF 対策ってなにをすればいいの？ | Basicinc Enjoy Hacking!</title><meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="bdV0FEdDaSpQYqwia4QROc2xKRBkdpLi4fce7PRye0CZlondVOrqowVadnNHCCR+r8ZgURryj0nGh7i1jBMeJw==" /><meta content="width=device-width,initial-scale=1" name="viewport" /><meta content="今時の CSRF 対策ってなにをすればいいの？ | Basicinc Enjoy Hacking!" property="og:title" /><meta content="article" property="og:type" /><meta content="2022-08-27T19:41:43+09:00" property="article:published_time" /><meta content="2022-08-29T15:23:14+09:00" property="article:modified_time" /><meta content="zaru" property="article:author" /><meta content="Technology" property="article:section" /><meta content="https://tech.basicinc.jp/articles/231" property="og:url" /><meta content="https://tech.basicinc.jp/uploads/fe2fc7662cb94cbfe2693ee4df97f310.jpeg" property="og:image" /><meta content="image/jpeg" property="og:image:type" /><meta content="1200" property="og:image:width" /><meta content="630" property="og:image:height" /><meta content="こんにちは @zaru です。今回は昔からある CSRF (クロスサイト・リクエスト・フォージェリ) の今時の対策についてまとめてみました。もし、記事中に間違いがあれば @zaru まで DM もしくはメンションをください (セキュリティの細かい部分についての理解が乏しい…..." property="og:description" /><meta content="ja_JP" property="og:locale" /><meta content="summary_large_image" name="twitter:card" /><meta content="@zaru" name="twitter:creator" /></head><body><header data-scope-path="layouts/_header"><div class="header-contents"><a class="root-link" href="/"><svg class="site-logo"><use xlink:href="/assets/icons-5bbe775037b55281ef0bc50d30a51f69c7c3914d399c7107e37f0702d98ae8a2.svg#logo"></use></svg><div class="site-title">Enjoy Hacking!</div></a><div class="site-desc">Basicinc エンジニアブログ</div></div></header><nav data-scope-path="layouts/_breadcrumbs"><ul class="breadcrumbs" itemscope="itemscope" itemtype="https://schema.org/BreadcrumbList"><span class="pretext">% cat </span> <li itemprop="itemListElement" itemscope="itemscope" itemtype="https://schema.org/ListItem"><a itemprop="item" href="/"><span itemprop="name">~</span></a><meta itemprop="position" content="1" /></li>/<li class="current" itemprop="itemListElement" itemscope="itemscope" itemtype="https://schema.org/ListItem"><span itemprop="name">今時のCSRF対策ってなにをすればいいの？.md</span><meta itemprop="item" content="https://tech.basicinc.jp/articles/231" /><meta itemprop="position" content="2" /></li></ul></nav><div data-scope-path="articles/show"><article class="article"><h1 class="article-title">今時の CSRF 対策ってなにをすればいいの？</h1><div class="article-desc"><a class="article-author" href="/authors/1"><img class="article-author-avatar" src="https://tech.basicinc.jp/uploads/e868e5fb1e34b970ae7d8e04c454ff28.png" /><span class="article-author-name">zaru</span></a><div class="article-date-info"><time class="article-posted-date with-separator">Posted 2022-08-27</time><time class="article-revised-date">Revised 2022-08-29</time></div></div><div class="article-body"><div data-scope-path="partials/_viewer"><p>こんにちは <a href="https://twitter.com/zaru">@zaru</a> です。今回は昔からある CSRF (クロスサイト・リクエスト・フォージェリ) の今時の対策についてまとめてみました。もし、記事中に間違いがあれば <a href="https://twitter.com/zaru">@zaru</a> まで DM もしくはメンションをください (セキュリティの細かい部分についての理解が乏しい…) 。</p> <ul> <li>2022/08/29 : <a href="https://twitter.com/ockeghem">徳丸さん</a>からフィードバック頂いた内容を反映しました。徳丸さん、ありがとうございます！ <ul> <li>認証あり・なしで対策方法が違う点</li> <li>トークン確認方式のデメリットのクロスドメインについての言及を削除、代わりに Cookie 改変リスクを追記</li> <li>Cookie 改ざん可能性について徳丸さんの動画リンクを追記</li> <li>SameSite 属性で防げない具体的なケースを追記</li> <li>nginx 説明が関係なかったので削除</li> </ul> </li> </ul> <h2>そもそも CSRF ってなに？</h2> <p>昔からインターネットをやっている方であれば「ぼくはまちちゃん」騒動と言えば分かるかもしれません。2005年頃に mixi で「ぼくはまちちゃん！こんにちはこんにちは!!」という定型の投稿が、投稿者が意図せず書き込まれてしまったという事件です。CSRF はまさにこの「投稿者が意図せず」というところがポイントです。</p> <p>CSRF は、攻撃者が仕掛けたページに被害者 A さんを誘導するところから始まります。A さんは一見なにもないページを閲覧しただけですが、裏では JavaScript を使って別サービス (図で言う BBS) に書き込みリクエストを送信するようになっています。結果、BBS のサーバから見ると、A さんの閲覧環境からのリクエストとして処理されてしまいます。</p> <p><img src="https://tech.basicinc.jp/uploads/e7e92c256d4304cf5a9b033bb97869e7.jpeg" alt="example.jpeg"></p> <p>ざっくり言うと、これが CSRF です。攻撃方法はさまざまありますし、脆弱性さえあれば、会員としてログイン済みのサービスで勝手に退会処理を強制されたりなど様々な影響が出てしまいます。怖いですね。</p> <h2>CSRF 対策ってどうすれば良いの？</h2> <p>結論から言うと以下の2点です。</p> <ul> <li>現代的なフレームワーク・ライブラリを使う</li> <li>上記ツールの CSRF 対策機能をオフにしない</li> </ul> <p>CSRF というのは昔からある攻撃で現代的なフレームワークやフォームライブラリなどであれば標準で対策がされています。つまりアプリケーションの開発者は自前で対策をしなくても、ツールのルールに従ってコードを書いていれば必要十分な対策はできていることになります (当然、100％これで防げるという保証をするものではないですが)。</p> <h3>自ら脆弱性を作ってしまう行為</h3> <p>CSRF 対策を機能としては持っていても何らかの事情で機能をオフにしてしまうと意味がありません。例えば Rails で「なぜか <code>ActionController::InvalidAuthenticityToken</code> 例外が出て動かない… <code>skip_forgery_protection</code> を指定したら動いたぞ」みたいな記事をよく見ます。</p> <p>しかし理解せず <code>skip_forgery_protection</code> を指定すると自ら脆弱性を作ってしまう危険な行為です。一般的な Web アプリケーションであれば CSRF 対策をオフにする必要はあまりないので、そういった時には一度立ち止まって他に間違っているところがないかを考えるようにした方が良いでしょう。</p> <p>また、機能をオフにはしていないが CSRF 対策から外れるコードを書くこともあり得ます。例えば GET リクエストで状態を変更するような API を作ってしまう等です。Web アプリケーションの作法として状態変更をする API は POST メソッドにするというものがあり、フレームワークの CSRF 対策も POST 時にしか有効にならなかったりします。そのため、使っているフレームワークやライブラリの CSRF 対策機能を調べて保護されるケースを理解することも重要です。</p> <p>他にもフレームワークやブラウザ自体の脆弱性、あるいは CSRF 以外に XSS などの脆弱性があると CSRF 対策をしていたとしても抜け道ができてしまうので全体のセキュリティ対策は必要になります。</p> <h2>代表的な CSRF 対策手法</h2> <p>代表的な CSRF 対策の手法をいくつか紹介します。</p> <ul> <li>トークンの確認</li> <li>カスタムリクエストヘッダの確認</li> <li>SameSite Cookie Lax/Strict 設定</li> <li>Double Submit Cookie</li> <li>Origin リクエストヘッダの確認</li> <li>Sec-Fetch リクエストヘッダの確認</li> </ul> <p>フレームワークでは単独の手法だけではなく、複数組み合わせていることもあります。Rails ではトークンの確認と Origin ヘッダの確認を併用しています。以下ではそれぞれの特徴を簡単に解説します。もし間違っていたら教えてください。</p> <p>また、認証を必要とするケースと必要としないケースで CSRF 対策も異なる点にも注意です。認証を必要とするというのは例えば SNS や会員ページなどのログインを必要とするケースです。認証には Cookie でセッション管理をする前提で話を進めます。</p> <h3>トークンの確認</h3> <p>昔からある、おそらくもっとも使われている対策です。細かい実装方法はフレームワークやライブラリによって異なりますが、雑に言うと一時的なランダムトークンをサーバで発行し、セッションとして保持。ブラウザにはセッション Cookie と、トークンを <code><input type="hidden" value="token-xxx"></code> とフォームパーツとして含んだ HTML を返します。</p> <p>POST された際に、フォームの送信データのトークンと、セッションで保持しているトークンが一致するかで正規なリクエストかどうかを判断します。</p> <p><img src="https://tech.basicinc.jp/uploads/9d656ef31e2dddc61f3a9e0f2d89a2ba.jpeg" alt="token.jpeg"></p> <p>メリットは手堅いところ、デメリットは自前で実装する際のコストが高いところです。</p> <p>また、認証を必要としないケースでは、後述する Double Submit Cookie と同様に Cookie を改変されてしまうとトークンチェックをパスできてしまう可能性があります。</p> <h3>カスタムリクエストヘッダの確認</h3> <p>POST リクエストする際に、独自のカスタムヘッダを指定し、サーバ側で確認する手法です。Ajax など <code>fetch()</code> メソッドを使ったリクエストをする際に採用されたりします。<code>fetch()</code> でカスタムヘッダを指定すると、プリフライトリクストという OPTIONS メソッドのリクエストが自動で発行されます。</p> <p>サーバ側は OPTIONS リクエストの中身を見て許可するかどうかを判断します。また許可された後に本来の POST リクエストが飛び、そのリクエストヘッダの中身をみてカスタムヘッダが正規なものかどうかで追加の判断をすることができます。</p> <p><img src="https://tech.basicinc.jp/uploads/84935f29f2a3ed64546e77c631e514b1.jpeg" alt="custom_header.jpeg"></p> <p>メリットはシンプルな実装になること、デメリットは <code><form></code> をつかった POST は保護できないことです。</p> <h3>SameSite Cookie Lax/Strict 設定</h3> <p>2020 年リリースされた Chrome 84 から Cookie の SameSite 属性は Lax がデフォルト値になりました。SameSite 属性というのは Cookie 制御をファーストパーティのみにするかどうかを指定することできます。3つの値があります。</p> <ul> <li>Lax : 現代ブラウザのデフォルト値。異なる Origin からのリクエストにおいて、トップレベルナビゲーションかつ GET リクエスト時に Cookie 送信を許可します。通常のリンク遷移であれば Cookie 送信されますが、<code>iframe</code> では GET でも送信されません</li> <li>Strict : ファーストパーティのみ送信、異なる Origin からのあらゆるリクエストにおいて送信されません</li> <li>None : かつてのデフォルト値です。どの状態でも Cookie を送信します。ただし <code>Secure</code> 属性も合わせて指定をしないと機能しません</li> </ul> <p>この手法は CSRF 攻撃をある程度緩和させるためのものなので、単独で十分な CSRF 対策にはなり得ません。十分でないケースとしてはいかが考えられます (徳丸さんからフィードバックいただきました) 。</p> <ul> <li>GET リクエストで更新処理を許してしまう</li> <li>認証を必要としないケース</li> <li>SameSite 属性に対応していない古いブラウザを使っているケース</li> </ul> <p>カジュアルに防げるケースだと、Lax / Strict であれば、ログイン (Cookie) が必要なアプリケーションの API を、外部から勝手にリクエストを強制させる攻撃は防ぐことができます。Cookie が送信されずログアウト状態のリクエストになるため。</p> <h3>Double Submit Cookie</h3> <p>仕組みとしては最初に紹介したトークンの確認とほぼ同じです。違いは前者はトークンをセッションデータに保持しています (例えば Redis などに) 。つまりサーバ側がトークンを保持しています。しかしこの Dobule Submit Cookie は、トークンを Cookie として渡します。その後、POST 時に Cookie のトークンと、リクエストボディにトークンを埋め込んでサーバへ送信します。サーバは送信された二つのトークンが一致するかを確認します。</p> <p><img src="https://tech.basicinc.jp/uploads/8d0ee0a0370972b82e57eeaa01fef48a.jpeg" alt="double.jpeg"></p> <p>サーバは発行したトークンを保持しない代わりにユーザに Cookie で保持してもらうという点が特徴です。これは Cookie が改変されないという前提に立った手法になります。Cookie が改変されにくいようにするためにはいくつか方法があります。</p> <ul> <li>HTTPS で Secure 属性を使用</li> <li>HTTP Strict Transport Security を使用</li> <li>Cookie 名に <code>__Host-</code> プレフィックを使用</li> </ul> <h4> <code>__Host-</code> プレフィックス</h4> <blockquote> <p>__Host- で始まるクッキー名は、 secure フラグを設定し、安全なページ (HTTPS) から読み込む必要があり、ドメインを指定することができず (従って、サブドメインにも送られません)、パスが / である必要があります。</p> </blockquote> <ul> <li>ref: <a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Set-Cookie">https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Set-Cookie</a> </li> </ul> <p>また、Cookie の改ざんについては徳丸さんの YouTube 動画で詳しく解説されていますので、是非参照をして見てください。</p> <ul> <li><a href="https://www.youtube.com/watch?v=GP1eEit1quY">常時SSLでもCookieの改ざんはできるワケ</a></li> </ul> <h3>Origin リクエストヘッダの確認</h3> <p>仕組みとしては今まで紹介した手法の中でも最もシンプルです。ブラウザが付与する Origin リクエストヘッダと、サーバが動いているホストを比較して一致する場合に正規なリクエストとして処理し、不一致の場合は想定していないサイトからのリクエストとして拒否します。</p> <p><img src="https://tech.basicinc.jp/uploads/7c85b46d7837d15d83cd1dbe3e729e76.jpeg" alt="origin.jpeg"></p> <p>メリットは実装が非常にシンプルで簡単なこと。デメリットはサーバが自身のホスト名を確定できることが条件であること。とはいえ一般的な Web アプリケーションであればホスト名は確定できるので問題にはならないと思います。</p> <p>繰り返しになりますが、GET リクエストで状態を変更するような API がないことが前提です。Origin リクエストヘッダは CORS や POST リクエスト時にしか付与しません。つまり GET では Origin リクエストヘッダの確認はできない点に注意してください。</p> <h3>Sec-Fetch リクエストヘッダの確認</h3> <p>これは前述の Origin リクエストヘッダと同じ仕組みでありつつ、さらに楽な手法になります。Sec-Fetch リクエストヘッダとはブラウザが自動で付与してくれる情報です。以下の4つがあります。</p> <ul> <li>Sec-Fetch-Dest : リクエスト元が fetch するりソースを使う形態 e.g. document / iframe</li> <li>Sec-Fetch-Mode : リクエストの形態を表す e.g. cors / navigate</li> <li>Sec-Fetch-Site : リクエスト元オリジンとリクエストされたオリジンの関係 e.g. same-origin / cross-site</li> <li>Sec-Fetch-User : ユーザ自身がリクエストを発行したかどうか、その場合において値は必ず <code>?1</code> </li> </ul> <p>この中でも CSRF 対策としては <code>Sec-Fetch-Site</code> リクエストヘッダを使います。<code>Sec-Fetch-Site</code> が <code>same-origin</code> の場合は同一オリジンであることが保障されます。つまり前述の Origin リクエストヘッダでは実際にホスト名を取得して比較していたのが、事前にブラウザ自身が同一性を比較した結果だけを受け取ることができます。大変便利ですね。</p> <p>しかし、この方法には唯一の欠点があります。それは 2022-08-27 時点で Safari がまたサポートしていない点です。</p> <ul> <li>Can I use <a href="https://caniuse.com/?search=Sec-Fetch-Site">https://caniuse.com/?search=Sec-Fetch-Site</a> </li> </ul> <p><img src="https://tech.basicinc.jp/uploads/924722e5b6c164b01637e1267a2a442c.jpeg" alt="caniuse.jpeg"></p> <p>Safari がサポートをしてくれれば、<code>Sec-Fetch-Site</code> リクエストヘッダを確認するのが最も手軽な CSRF 対策になりそうです。</p> <h2>まとめ</h2> <p>CSRF 対策はいくつかありますが、最初に書いたように現代的なフレームワークを使い、フレームワークの流儀にのったコードで実装することが一番の対策になるかなと思います。また、なにをすると流儀から外れ防御されなくなるのかを知るために、CSRF 対策手法そのものを理解することが大事だと改めて感じました。</p> <p>セキュリティ対策は時代の流れとともに変わっていくので、これからも情報を追いつつ実験していきたいと思います。</p> <p>最後に、もし記事中に間違いがあれば <a href="https://twitter.com/zaru">@zaru</a> まで DM もしくはメンションをください。</p></div></div><div class="article-sns-share-buttons"><a rel="nofollow" target="_blank" class="pocket-share sns-share-button" href="http://getpocket.com/edit?title=%E4%BB%8A%E6%99%82%E3%81%AE+CSRF+%E5%AF%BE%E7%AD%96%E3%81%A3%E3%81%A6%E3%81%AA%E3%81%AB%E3%82%92%E3%81%99%E3%82%8C%E3%81%B0%E3%81%84%E3%81%84%E3%81%AE%EF%BC%9F+by+zaru+%7C+Basicinc+Enjoy+Hacking%21&url=https%3A%2F%2Ftech.basicinc.jp%2Farticles%2F231"><svg class="sns-icon pocket-icon"><use xlink:href="/assets/icons-5bbe775037b55281ef0bc50d30a51f69c7c3914d399c7107e37f0702d98ae8a2.svg#pocket"></use></svg></a><a rel="nofollow" target="_blank" class="hatena-share sns-share-button" href="http://b.hatena.ne.jp/add?mode=confirm&title=%E4%BB%8A%E6%99%82%E3%81%AE+CSRF+%E5%AF%BE%E7%AD%96%E3%81%A3%E3%81%A6%E3%81%AA%E3%81%AB%E3%82%92%E3%81%99%E3%82%8C%E3%81%B0%E3%81%84%E3%81%84%E3%81%AE%EF%BC%9F+by+zaru+%7C+Basicinc+Enjoy+Hacking%21&url=https%3A%2F%2Ftech.basicinc.jp%2Farticles%2F231"><svg class="sns-icon hatena-icon"><use xlink:href="/assets/icons-5bbe775037b55281ef0bc50d30a51f69c7c3914d399c7107e37f0702d98ae8a2.svg#hatena"></use></svg></a><a rel="nofollow" target="_blank" class="twitter-share sns-share-button" href="https://twitter.com/share?text=%E4%BB%8A%E6%99%82%E3%81%AE+CSRF+%E5%AF%BE%E7%AD%96%E3%81%A3%E3%81%A6%E3%81%AA%E3%81%AB%E3%82%92%E3%81%99%E3%82%8C%E3%81%B0%E3%81%84%E3%81%84%E3%81%AE%EF%BC%9F+by+zaru+%7C+Basicinc+Enjoy+Hacking%21&url=https%3A%2F%2Ftech.basicinc.jp%2Farticles%2F231"><svg class="sns-icon twitter-icon"><use xlink:href="/assets/icons-5bbe775037b55281ef0bc50d30a51f69c7c3914d399c7107e37f0702d98ae8a2.svg#twitter"></use></svg></a><a rel="nofollow" target="_blank" class="facebook-share sns-share-button" href="http://www.facebook.com/share.php?u=https%3A%2F%2Ftech.basicinc.jp%2Farticles%2F231"><svg class="sns-icon facebook-icon"><use xlink:href="/assets/icons-5bbe775037b55281ef0bc50d30a51f69c7c3914d399c7107e37f0702d98ae8a2.svg#facebook"></use></svg></a></div></article></div><footer data-scope-path="layouts/_footer"><div class="footer-contents"><a class="root-link" href="/"><svg class="site-logo"><use xlink:href="/assets/icons-5bbe775037b55281ef0bc50d30a51f69c7c3914d399c7107e37f0702d98ae8a2.svg#logo"></use></svg><div class="site-title">Enjoy Hacking!</div></a><ul class="link-list"><li class="link-list-item"><a class="link" href="https://basicinc.jp/" rel="noopener" target="_blank">株式会社ベーシック</a></li><li class="link-list-item"><a class="link" href="https://basicinc.jp/enjoy-hacking" rel="noopener" target="_blank">エンジニア募集</a></li><li class="link-list-item"><a class="link" href="https://qiita.com/organizations/basicinc" rel="noopener" target="_blank">Qiita</a></li><li class="link-list-item"><a class="link" href="https://www.wantedly.com/companies/basicinc/projects" rel="noopener" target="_blank">Wantedly</a></li></ul></div></footer></body></html>