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

Question

I'm getting an error while using an i-frame in angular. It 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'.

Bertie

Btw, you should make your S3 bucket private right now, it is public for now and we can access all your files simply by visiting subtreebucket.s3.amazonaws.com. Work on authorizations before putting stuff on it. – Howarth

Answer 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

Princedom

docs.google.com has same problem / error – Hound

Answer 2

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).

Howarth

Answer 3

Added the following to the web.config customHeaders section:

<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>

Endamage

Answer 4

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.

Dander

i have to put that link dynamic. – Bertie

Answer 5

Because you should embed the content on your page/site rather than only linking to it.

here is the difference:

https://www.youtube.com/watch?v=${videoId} - this kind of link is to watch youtube videos on browsers. This is just the same as other links.

https://www.youtube.com/embed/${videoId} - this kind of link is to put youtube videos on your page/site. This is called embedded content.

The purpose of embedding content is to keep readers on your site, make the experience better for the reader, and ideally, gain more loyal readers. Rather than sending your site visitors off to someone else's site, you keep them where your content is and keep them engaged so they stay with you longer and return more often.

Rivy

Answer 6

you can use the target="_blank" attribute.

Receptive

your answer can be made more clearer by mentioning why you are making this suggestion, otherwise, it can be posted as a coment – Electromotive