[SOLVED] iframes – what’s the difference between hard-coding the URL vs dynamically loading it as a variable?


This Content is from Stack Overflow. Question asked by user1261710

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?


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…

This Question was asked in StackOverflow by user1261710 and Answered by Gage It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?