iframes - what's the difference between hard-coding the URL vs dynamically loading it as a vari-CodePudding

I am working on a web development project with HTML, React, JavaScript and CSS.

We want to load an external web page in an iframe. We have the URL for that external resource.

Code snippet 1: the URL is hard-coded

<iframe src="myExternalResourceUrl" title="description"></iframe>

Code snippet 2: the URL is dynamically passed in as a variable

const _externalLink = "myExternalResourceUrl";

<iframe src={_externalLink} title="description"></iframe>

Code snippet 1 works and snippet 2 does not work. It gives security errors in the console.

because an ancestor violates the following Content Security Policy directive: "frame- 
ancestors 'self:

What's the difference between the two snippets from a security perspective? Is this something that the external resource can control?

CodePudding user response：

You need to add the website into your website's CSP (Content Security Policy, hence the error). To find out how to create one, go here. They're a widely supported policy to prevent injection scripts and to control what your browser can do. You're not the only one who has had issues with CSP Headers in the past, trust me...