【入門編】AngularJSのテンプレートインジェクションとサンドボックス回避 – アプリケーションセキュリティ & 安全な開発防御ガイド

こんにちは。セキュリティの世界へようこそ。
今日は、かつてWeb開発の常識を変えた「AngularJS」というフレームワークが抱えていた、ちょっと怖い「魔法の落とし穴」についてお話しします。

開発者なら一度は聞いたことがある「XSS（クロスサイトスクリプティング）」。これ、教科書通りに説明すると難解ですよね。でも、実はとてもシンプル。「誰かが置いていったメモを、あなたの家の玄関に貼られた付箋だと勘違いして、勝手に実行してしまうこと」です。

今日は、その中でも少し特殊な「テンプレートインジェクション」という手口に焦点を当てて、一歩ずつ紐解いていきましょう。

—

現代のWebサイトは、ただの書類（HTML）ではなく、プログラムが裏で動く「家」のようなものです。AngularJSは、この家に「動く家具」を配置する魔法のルールでした。

例えば、{{ 1 + 1 }} と書くと、画面には「2」と表示される。この「二重中括弧」こそがAngularJSのテンプレート機能です。

しかし、もし誰かがここに、あなたの家の鍵を開けるような「悪意ある式」を書き込んだらどうなるでしょうか？

本来なら「名前」が入るはずの場所に、攻撃者がこんなコードを仕込みます。

これを見たAngularJSは、「おっ、これは計算しなきゃいけない式だな！」と親切心から実行してしまいます。結果、ブラウザ上で勝手にプログラムが動き出してしまう。これがAngularJSのテンプレートインジェクションです。

—

AngularJSは当時、この危険性を理解しており、「サンドボックス（砂場）」という隔離エリアを用意していました。「外部の危険な命令は、この砂場から外に出しちゃダメだよ」というルールです。

しかし、世界中のハッカーたちはこの金庫の隙間を見つけるのが大好きでした。「constructor という特殊なドアを使えば、実はサンドボックスの鍵を盗める」と気づいてしまったのです。

教訓： フレームワークが用意した「安全な機能」は、万能ではありません。裏側の仕組みを理解せず、ただ「便利だから」と古いバージョンを使い続けることは、「鍵をかけたつもりで、実は鍵穴が壊れている玄関」を放置するようなものなのです。

—

「じゃあ、もうAngularJSは使っちゃダメなの？」という質問が聞こえてきそうですね。結論としては、最新のフレームワーク（Angular 2+以降やReact, Vueなど）への移行が正解です。これらは「式」を勝手に評価するのではなく、安全な方法でデータを描画するように設計されています。

それでも、古いシステムを運用しなければならない場合、あるいは現代のアプリを守るために、以下の「防犯対策」を徹底しましょう。

CSPは、ブラウザに対して「このサイトでは、許可していない外部のスクリプトは絶対に実行させない！」と命令する最強の防犯カメラです。

サーバーの応答ヘッダーに以下のように設定します。

信頼できるソース以外からのスクリプト実行を禁止する
Content-Security-Policy: default-src ‘self’; script-src ‘self’;

開発者の皆さんが最も意識すべきは、「ユーザーからの入力はすべて泥棒の可能性がある」と疑うことです。

---

セキュリティと聞くと、難しい数式や暗号をイメージするかもしれません。でも、実態はもっと人間味のあるものです。

「このコードを悪意ある人が見たら、どんなおかしな動きをするだろう？」
「もしこの入力欄が、自分の家の玄関だったらどうする？」

そんな風に少しだけ想像力を働かせてみてください。それが、世界最高峰のホワイトハッカーへの第一歩です。

技術は常に進化し、攻撃の手口も巧妙になります。でも、基本はいつでも「自分たちが作った大切な場所に、招かれざる客を入れないこと」。これさえ忘れなければ、あなたは立派なセキュリティエンジニアです。

もし分からないことがあれば、いつでもまた聞きに来てくださいね。一緒に、安全で快適なWebの世界を作っていきましょう！