如何修复“因为设置了'X-Frame-Options'为'sameorigin'而被拒绝在框架中显示”的问题

Question

我在使用 Angular 中的 i-frame 时遇到了错误。它拒绝在框架中显示，因为它将“X-Frame-Options”设置为“sameorigin”。

拒绝显示'https://docs.google.com/gview?url=https://subtreebucket.s3.amazonaws.com/docsFile_1559124133664_dummy.pdf'在一个框架中，因为它将“X-Frame-Options”设置为“sameorigin”。

- Abhijeet Srivastava

---

顺便提一下，你应该立即将S3存储桶设置为私有的，现在它是公开的，我们只需访问https://subtreebucket.s3.amazonaws.com/就可以访问你的所有文件。在放东西之前先处理好授权问题。 - Qortex

Answer 1

您无法覆盖它：正如您在显示的URL的GET请求的响应中所看到的，有一个响应头x-frame-options: SAMEORIGIN。

这意味着源服务器不授权您在iframe中显示此内容。

您无法规避此问题，这是一种安全保护措施：否则，会使会话劫持变得太容易。

唯一的方法是拥有相同资源的URL，允许您查看（例如直接使用PDF URL，此处为https://subtreebucket.s3.amazonaws.com/docsFile_1559124133664_dummy.pdf，或将embedded=true添加到URL中，这是Google文档特定的）。

- Qortex

Answer 2

请使用安全管道进行过滤，然后按以下方式包含链接。

<iframe class="doc" src="https://docs.google.com/gview?url=https://subtreebucket.s3.amazonaws.com/docsFile_1559124133664_dummy.pdf&embedded=true"></iframe>

确保在向iframe添加源时使用embedded=true。这样肯定会起作用。

- VIKAS KOHLI

Answer 3

将以下内容添加到web.config customHeaders部分：

<customHeaders>
  <remove name="X-Powered-By" />
  <remove name="X-Content-Type-Options" />
  <add name="X-Frame-Options" value="ALLOW-FROM http://sharepointsitecollectionurl " />
  <add name="Content-Security-Policy" value="frame-ancestors sharepointwebapplicationurl" />
  <add name="X-Content-Type-Options" value="nosniff" />
  <add name="X-XSS-Protection" value="1; mode=block" />
  <add name="X-UA-Compatible" value="IE=Edge" />
</customHeaders>

- Sam Miller

Answer 4

因为你应该将内容嵌入到你的页面/网站中，而不仅仅是链接到它。

这里有一个区别： https://www.youtube.com/watch?v=${videoId} - 这种链接是用来在浏览器上观看YouTube视频的。这与其他链接没有什么不同。 https://www.youtube.com/embed/${videoId} - 这种链接是将YouTube视频放在你的页面/网站上。这被称为嵌入式内容。

嵌入内容的目的是让读者留在你的网站上，为读者提供更好的体验，并希望能获得更多忠实的读者。而不是将你的网站访问者送到别人的网站，你让他们留在你的内容所在的地方，并保持他们的参与度，使他们更长时间地与你保持联系并经常回访。

- arsi

Answer 5

把 src url 中的 https://docs.google.com/gview?url= 部分去掉怎么样？

<iframe 
  src="https://subtreebucket.s3.amazonaws.com/docsFile_1559124133664_dummy.pdf"
  frameborder="0">
</iframe>

它有效。

---

这里有一个供您参考的工作示例StackBlitz。

- SiddAjmera

---

我必须将该链接设置为动态的。 - Abhijeet Srivastava

Answer 6

你可以使用 target="_blank" 属性。

- Broken Man

---

为了让您的回答更加清晰明了，您可以说明为什么提出这个建议。否则，您可以将其发布为评论。 - sonali