なぜ「窓を開けっ放し」にするの？PostMessage APIとセキュリティの落とし穴
こんにちは！現場で泥臭いインシデント対応ばかりしているセキュリティエンジニアです。
今日は、Webアプリケーション開発で最近よく使う「postMessage API」についてお話しします。これ、便利ですよね。異なるタブやiframeの間でデータをやり取りできる魔法のような機能です。
でも、この魔法には「誰からのメッセージでも受け取ってしまう」という恐ろしい弱点があることをご存知でしょうか？今日は、家の防犯に例えて、この仕組みを紐解いていきましょう。
—
泥棒が「合言葉」を知らなくても入れる家
想像してみてください。あなたは自分の家（Webページ）で、信頼できる家族（同じドメイン内の機能）とだけ手紙をやり取りしたいと考えています。
ここでpostMessageを使うことは、玄関に「郵便受け」を設置するようなものです。でも、もしその郵便受けに「誰からの手紙でも、中身を見ずに受け取ります！」という札を貼っていたらどうなるでしょう？
悪い泥棒（攻撃者）は、あなたが信頼している家族になりすまして、「家の中の貴重な情報（ログイン情報や個人情報）」を盗み出す手紙を次々と送り込んできます。これこそが、postMessageにおける「送信元（Origin）の検証不足」が引き起こす悲劇です。
—
「ワイルドカード()」という名のドア開放
開発中、面倒くさくなってこんなコードを書いたことはありませんか？
// 危険な例：どんなサイトから送られてきたメッセージでも受け取ってしまう
window.addEventListener(“message”, (event) => {
// 誰からのメッセージか確認せずに処理しちゃダメ！
console.log(“受信したデータ:”, event.data);
// ここで機密情報を返したりすると、即座に情報漏洩です
});
このコードの event.origin を確認しない書き方は、玄関の鍵を全開にして「誰でもウェルカム！」と言っているのと同じです。特に window.postMessage(message, "") のように、送信先を “（ワイルドカード）にしてしまうと、ブラウザ上で開いている悪意のあるサイトが、あなたのサイトにこっそりメッセージを送りつけることさえ可能になります。
—
防御の第一歩：身元確認（Originチェック）を徹底しよう
では、どうすれば安全になるのでしょうか？答えは簡単です。「手紙の差出人を確認すること」です。
郵便受けに「この人からの手紙しか受け取りません！」と厳格なルールを設けるイメージですね。
// 安全な例：信頼できるサイトからのみ受け取る
const TRUSTED_ORIGIN = “https://your-trusted-site.com”;
window.addEventListener(“message”, (event) => {
// 1. まず、差出人が信頼できる相手か確認する
if (event.origin !== TRUSTED_ORIGIN) {
console.warn(“不審なサイトからのメッセージを拒否しました:”, event.origin);
return; // 信頼できない相手なら即座に無視！
}
// 2. 差出人が正しいことを確認してから処理する
console.log(“信頼できる相手からのメッセージ:”, event.data);
});
これだけで、泥棒が玄関まで来ても「お前は誰だ！」と追い返すことができるようになります。
—
さらに一歩進んだ「鉄壁」の守り方
送信元を確認するだけでなく、以下の2点を意識すると、あなたのアプリケーションはより強固になります。
1. データ形式のバリデーション（中身の検査）:
信頼できるサイトから来たとしても、その中身が壊れていたり、悪意あるコードが含まれていたりするかもしれません。JSON.parseの結果が想定した型（文字列や数値など）になっているか、必ずチェックしてください。
2. 送信先を明確に指定する:
メッセージを送るときも、“ を使ってはいけません。必ず特定の宛先を指定しましょう。
// 悪い例：誰に届くかわからない
targetWindow.postMessage(“秘密のデータ”, “”);
// 良い例：信頼できる相手にだけ送る
targetWindow.postMessage(“秘密のデータ”, “https://your-trusted-site.com”);
—
まとめ：セキュリティは「疑うこと」から始まる
Web開発の世界では、技術が便利になればなるほど、その裏側に潜む「盲点」も増えていきます。postMessageは非常に便利な機能ですが、「通信の相手を特定しない通信は、セキュリティの穴になる」という鉄則を忘れないでください。
今日から、コードの中に event.origin があるかチェックしてみませんか？ほんの数行のチェックコードが、ユーザーの大切な情報を守る「頑丈な鍵」になります。
セキュリティは、一度の大きな対策よりも、日々の「疑う習慣」の積み重ねです。一緒に一歩ずつ、安全なWebの世界を作っていきましょうね！
コメント