Bug: iframe `src` attribute set incorrectly in jsx

This issue has been tracked since 2022-09-06.

My MWE is a very simple iframe:

<iframe src="https://content.com"></iframe>

This works just fine (full iframe code below).

If I wrap the src attribute's value in curly braces (code below), I get the following:

<iframe src={"https://content.com"}></iframe>

image

image

The actual iframe content is an embedded Powerpoint presentation:

<iframe
src="https://capsida.sharepoint.com/sites/sitename/_layouts/15/Doc.aspx?sourcedoc={xxxxxx}&amp;action=embedview"
width="476px"
height="288px"
frameBorder="0">
</iframe>

React version:

Steps To Reproduce

  1. Open this Stackblitz. You should not be able to see the embedded Powerpoint content, but the iframe should load correctly (you should see a Microsoft login screen).
  2. Wrap the src="https://..." in curly braces: src={"https://..."} and save the component. Now the iframe does not load! You can see the screenshots below to observe this phenomenon:

image

image

The current behavior

My real example is something like src={url}, where url is a state variable. The issue is not that I want to wrap the attribute in curly braces, it's that this iframe loads differently when the attribute is hard-coded into the jsx versus loaded from javascript via curly braces {url}.

I also recognize that Microsoft's Powerpoint embedding logic may forbid cross-origin embedding, and I want to emphasize that this is clearly not the issue here despite the Chrome console message. If cross-origin embedding was the issue, the iframe should equally fail with or without curly braces.

The expected behavior

I expect the iframe to load (or not load) the same way regardless of whether its src attribute is passed as an HTML attribute in jsx (src="https://...") or as a jsx attribute (src={"https://..."}).

Noah670 wrote this answer on 2022-09-07

iFrames are chaotic evil in react

zachsiegel-capsida wrote this answer on 2022-09-07

@Noah670 99.9% of the time I would assume I am doing something wrong and that the React developers would call my issue a mis-use rather than a bug, but I think my MWE is very compelling. I doubt many people would see the MWE and expect it to succeed/fail depending on those curly braces.

zachsiegel-capsida wrote this answer on 2022-09-08

Created this Stackblitz documenting several attempted solution paths referenced here, here, and here.

FrameMuse wrote this answer on 2022-09-16

I just ran your code and it works as intended, I think you have a problem with word breaks, in the screenshots you have a break at {f8c, it might be just adding \n to your url.

I tested it via const url = "...", via jsx {"..."}, "..." - every method works the same.

And I'm not a React Maintainer :)

FrameMuse wrote this answer on 2022-09-16

If I wrap the src attribute's value in curly braces (code below), I get the following:

<iframe src={"https://content.com"}></iframe>

image

This is funny how you put https://content.com and getting error with capsida.sharepoint.com.

zachsiegel-capsida wrote this answer on 2022-09-16

@FrameMuse thank you for this response! I'm not sure what I'm missing, please help me out:

  • The "break" in my URL at {f8c is just word wrap - there is no newline there at all.
  • If you run the Stackblitz, do you indeed see the iframes embedding the page successfully with the JSX-style src={"..."} attribute?

To clarify, I wrote https://content.com to make it easier to glance at the code. I included the full embedded link (to some non-sensitive published test content from my company's Microsoft Sharepoint service) in the Stackblitz.

I don't claim that every iframe will fail to render with a JSX-style src attribute, and I have certainly used this pattern with other embedded content successfully. My question is why for any content would using a JSX-style attribute cause some sort of error (cross-origin or otherwise) when using regular HTML attributes within the same JSX component would succeed?

FrameMuse wrote this answer on 2022-09-16

@zachsiegel-capsida I clearly see that the attribute src is putting correctly, but the content is loading endlessly (probably because of my location or any other reason).

I drop a screenshot for you
image

FrameMuse wrote this answer on 2022-09-16

Did you tested it in a "local environment" (I mean server that is running locally on your computer) or only on Stackblitz?

FrameMuse wrote this answer on 2022-09-16

And also in your example with iframe code you misput action=embedview to src attribute, see it in your code

<iframe
src="https://capsida.sharepoint.com/sites/sitename/_layouts/15/Doc.aspx?sourcedoc={xxxxxx}&amp;action=embedview"
width="476px"
height="288px"
frameBorder="0">
</iframe>

It should be

<iframe
src="https://capsida.sharepoint.com/sites/sitename/_layouts/15/Doc.aspx?sourcedoc={xxxxxx}&amp;"
width="476px"
height="288px"
frameBorder="0"
action="embedview">
</iframe>
More Details About Repo
Owner Name facebook
Repo Name react
Full Name facebook/react
Language JavaScript
Created Date 2013-05-24
Updated Date 2022-10-03
Star Count 195549
Watcher Count 6650
Fork Count 40505
Issue Count 1119

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date