🪟

DOMDOMタイムス#9: windowさわるだけなら同一オリジンポリシー抵触しない説

2023/08/16に公開

今日は時間がないので短めでいきます(さいきんこればっか言って軽めの記事を書いてばっかかも?)。
本当に小ネタ。

同一オリジンポリシー

あるよね、同一オリジンポリシー。
ドメインが違うiframeに対して何もできないよね……

windowをぜんぶ集めたい

さて、ページ上にあるwindowをぜんぶ集めたいことがたまにありますよね。
そういうときにこんなコードを書くと、クロスドメインのiframeがページ内にあるとき例のDOMExceptionをお見舞されます。

const windows = []
const collectWindows = (wnd) => {
    windows.push(wnd)
    Array.from(wnd.frames).forEach((frame)=>collectWindows(frame))
}
collectWindows(window.top)
console.log(windows)

さて、落ち着いてどこでエラーが出ているのかをみてみましょう。
分解したうえでコンソールでみてみると、じつは驚くことにArray.from()が原因であることがわかります。
image

じつはここでArray.from()を使わず、for文を使えばエラーは出ません👶
(window.frames()が返す値はインデックスによる要素取得に対応していますヨネ)

const windows = []
const collectWindows = (wnd) => {
    windows.push(wnd)
    const frames = wnd.frames
    for (let i = 0; i < frames.length; i++) {
    collectWindows(frames[i])
    }
}
collectWindows(window.top)
console.log(windows)

深くは追っていないのでわかりませんが、Array.from()は与えられたオブジェクトの中にアクセスしてしまうのでしょうかね??
おしまい。

GitHubで編集を提案

Discussion