How to fix Refused to display in a frame because it set 'X-Frame-Options' to 'sameorigin

问题

I'm getting error while useing i-frame in angular Refused to display in a frame because it set 'X-Frame-Options' to 'sameorigin'

Refused to display 'https://docs.google.com/gview?url=https://subtreebucket.s3.amazonaws.com/docsFile_1559124133664_dummy.pdf' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

回答1:

Please use santizer with safe pipe and then include the link as below

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

Make sure you are using embedded=true while adding source in the iframe. It'll definitely work

回答2:

How about stripping away the https://docs.google.com/gview?url= part from the src url?

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

It works.

---

Here's a Working Sample StackBlitz for your ref.

回答3:

You cannot overrule that: as you can see in the response to the GET request for the url you are showing, there is a response header x-frame-options: SAMEORIGIN.

It means that the origin server does not authorize you to show this content inside an iframe.

You cannot circumvent this, this is a security protection: otherwise it would make session hijacking too easy.

The only way to go is to have the same resource with an URL that allows you to be viewed (such as the PDF url directly, here https://subtreebucket.s3.amazonaws.com/docsFile_1559124133664_dummy.pdf, or adding embedded=true to the URL might work, which is google docs specific).

来源：https://stackoverflow.com/questions/56391081/how-to-fix-refused-to-display-in-a-frame-because-it-set-x-frame-options-to-sa