作者alan23273850 (God of Computer Science)
看板Soft_Job
標題[請益] 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 (臺灣)
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Soft_Job/M.1678603297.A.0A9.html
1F：→ alan23273850: 其中一個作法可能是把 console.log(iframe) 的輸出 03/12 15:55
2F：→ alan23273850: 轉成字串就能處理，但這個動作我也一直找不到解法:( 03/12 15:55
4F：推 MoonCode: 原理是仿造一個網頁元素去下載? 03/12 16:10
5F：→ MoonCode: 好像不行耶 感覺要先把 cors 相關先念熟 我先躺了 03/12 16:12
6F：→ MoonCode: 可能要從瀏覽器緩存或是網路層下手了 這有專業的人在做 03/12 16:19
7F：推 s06yji3: 用postMessage和MessageEvent 03/12 16:24
8F：→ alan23273850: 回樓上，postMessage 是很多人提出的解法，但我不知 03/12 16:36
9F：→ alan23273850: 道具體要怎麼去修改校網傳來的 iframe，能加在 tag 03/12 16:36
10F：→ alan23273850: 裡面嗎？iframe 本身有辦法把自己的 content 丟出來 03/12 16:37
11F：→ alan23273850: 嗎？ 03/12 16:37
12F：推 stupid0319: proxy server 03/12 17:20
13F：→ alan23273850: 回樓上，自己架的話可能可以 (不清楚細節)，但如果 03/12 17:26
14F：→ alan23273850: 要作成 extension 發布，總不可能叫人家自己架一個? 03/12 17:27
15F：推 wulouise: 只是要抓影片wget不就結束了？ 03/12 17:30
16F：推 s06yji3: 預期是inject一個script到網頁上去取得iFrame資料 03/12 17:30
17F：→ ssccg: 要跨網域存取，一定需要你要存取的網頁配合，以你的情況來 03/12 17:33
18F：→ ssccg: 說就是script要執行在iframe裡那個網頁上，只改外面的網頁 03/12 17:35
19F：→ ssccg: 無論如何都是不行的(否則就是瀏覽器需要修補的安全性漏洞) 03/12 17:36
20F：→ alan23273850: 回覆 @s06yji3，我不確定 Chrome extension 能否這 03/12 17:37
21F：→ ssccg: 但是你是extension，所以應該是直接inject script到iframe 03/12 17:37
22F：→ alan23273850: 樣做？然後 @ssccg 大，我有嘗試過 disable Chrome 03/12 17:37
23F：→ alan23273850: 的 CORS 限制，但是那個在網頁重整之後就會失效了。 03/12 17:38
24F：→ ssccg: 裡面那個網頁去配合 03/12 17:38
25F：→ alan23273850: Chrome extension 可以 inject script 到本地網頁去 03/12 17:38
26F：→ alan23273850: 撈那個 iframe 的內容，然後再回傳到自己的script嗎 03/12 17:39
28F：→ ssccg: content_scripts/#frames 03/12 17:43
29F：→ alan23273850: 謝謝樓上，看起來可以用上，但我這兩天爆試已經很累 03/12 17:50
30F：推 s06yji3: 哦，好像inject到iframe 比較直接 03/12 17:54
31F：→ alan23273850: 所有的 nested iframe 也可以 inject 嗎？ 03/12 17:54
32F：→ MarcoReus: 如果iframe 網址已知 我會用background script 直接去 03/12 19:16
33F：→ MarcoReus: 撈 @@ 03/12 19:16
34F：推 MoonCode: 乾好猛 學習到了 03/12 19:23
35F：→ MoonCode: 阿 我還是看不懂 等原po 實驗成功回來教教我QQ 03/12 19:23
36F：→ alan23273850: 有兩個都是 <iframe src="about:blank" ...，但我只 03/12 21:43
37F：→ alan23273850: 要其中一個，這樣有辦法嗎？ 03/12 21:43
38F：→ superpandal: 這東西之前弄過 但安全起見還有更好的方式 03/12 22:23
39F：→ superpandal: 式 03/12 22:23
40F：→ alan23273850: 回樓上，如果是自己寫的腳本應該沒有安全顧慮？求解 03/13 00:15
41F：→ superpandal: 這方式本來就有安全疑慮 無關是不是自己寫 03/13 00:34
42F：→ superpandal: 寫 不硬要可以更安全 03/13 00:35
43F：→ superpandal: 至於自己寫的可以寫的更絕一點 03/13 00:38
44F：推 Arctica: 直覺要透過前端做就是會被browser擋 03/13 12:36
45F：→ alan23273850: @superpandal 想請問大大有實際範例可以參考嗎？ 03/13 12:52
46F：→ MarcoReus: 原po能提供你的iframe 格式嗎? 03/13 13:34
47F：→ superpandal: 在公司弄的 現在也沒空 在研究其它的 03/13 17:23
48F：→ superpandal: 你多看mdn 再實作一下不就懂了... 03/13 17:31
50F：→ Hsins: src="about:blank" 的話，找看看是不是有某段 JS 生出來的 03/13 21:54
51F：→ Hsins: 還是 server-side 本身就故意要這樣塞，前者的話可以直接 03/13 21:55
52F：→ Hsins: 找到資源網址吧 03/13 21:55
53F：推 Saaski: 某s就是在嘴砲而已，他平常回文就那樣，不用理他 03/13 22:03
54F：→ alan23273850: 回 @Hsins，這目前對我來說是 undecidable 問題哈哈 03/13 22:18
55F：→ alan23273850: 而且是有兩個 iframe 的 src 都是 about:blank，但 03/14 01:44
56F：→ alan23273850: 我只要其中一個，這樣也行嗎？ 03/14 01:44
57F：推 MarcoReus: 我猜你的iframe 內容是其他js塞的 看一下network 的req 03/14 19:21
58F：→ MarcoReus: uest 有沒有你要的關鍵字 03/14 19:21
59F：→ alan23273850: 我好像找到解法了！！！大致上是去篩 server 送來的 03/14 23:59
60F：→ alan23273850: response body 裡面出現的影片 url，詳細解法等我 03/14 23:59
61F：→ alan23273850: 實作完之後再上來告訴大家！獎金的發放也是。 03/14 23:59
62F：推 qq1217: 期待解法 03/15 00:05
63F：推 q00153: 這個簡單的需求，使用腳本外掛就拿做到 03/17 07:27