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

iframeのOrigin検証は「画面の一部を“信頼できる外部コンテンツだけ”に限定するための防御技術です」

業務システムでは、<iframe> を使って外部コンテンツを埋め込む場面がよくあります。

• 外部サービスのダッシュボードを管理画面に埋め込む
• 決済サービスの入力画面を iframe で表示する
• マニュアルサイトやヘルプページを一部だけ埋め込む

とても便利な一方で、iframeは 「別オリジンのコンテンツを自分のページの中に表示する」 仕組みです。 もし、意図しない・信頼できないオリジンのコンテンツを埋め込んでしまうと、

• フィッシング的な画面をユーザーに見せてしまう
• 攻撃者が用意した偽フォームを表示してしまう
• ブランドやシステムの信頼性を損なう

といったリスクが生まれます。

そこで重要になるのが 「iframeのOriginを検証する」JavaScriptユーティリティと設計です。 ここでは、初心者向けにステップバイステップで解説していきます。

iframeとOriginの関係をイメージする（まずは基本から）

iframeの基本的な使い方

<iframe
  id="external-frame"
  src="https://service.example.com/dashboard"
></iframe>

このとき、src に指定したURLの オリジン（スキーム＋ホスト＋ポート） が iframeのOriginになります。

例：

• https://service.example.com/dashboard → Origin は https://service.example.com

JavaScriptからは、次のようにアクセスできます。

const iframe = document.getElementById("external-frame");
const src = iframe.src; // "https://service.example.com/dashboard"
const url = new URL(src);
console.log(url.origin); // "https://service.example.com"

const iframe = document.getElementById("external-frame");
const src = iframe.src; // "https://service.example.com/dashboard"
const url = new URL(src);
console.log(url.origin); // "https://service.example.com"

ここで重要なのは、 「iframeの中身は別オリジンのコンテンツかもしれない」 という前提を常に意識することです。

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

危険な例：srcを外部から自由に変更できる設計

例えば、次のようなコードを考えます。

function setIframeSrc(url) {
  const iframe = document.getElementById("external-frame");
  iframe.src = url; // 検証なしで設定
}

function setIframeSrc(url) {
  const iframe = document.getElementById("external-frame");
  iframe.src = url; // 検証なしで設定
}

ここで url がユーザー入力や外部設定ファイルから来ていると、

setIframeSrc("https://evil-phishing.com/login");

setIframeSrc("https://evil-phishing.com/login");

のように、攻撃者が用意したサイトを 自分の業務システムの画面内に表示してしまう可能性があります。

ユーザーから見ると、

「この会社のシステムの中に表示されている画面だから、きっと正規のものだろう」

と誤解しやすく、フィッシングの成功率が高まってしまいます。