Bug: iframe `src` attribute set incorrectly in jsx

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>

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:

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://..."}).

[zachsiegel-capsida]

SOLVED!

Per this StackOverflow comment, the string & in Javascript strings works slightly differently from HTML. In iframe src attributes in HTML, it’s not necessary to escape ampersands in this way, so I don’t know why Microsoft’s Sharepoint “embed” snippets are made that way.

I am able to change src={url} to src={sanitizeUrl(url)} where sanitizeUrl is the following function:

function sanitizeUrl(url) {
	return url.replaceAll('&', '&')
}

I would consider this issue closed.

[zachsiegel-capsida]

@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.