在iFrame框架下無法使用JS的alert、confirm、prompt、print對話方塊

Google Chrome再次引起世界潮流,於Chrome 92中正式把Chrome 91的Feature正式部屬到全世界,其中的一個就是把iFrame的Javascript內建的對話方塊之類的執行權鎖起來不給執行,因此使用者更新到新版的Chrome就會馬上讓你寫好的Web Apps直接掛點。

Remove alert(), confirm(), and prompt() for Cross Origin iframes

依據Chromium Blog文章所示:

Chrome allows iframes to trigger Javascript dialogs. For example it shows “URL says ...” when the iframe is the same origin as the top frame, and “An embedded page on this page says...” when the iframe is cross-origin. This is confusing, and has led to spoofs where sites pretend the message comes from Chrome or a different website. 

Chrome 91 deprecates this ability. Removing support for cross origin iframes’ ability to call alert(), confirm(), and prompt() will prevent this kind of spoofing, and unblock further UI simplifications. For example, this means notexample.com will no longer be able to call window.alert(), window.prompt(), or window.confirm() if embedded in an iframe on example.com.

大致上就是說,當你嵌入某跨源iframe時,如果那個iframe惡意彈一個alert顯示「恭喜中獎五億,請即刻請辭現有工作!」,那這樣使用者就有可能認為是主框架在跟他講這件事時,於是他就會信以為真的跑去遞辭呈。

等等,會願意在自己的主框架嵌入某iframe的網站,就是企業自己本身吧?當然論壇的文章可能也可以,時至今日2021年你看過哪個論壇可以讓你插入iframe的語法?很罕見幾乎看不到吧?為了罕見的案例而不請網站自行修正成安全機制,卻綁架全世界的網站應用來認同這個安全措施,挖靠!阿不就很屌?

對,Chrome就套用上去了,因為我就是屌!怎麼可能同公司會有不同源的網域名稱呢?不可能啦!

詳見Chrome Platform Status:Feature: Remove alert(), confirm(), and prompt for cross origin iframes

而可憐的工程師在努力追蹤完程式碼後,在Console裡面得到下列資訊:

A different origin subframe tried to create a JavaScript dialog. This is no longer allowed and was blocked. See https://www.chromestatus.com/feature/5148698084376576 for more details.

解決辦法

改啦!哪次不改?詳見:MDN Sandbox,只是一旦揭露了sandbox屬性瀏覽器就會重設所有的原本的安全性預設,原本預設By瀏覽器自己的解釋沒人說得準(君不見文章中描述的改版新規範即是案例),沒好好測試就會落入改A錯B的窘境。

/* 設下去與主框架非同源的XMLHttpRequest會被CORS政策擋下來,然後你一定會想說再添加allow-same-origin就好啦?
 * 沒錯,但(以Chrome 92為例)加下去後allow-scripts allow-modals又爆炸嘍!魚與熊掌不可兼得勒,啾咪~*/
sandbox="allow-scripts allow-modals"

勇者屠龍後,勇者即是龍!

Chrome Chromium iFrame Javascript Dialog alert() confirm() prompt() print() Error Disable Blocked