[請益] javascript 如何跨源存取 iframe 內容

作者: alan23273850   2023-03-12 14:41:34
如題,學校網站課程影片的連結是存在某個 iframe 裡面,
由於我想要自己寫一個 Chrome extension 存取該連結並下載它,
腳本通常是用 javascript 寫,如果是下列寫法,
iframe = document.getElementById("tool_content");
iframe.contentDocument 會因為 CORS 機制而存取不到,
想問板上各路大神是否有一個針對此問題的超強力解法?... (Q1)
此外,下載影片的方式我也想詢問,如果是右下角出現
Download
Playback speed
Picture in picture
這三者選單的畫面的話,有沒有也可以直接用 javascript 或其他等價方法的
下載方式呢?... (Q2)
上述兩個解答有效的話,都有豐厚批幣,但第一個問題較為重要,謝謝囉~
作者: alan23273850   2023-03-12 15:55:00
其中一個作法可能是把 console.log(iframe) 的輸出轉成字串就能處理,但這個動作我也一直找不到解法:(
作者: MoonCode (MoonCode)   2023-03-12 16:08:00
https://github.com/rndme/download原理是仿造一個網頁元素去下載?好像不行耶 感覺要先把 cors 相關先念熟 我先躺了可能要從瀏覽器緩存或是網路層下手了 這有專業的人在做
作者: s06yji3 (阿南)   2023-03-12 16:24:00
用postMessage和MessageEvent
作者: alan23273850   2023-03-12 16:36:00
回樓上,postMessage 是很多人提出的解法,但我不知道具體要怎麼去修改校網傳來的 iframe,能加在 tag裡面嗎?iframe 本身有辦法把自己的 content 丟出來嗎?
作者: stupid0319 (徵女友)   2023-03-12 17:20:00
proxy server
作者: alan23273850   2023-03-12 17:26:00
回樓上,自己架的話可能可以 (不清楚細節),但如果要作成 extension 發布,總不可能叫人家自己架一個?
作者: wulouise (在線上!=在電腦前)   2023-03-12 17:30:00
只是要抓影片wget不就結束了?
作者: s06yji3 (阿南)   2023-03-12 17:30:00
預期是inject一個script到網頁上去取得iFrame資料
作者: ssccg (23)   2023-03-12 17:33:00
要跨網域存取,一定需要你要存取的網頁配合,以你的情況來說就是script要執行在iframe裡那個網頁上,只改外面的網頁無論如何都是不行的(否則就是瀏覽器需要修補的安全性漏洞)
作者: alan23273850   2023-03-12 17:37:00
回覆 @s06yji3,我不確定 Chrome extension 能否這
作者: ssccg (23)   2023-03-12 17:37:00
但是你是extension,所以應該是直接inject script到iframe
作者: ssccg (23)   2023-03-12 17:38:00
裡面那個網頁去配合
作者: alan23273850   2023-03-12 17:38:00
Chrome extension 可以 inject script 到本地網頁去撈那個 iframe 的內容,然後再回傳到自己的script嗎
作者: ssccg (23)   2023-03-12 17:43:00
作者: alan23273850   2023-03-12 17:50:00
謝謝樓上,看起來可以用上,但我這兩天爆試已經很累
作者: s06yji3 (阿南)   2023-03-12 17:54:00
哦,好像inject到iframe 比較直接
作者: alan23273850   2023-03-12 17:54:00
所有的 nested iframe 也可以 inject 嗎?
作者: MarcoReus (Marco Reus)   2023-03-12 19:16:00
如果iframe 網址已知 我會用background script 直接去撈 @@
作者: MoonCode (MoonCode)   2023-03-12 19:23:00
乾好猛 學習到了阿 我還是看不懂 等原po 實驗成功回來教教我QQ
作者: alan23273850   2023-03-12 21:43:00
有兩個都是 <iframe src="about:blank" ...,但我只要其中一個,這樣有辦法嗎?
作者: superpandal   2023-03-12 22:23:00
這東西之前弄過 但安全起見還有更好的方式式
作者: alan23273850   2023-03-13 00:15:00
回樓上,如果是自己寫的腳本應該沒有安全顧慮?求解
作者: superpandal   2023-03-13 00:34:00
這方式本來就有安全疑慮 無關是不是自己寫寫 不硬要可以更安全至於自己寫的可以寫的更絕一點
作者: Arctica (欲聆聽,必先靜默)   2023-03-13 12:36:00
直覺要透過前端做就是會被browser擋
作者: alan23273850   2023-03-13 12:52:00
@superpandal 想請問大大有實際範例可以參考嗎?
作者: MarcoReus (Marco Reus)   2023-03-13 13:34:00
原po能提供你的iframe 格式嗎?
作者: superpandal   2023-03-13 17:23:00
在公司弄的 現在也沒空 在研究其它的你多看mdn 再實作一下不就懂了...
作者: alan23273850   2023-03-13 18:53:00
Marco大 https://imgur.com/T9VuDsg 這張圖可以嗎?
作者: Hsins (翔)   2023-03-13 21:54:00
src="about:blank" 的話,找看看是不是有某段 JS 生出來的還是 server-side 本身就故意要這樣塞,前者的話可以直接找到資源網址吧
作者: Saaski (GreedIsGood)   2023-03-13 22:03:00
某s就是在嘴砲而已,他平常回文就那樣,不用理他
作者: alan23273850   2023-03-13 22:18:00
回 @Hsins,這目前對我來說是 undecidable 問題哈哈
作者: MarcoReus (Marco Reus)   2023-03-14 19:21:00
我猜你的iframe 內容是其他js塞的 看一下network 的request 有沒有你要的關鍵字
作者: alan23273850   2023-03-14 23:59:00
我好像找到解法了!!!大致上是去篩 server 送來的response body 裡面出現的影片 url,詳細解法等我實作完之後再上來告訴大家!獎金的發放也是。
作者: qq1217 (...)   2023-03-15 00:05:00
期待解法
作者: q00153 (TB)   2023-03-17 07:27:00
這個簡單的需求,使用腳本外掛就拿做到

Links booklink

Contact Us: admin [ a t ] ucptt.com