如何修复“阻止原始帧"https://example.org”访问跨源帧。

Question

为了我的个人用途，我试图在iframe中显示https://maps.google.com。注意:我是，而不是，希望使用谷歌的嵌入式API。

以下是我所做的：

• 使用Chrome扩展删除以下请求头：X-Frame-Options、Access-Control-Allow-Origin、Access-Control-Allow-Methods
• 添加以下标题：Access-Control-Allow-Methods: *、Access-Control-Allow-Origin: *、Content-Security-Policy: frame-ancestors *;
• 上面的操作是在所有urls (我的扩展中的browser.webRequest.onHeadersReceived.addListener)上的所有请求头上完成的，它是超级许可的，但现在我只是想让它工作起来。

现在我正在尝试做<iframe src=" https://maps.google.com" />。

它半途而废：

• 我看到谷歌地图显示在我的iframe上
• 但有一个永久的“装载”文本在底部，我不能点击标记或搜索内容(请参阅屏幕截图)。
• 我在控制台中得到以下错误：

Blocked autofocusing on a form control in a cross-origin subframe.
maps:13 Uncaught DOMException: Blocked a frame with origin "https://www.google.com" from accessing a cross-origin frame.
    at Object._.Hr (https://www.google.com/maps/_/js/k=maps.m.en.dc5HEiFGHqQ.O/m=sc2,per,mo,lp,ti,ds,stx,bom,b/rt=j/d=1/rs=ACT90oFcxIV8Ad7kvBMCB_zNoSobKCZYEw:210:51)
    at /maps/_/js/k=maps.m.en.dc5HEiFGHqQ.O/m=vwr,vd,a,owc,ob,sp,en,smi,sc,vlg,log,smr,as,wrc/rt=j/d=1/ed=1/exm=sc2,per,mo,lp,ti,ds,stx,bom,b/rs=ACT90oFcxIV8Ad7kvBMCB_zNoSobKCZYEw:3599:3
    at /maps/_/js/k=maps.m.en.dc5HEiFGHqQ.O/m=vwr,vd,a,owc,ob,sp,en,smi,sc,vlg,log,smr,as,wrc/rt=j/d=1/ed=1/exm=sc2,per,mo,lp,ti,ds,stx,bom,b/rs=ACT90oFcxIV8Ad7kvBMCB_zNoSobKCZYEw:4990:3
    at NLa (https://www.google.com/maps/_/js/k=maps.m.en.dc5HEiFGHqQ.O/m=sc2,per,mo,lp,ti,ds,stx,bom,b/rt=j/d=1/rs=ACT90oFcxIV8Ad7kvBMCB_zNoSobKCZYEw:1677:132)
    at LLa.next (https://www.google.com/maps/_/js/k=maps.m.en.dc5HEiFGHqQ.O/m=sc2,per,mo,lp,ti,ds,stx,bom,b/rt=j/d=1/rs=ACT90oFcxIV8Ad7kvBMCB_zNoSobKCZYEw:1676:469)
    at IIa.f [as H] (https://www.google.com/maps/_/js/k=maps.m.en.dc5HEiFGHqQ.O/m=sc2,per,mo,lp,ti,ds,stx,bom,b/rt=j/d=1/rs=ACT90oFcxIV8Ad7kvBMCB_zNoSobKCZYEw:1561:184)
    at RIa (https://www.google.com/maps/_/js/k=maps.m.en.dc5HEiFGHqQ.O/m=sc2,per,mo,lp,ti,ds,stx,bom,b/rt=j/d=1/rs=ACT90oFcxIV8Ad7kvBMCB_zNoSobKCZYEw:1556:332)
    at eJa (https://www.google.com/maps/_/js/k=maps.m.en.dc5HEiFGHqQ.O/m=sc2,per,mo,lp,ti,ds,stx,bom,b/rt=j/d=1/rs=ACT90oFcxIV8Ad7kvBMCB_zNoSobKCZYEw:1565:43)
    at vA.Ma (https://www.google.com/maps/_/js/k=maps.m.en.dc5HEiFGHqQ.O/m=sc2,per,mo,lp,ti,ds,stx,bom,b/rt=j/d=1/rs=ACT90oFcxIV8Ad7kvBMCB_zNoSobKCZYEw:1564:405)
    at mb (https://www.google.com/maps/_/js/k=maps.m.en.dc5HEiFGHqQ.O/m=sc2,per,mo,lp,ti,ds,stx,bom,b/rt=j/d=1/rs=ACT90oFcxIV8Ad7kvBMCB_zNoSobKCZYEw:1563:293)

对我下一步能做些什么有什么想法吗？还是根本不可能？

Answer 1

简短的回答：，这是做不到的。

长答案： X-框架-选项是在服务器端决定的。这意味着，打开页面并不决定是否可以在iframe中打开文档，而是文档的作者决定了它。在这种情况下，它的谷歌。

我试着用谷歌搜索实现同样的目标，你在文本框中输入一个单词，然后点击submit就会弹出一个带有谷歌结果的iframe。我做了一些研究，并了解到这是不可能做到的，因为谷歌不允许不同的来源显示他们的网页。

这就是为什么他们有API。

更多关于这个- 如何在iframe中显示google.com？