回看板
Disp BBS
作者 alan23273850 (God of Computer Science)
標題 [請益] javascript 如何跨源存取 iframe 內容
時間 Sun Mar 12 14:41:34 2023

如題，學校網站課程影片的連結是存在某個 iframe 裡面，

由於我想要自己寫一個 Chrome extension 存取該連結並下載它，

腳本通常是用 javascript 寫，如果是下列寫法，

iframe = document.getElementById("tool_content");

iframe.contentDocument 會因為 CORS 機制而存取不到，

想問板上各路大神是否有一個針對此問題的超強力解法？... (Q1)

此外，下載影片的方式我也想詢問，如果是右下角出現
Download
Playback speed
Picture in picture
這三者選單的畫面的話，有沒有也可以直接用 javascript 或其他等價方法的
下載方式呢？... (Q2)

上述兩個解答有效的話，都有豐厚批幣，但第一個問題較為重要，謝謝囉～

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 115.43.121.35 (臺灣)
※ 作者: alan23273850 2023-03-12 14:41:34
※ 文章代碼(AID): #1a3NGX2f (Soft_Job)
※ 文章網址: https://www.ptt.cc/bbs/Soft_Job/M.1678603297.A.0A9.html
→ alan23273850: 其中一個作法可能是把 console.log(iframe) 的輸出轉成字串就能處理，但這個動作我也一直找不到解法:(1F 03/12 15:55
推 MoonCode: https://github.com/rndme/download
原理是仿造一個網頁元素去下載?
好像不行耶 感覺要先把 cors 相關先念熟 我先躺了
可能要從瀏覽器緩存或是網路層下手了 這有專業的人在做3F 03/12 16:08
GitHub - rndme/download: file downloading using client-side javascript
[圖]
file downloading using client-side javascript. Contribute to rndme/download development by creating an account on GitHub. ...

 
推 s06yji3: 用postMessage和MessageEvent7F 03/12 16:24
→ alan23273850: 回樓上，postMessage 是很多人提出的解法，但我不知道具體要怎麼去修改校網傳來的 iframe，能加在 tag裡面嗎？iframe 本身有辦法把自己的 content 丟出來嗎？8F 03/12 16:36
推 stupid0319: proxy server12F 03/12 17:20
→ alan23273850: 回樓上，自己架的話可能可以 (不清楚細節)，但如果要作成 extension 發布，總不可能叫人家自己架一個?13F 03/12 17:26
推 wulouise: 只是要抓影片wget不就結束了？15F 03/12 17:30
推 s06yji3: 預期是inject一個script到網頁上去取得iFrame資料16F 03/12 17:30
→ ssccg: 要跨網域存取，一定需要你要存取的網頁配合，以你的情況來說就是script要執行在iframe裡那個網頁上，只改外面的網頁無論如何都是不行的(否則就是瀏覽器需要修補的安全性漏洞)17F 03/12 17:33
→ alan23273850: 回覆 @s06yji3，我不確定 Chrome extension 能否這20F 03/12 17:37
→ ssccg: 但是你是extension，所以應該是直接inject script到iframe21F 03/12 17:37
→ alan23273850: 樣做？然後 @ssccg 大，我有嘗試過 disable Chrome的 CORS 限制，但是那個在網頁重整之後就會失效了。22F 03/12 17:37
→ ssccg: 裡面那個網頁去配合24F 03/12 17:38
→ alan23273850: Chrome extension 可以 inject script 到本地網頁去撈那個 iframe 的內容，然後再回傳到自己的script嗎25F 03/12 17:38
→ ssccg: https://developer.chrome.com/docs/extensions/mv3/
content_scripts/#frames27F 03/12 17:43
Welcome to Chrome Extensions - Chrome Developers

 
→ alan23273850: 謝謝樓上，看起來可以用上，但我這兩天爆試已經很累29F 03/12 17:50
推 s06yji3: 哦，好像inject到iframe 比較直接30F 03/12 17:54
→ alan23273850: 所有的 nested iframe 也可以 inject 嗎？31F 03/12 17:54
→ MarcoReus: 如果iframe 網址已知 我會用background script 直接去撈 @@32F 03/12 19:16
推 MoonCode: 乾好猛 學習到了
阿 我還是看不懂 等原po 實驗成功回來教教我QQ34F 03/12 19:23
→ alan23273850: 有兩個都是 <iframe src="about:blank" ...，但我只要其中一個，這樣有辦法嗎？36F 03/12 21:43
→ superpandal: 這東西之前弄過 但安全起見還有更好的方式
式38F 03/12 22:23
→ alan23273850: 回樓上，如果是自己寫的腳本應該沒有安全顧慮？求解40F 03/13 00:15
→ superpandal: 這方式本來就有安全疑慮 無關是不是自己寫
寫 不硬要可以更安全
至於自己寫的可以寫的更絕一點41F 03/13 00:34
推 Arctica: 直覺要透過前端做就是會被browser擋44F 03/13 12:36
→ alan23273850: @superpandal 想請問大大有實際範例可以參考嗎？45F 03/13 12:52
→ MarcoReus: 原po能提供你的iframe 格式嗎?46F 03/13 13:34
→ superpandal: 在公司弄的 現在也沒空 在研究其它的
你多看mdn 再實作一下不就懂了...47F 03/13 17:23
→ alan23273850: Marco大 https://imgur.com/T9VuDsg 這張圖可以嗎？49F 03/13 18:53
[圖]

--
作者 alan23273850 的最新發文:
點此顯示更多發文記錄