javascript - How to restrict website to load only inside an iframe?

Question

I have two web sites:

• https://exampleiframe.com (third-party website),
• https://example.com (my website)

I want to restrict https://example.com to load only inside iframe of https://exampleiframe.com

I have added ??? below CSP in the response header for https://example.com.

"Content-Security-Policy": "frame-ancestors 'self' https://exampleiframe.com"

This policy only restricts when the request is coming from an iframe. But I don't want to load this url (https://example.com) anywhere other than this iframe.

Answer 1

If you wish to restrict direct access to page via Url and allow show it in iframe only - it's not solvalble with CSP. CSP only restricts Urls for framing (you shown correct CSP for that).

But you can use JavaScript and if self === top perform redirect to /not_allowed Url.
Myy be it's possible to use some data- attribute like <iframe data-access='framed' src=''></iframe> and check this attribute by JS inside iframe (if it is accessible). Direct Url will not have such data- attribute.

But such check will fail with disabled javascript.