Blockers in iframe embedding
Today's internet makes it quite difficult to add some content inside an
iframe on an existing website. This is done to prevent security risks like clickjacking
There are two main methods through which mordern websites achieve this are as follows
Some websites specify X-Frame-Options in the response header when they want to have control over wher there content can be embedded inside
There are two possible values for
- DENY: Browser will not render page inside frame irrespective of the domain of parent page.
- SAMEORIGIN: Browser will render page inside iframe only if page domain is same as domain of parent page.
frame-ancestors directive in CSP Header
Similar results can be achieved by setting the
Content-Security-Policy to use
frame-ancestor directive in the CSP headers, one can allow multiple sites as parents for the iframe as
Content-Security-Policy: frame-ancestors <source1> <source2>
Here, the source can be one of the following
- URL : Specify parent's source
- 'self' : Refers to the source from where the content is generated
- 'none' : Indicates an empty set. This has the same effect as specifying
But what if we need to open sites in iframes for internal tooling, experimentation purposes or development & testing scenarios?
Remove Response Headers using Requestly
Requestly is a simple and 1-click solution using which you can bypass response headers and enable embedding sites in Iframe
Using the modify headers rule, we can easily add, modify and remove any Response Headers before it reaches the browser.
You only need to install the Requestly browser extension and set this rule
No further setup is required
You can also share this rule with your colleagues by creating a shared list like this one