'Issue loading iframe url in angular

I have an angular application where in a particular component I am trying to iframe a url.

The iframe url is added in the html page of component with tag:- <iframe src="https://www.google.com"></iframe>

Added Content-Security-Policy for iframe url in index.html with below tag:-

<meta http-equiv="Content-Security-Policy" content="frame-src 'self' https://www.google.com data: blob:">

The box on webpage says "This content is blocked. Contact the site owner to fix the issue". On browser console it shows below error: Refused to frame 'https://www.google.com/' because it violates the following Content Security Policy directive: "frame-src data: blob:".

Also, I tried adding the Content-Security-Policy in angular.json with below code. It still throws the same error.

"headers":{
            "Content-Security-Policy-Report-Only": "frame-src 'self' https://www.google.com data: blob:"
          }

Please help to resolve.

htmlangularwebiframe


Solution 1:[1]

Websites can have response headers that let the browser know if they can be rendered in an iframe

Looking at the response headers when loading google.com I can see:

x-frame-options: SAMEORIGIN

Stackoverflow also prevents rendering in an iframe where the host is anything other than self (stackoverflow origin) or https://stackexchange.com

content-security-policy: upgrade-insecure-requests; frame-ancestors 'self' https://stackexchange.com

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Drenai

Related Questions