使用 X-Frame-Options 的 firebase 托管 iframe 错误

Question

我需要为使用 firebase 托管的页面使用几个 iframe，但它给我 X-Frame-Options 错误，其中一个 iframe 用于 picasa 上托管的画廊，另一个 ifrmae 用于联系表单(因为我无法发送通过 firebase 发送电子邮件 :()

这里有错误

Refused to display 'https://get.google.com/albumarchive/pwa/11111/album/1111?source=pwa#slideshow/1111' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
jquery.min.js:2 Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "https://demodomain.com" from accessing a cross-origin frame. 

我用 firebase.json 做了这个但是没用

 "headers": [
     {
       "source": "**/*",
       "headers": [
         {"key": "X-Content-Type-Options", "value": "nosniff"},
         {"key": "X-Frame-Options", "value": "ALLOW"},
         {"key": "X-UA-Compatible", "value": "ie=edge"},
         {"key": "X-XSS-Protection", "value": "1; mode=block"}
       ]
     }
]

Answer 1

您的想法是对的，只是设置了错误的值。 ALLOW 不是 X-Frame-Options header 可接受的值。您可以设置 ALLOW-FROM 值，然后指定您希望允许嵌入的 uri。查看下面的更多文档。

修复:

 "headers": [{
   "source": "**/*",
   "headers": [
     {"key": "X-Content-Type-Options", "value": "nosniff"},
     {"key": "X-Frame-Options", "value": "ALLOW-FROM https://get.google.com"},
     {"key": "X-UA-Compatible", "value": "ie=edge"},
     {"key": "X-XSS-Protection", "value": "1; mode=block"}
   ]
 }]

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options