なぜWebアプリの話題なのか

ここ最近,部内専用のチャットアプリを作ろうみたいな話が出ていて,それに伴って必要となる認証/認可基盤をを作っています.
ただこのサービスは部員のメールアドレスなどの個人情報を取り扱う関係上,セキュリティーにかなり気を遣う必要があり,入念な下調べをする必要がありました.
その下調べの過程で登場したXSS攻撃とCSRF攻撃はどういうもので,どういった対策方法があるのか調べたので,ここにメモ帳として置いておきたいと思います.

XSS攻撃?

XSS攻撃とはcross site scripting攻撃の略で,単純に頭文字をとるとcssとなり,スタイルシートのcssと間違えるのでクロス(X)からXSSという名前が使われているようです.

難しい説明

とても難しく説明すると

動的なWEBページ(TwitterとかYahoo知恵袋のような中身が書き換わるタイプのWEBページ)に文字をサーバーサイド側で埋め込む際,

埋め込む文字列がJavascriptとして解釈できる文字列を含む場合にブラウザでWEBページを描画する際に,

埋め込んだ文字列がJavascriptとして解釈されてしまい,

WEBページを読み込んだ人が意図しない形でJavascriptを実行してしまうというものです.

もっと簡単に説明すれば

例えば,Twitter/Youtubeは自分の名前を設定しますよね.

もしこれらのWEBページにXSS対策がされていない場合,自分の名前に悪意のあるJavascriptを設定すると,(動画コメントやタイムラインに載っている)名前が存在するページの悪意のあるJavascriptが実行されてしまう,というものです.

埋め込んだスクリプトは犯罪の予告に使われたり,あるいは勝手にビットコインの採掘をさせることができます.

この攻撃の被害を受けるのは,埋め込んだ文字列をブラウザに読み込んでしまった人全員が対象なので,ほぼ無差別攻撃になるわけです.

恐ろしいですね

どうXSSを防ぐのか

いくつか方法があるようです.

1. 文字列をサーバー側に送信された段階で悪意あるスクリプトを無力化する
上の例でいえば,設定した名前の情報がサーバーに送られた段階で名前をエスケープ(例えばを違う文字に置き換えることでスクリプトとして認識されないようにする)というものです.

確実だと思いますが,すべてのリクエストをに置き換えが必要となり,サーバーサイドの実装が面倒かもしれません.

2. 描画する際にエスケープする
サーバーから情報を取得する際に,受け取った情報を直接描画せずに,ライブラリのXSS対策機能を使って無害化するというものです.

HTMLを自分で直接触らず,React/Vueの描画機能(この際,直接HTMLを直接出力する機能を使わない)を頼る場合,勝手にXSS対策されるようです.

この辺は使うライブラリによって勝手が違うと思うので,フロントエンドの実装する人が抜け目ないように対策をすることが必要となります.

最後(?)

割と有名なページ(Yahoo知恵袋とかYahoo知恵袋とか)も穴のあった攻撃であり,被害が拡散しやすい攻撃であることから,真っ先にWEBページの攻撃対策というと上がるのがこの攻撃だと思います.

次はCSFR攻撃について書きたいと思います.

攻撃は非常に楽であるのに対して,対策は非常に複雑/難しいと思ました.