How to set content-security-policy header?

Question

The website https://www.example.com with header content-security-policy: frame-ancestors 'self'; is unable to open with <iframe>

This website contain a shareable url like https://www.example.com/#/shareablelink which should be allowed to open in <iframe> but as header content-security-policy: frame-ancestors 'self'; also applied to this page, it is not working as expected.

Is there any way do so?

Its frontend is build on angular 5+

Answer 1

HTTP headers publish on the backend (server), so only the site owner can change those.

Link (https://www.example.com/#/shareablelink) with hash # works tricky:

• part before # is served by server - be sends to server on click and will get reply from server (if you do not handle onClick by script in browser)
• part after # is served locally in browser (by script or by built-in browser navigation) and never be sent to server

Therefore CSP HTTP header on the page https://www.example.com/#/shareablelink always will be the same as on https://www.example.com/. The part #/shareablelink normally is a scroll to '/shareablelink' anchor, or could be handled by javascript for any purposes (even send XMLHttpRequest to server, get response and change the page's content but not the HTTP header)