iframe - 如何通过访问跨域框架修复 "Blocked a frame with origin "https ://example. org”。

Question

供我个人使用，我试图显示 https://maps.google.com在 iframe 内。注:我是不是 希望使用 Google 的 Embed API。

这是我所做的:

使用 Chrome 扩展删除以下请求 header :X-Frame-Options , Access-Control-Allow-Origin , Access-Control-Allow-Methods

添加这些标题:Access-Control-Allow-Methods: * , Access-Control-Allow-Origin: * , Content-Security-Policy: frame-ancestors *;

以上是在所有网址上的所有请求 header 上完成的(在我的扩展中为 browser.webRequest.onHeadersReceived.addListener)，这是非常宽松的，但现在我只是想让它工作。

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

它工作半途而废:

我在 iframe 上看到 Google map

但是底部有一个永久性的“正在加载...”文本，我无法点击标记或搜索内容(请参阅 screenshot )。

我在控制台中收到以下错误:

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-Frame-Options在服务器端决定。这意味着，在iframe中打开页面的人并不能决定是否可以打开文档。 ，而不是文档的作者决定它。在这种情况下，它的谷歌。
我试着用谷歌搜索实现同样的事情，你在文本框中输入一个词，然后点击提交会弹出一个 iframe与谷歌结果。我做了一些研究并了解到这是不可能的，因为谷歌不允许不同的来源显示他们的页面。
这就是他们拥有 API 的原因。
更多关于这个 - How to show google.com in an iframe?