.svg)
Nowadays, adding content inside an iframe on an existing website is difficult, so it can prevent security risks like clickjacking. Hence, you can follow the below two methods to embed iframes on a website:
Remove X-Frame-Options
Some websites specify X-Frame-Options in the response header to control where the content can embed inside an iframe.
There are two possible values for X-Frame-Options:
- DENY: The browser will not render a page inside the iframe, irrespective of the domain of the parent page.
- SAMEORIGIN: The browser will render a page inside the iframe only if the page domain is the same as the domain of the parent page.
You can load the iframe on a website by removing the X-frame options from the response header.
Add the 'frame-ancestors' directive in CSP Header
You can achieve similar results by setting the Content-Security-Policy to use the frame-ancestors directive.
Using the directive Content-Security-Policy: frame-ancestors <source1> <source2> in the CSP headers, you can set multiple sites as parents for the iframe.
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. It is similar to specifying X-Frame-Options as DENY.
However, if you need to open sites in iframes for internal tooling, experimentation purposes, or development & testing scenarios, you will need a tool like Requestly to do the job.
Remove response headers using Requestly
Requestly is a browser extension that lets you Modify Headers, Redirect URLs, Switch hosts, Mock API responses, Delay network requests, Insert custom scripts, and do much more. Using the modify headers rule, we can easily add, modify and remove any response Headers before it reaches the browser.
Install the Requestly browser extension and set this rule like it is shown in the below screenshot to bypass the content security policy.
You can also share this rule with your colleagues by creating a shared list like this one.
.svg){kind=icon}
