AzOneでは学習サポートを開始しています

現在AzOneでは新人を抜け出したくらいの有志のメンバーを対象に、Web開発のスキルを底上げするためのトレーニングを実施しています。主に以下を対象にこちらで学習するためのコンテンツを用意して取り組んでもらっています。
 

• Linux
• サーバーサイドプログラミング
• フロントエンドプログラミング
• HTML、CSS
• React、Next.js

このトレーニングを完遂すれば簡単なウェブアプリケーションを一人で実装できるようになるようにコンテンツを組んでいるため、メンバーには頑張ってもらいたいです。

CSRF is 何？

利用者が意図したリクエストであるかどうかを識別する仕組みを持たないウェブサイトは、外部サイトを経由した悪意のあるリクエストを受け入れてしまう場合があります。このようなウェブサイトにログインした利用者は、悪意のある人が用意した罠により、利用者が予期しない処理を実行させられてしまう可能性があります。このような問題を「CSRF（Cross-Site Request Forgeries／クロスサイト・リクエスト・フォージェリ）の脆弱性」と呼び、これを悪用した攻撃を、「CSRF攻撃」と呼びます。

安全なウェブサイトの作り方 - 1.6 CSRF（クロスサイト・リクエスト・フォージェリ）

CSRF攻撃は本人になりすまして特定のウェブサービスの操作を実行するという点で非常に悪質で、これによる誤認逮捕なども発生しておりパソコン遠隔操作事件は特に有名です。

CSRFの実践方法などは多くのブログなどで紹介されているためこの記事ではCSRF自体の説明は要点だけにとどめ、現在のWebの仕様（W3C）から対策を実施せずとも結果的にCSRF攻撃への対策ができてしまっている状況と、正しい対策方法について紹介してみようと思います。

CSRF攻撃を実際にやってみる

CSRFのなりすましはセッション情報としてCookieが保存されていればよいので今回は認証部分については省略します。（CSRFは認証自体が重要な要素という訳ではない）

できる限りシンプルにしたいのでNode.jsのhttpモジュールからサーバーを作成します。こうしてみるとExpressも同じ位のコード量で書けるのExpressでやっても良かったかもしれませんね。

 

const port = 3000
const server = createServer(async (req, res) => {
	// 省略
})

server.listen(port, () => {
  console.info(`listening on port ${port}`)
})

<form method="post" action="/posts" name="post-content">
    <label for="content_simple">label</label>
    <input id="content_simple" type="text" name="content_simple" />
    <button type="submit">send</button>
</form>

かなり省略しましたが、これでサーバーにアクセスするとこんな感じになります。シンプルですね。シンプル過ぎたかもしれません。


それではこのフォームから任意の値を送信し、それをサーバー側で処理します。
 

if (req.method === "POST") {
    let data = ""
    req
      .on("data", (chunk) => (data += chunk))
      .on("end", () => {
				// DB操作などの処理をする
      })
    res.writeHead(303, { Location: "/" })
    res.end()
    return
  }

当然このようなpayloadがサーバーに送信されます。この際、認証が済んでいる場合Cookieはヘッダ情報として送信されます。
 

POST /posts HTTP/1.1
Host: localhost
Origin: http://localhost:3000
Content-Type: application/x-www-form-urlencoded
Cookie: content.sid=s%ofojwe...

content_simple=sample

ここで、以下のようなダミーサイトを用意します（このダミーサイトへどうやって誘導するかは別の問題ですが）

<form id="dummy" method="post" action="http://localhost:3000/posts">
    <label for="dummy_content">😊安全😊なサイトです</label>
    <input hidden id="content_simple" type="text" name="content_simple" value="👿👿👿" />
</form>
<script>
  document.getElementById("dummy").submit()
</script>

このサイトは実際にはアクセスした瞬間http://localhost:3000/postsへcontent_simple=👿👿👿というpayloadを送信します。（その後すぐにリダイレクトされるの実際には上図の画面は一瞬しか表示されない）セッション情報はCookieに保存されており、有効期限が切れていない限りはサーバーはログインユーザーが送信したリクエストとして処理してしまいます。これで他人になりすまし任意のリクエストを送信させることができたため晴れてCSRF攻撃完了です👏

CORSは全てを解決する？

CORSの軽い軽い説明

さっき異なるドメインにPOSTできたんじゃ…？

閑話休題

え…じゃあうちのウェブアプリケーションやばい…？

fetch("/posts", {
  method: "POST",
  headers: {
    "X-Requested-With": "XMLHttpRequest",
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    hoge: "hoge-data",
  }),
})

うちのアプリケーションは問題ないってことでOKですか？

<form id="dummy" method="post" action="http://localhost:3000/posts">
    <label for="dummy_content">😊安全😊なサイトです</label>
    <input hidden id="content_simple" type="text" name='{"hoge":"hoge","end":"end' value='"}' />
</form>
<script>
  document.getElementById("dummy").submit()
</script>

POST /posts HTTP/1.1
Content-Type: application/x-www-form-urlencoded

// 見やすくするためJSONっぽく改行してます
{
  "hoge" : "hoge",
  "end":"end="
}

CSRFへの礼儀正しい対策

• IPAによる根本的対策の紹介
  • トークンを利用したCSRF

最後に