JavaScript Tips | セキュリティ：postMessageのOriginを検証する

postMessageのOrigin検証は「別ドメインとのメッセージ通信を“信頼できる相手だけ”に限定するための防御技術」です

window.postMessage は、

• 親ページと <iframe>
• 別タブ・別ウィンドウ
• 異なるドメイン同士

といった「オリジンの違うページ間」でメッセージをやり取りするための仕組みです。

とても便利な一方で、 「誰から来たメッセージなのか」をきちんと確認しないと、 攻撃者からのメッセージを“正規の指示”として受け入れてしまう危険があります。

そこで重要になるのが、 postMessage の origin を検証する JavaScriptユーティリティです。

ここでは、初心者向けに、 postMessage の基本 → 何が危険か → Origin検証のやり方 → 業務で使えるテンプレート という流れでステップバイステップで解説していきます。

postMessageの基本動作を理解する（まずはイメージから）

親ページから iframe へメッセージを送る例

親ページ側：

const iframe = document.getElementById("child-frame");
iframe.contentWindow.postMessage(
  { type: "SET_THEME", theme: "dark" },
  "https://child.example.com"
);

const iframe = document.getElementById("child-frame");
iframe.contentWindow.postMessage(
  { type: "SET_THEME", theme: "dark" },
  "https://child.example.com"
);

iframe側：

window.addEventListener("message", (event) => {
  console.log("受信したメッセージ:", event.data);
});

window.addEventListener("message", (event) => {
  console.log("受信したメッセージ:", event.data);
});

ここで重要なのは、 postMessage の第2引数に 送信先のオリジン（スキーム＋ホスト＋ポート） を指定している点です。

例："https://child.example.com"

なぜOrigin検証が必要なのか（危険なパターンを知る）

危険な受信側コードの例

window.addEventListener("message", (event) => {
  // Originを一切確認していない
  if (event.data.type === "SET_THEME") {
    applyTheme(event.data.theme); // どこから来たか分からない指示を実行
  }
});

window.addEventListener("message", (event) => {
  // Originを一切確認していない
  if (event.data.type === "SET_THEME") {
    applyTheme(event.data.theme); // どこから来たか分からない指示を実行
  }
});

このコードは、 「どのサイトから送られてきたメッセージでも受け入れてしまう」 状態になっています。

攻撃者が次のようなページを用意し、 ユーザーに開かせるだけで攻撃が成立します。

// 攻撃者のページ
const targetWindow = window.opener || window.parent;
targetWindow.postMessage(
  { type: "SET_THEME", theme: "evil" },
  "*"
);

// 攻撃者のページ
const targetWindow = window.opener || window.parent;
targetWindow.postMessage(
  { type: "SET_THEME", theme: "evil" },
  "*"
);

受信側がOriginを確認していないと、 このメッセージも「正規の指示」として扱われてしまいます。