Bug: iframe `src` attribute set incorrectly in jsx

This issue has been created 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-09-26
Star Count 195293
Watcher Count 6655
Fork Count 40426
Issue Count 1113

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
core dump on 0 Hz minimum note 0 2021-12-20 2022-07-09
Can't add new cryptocurrencies market 3 2021-02-25 2022-07-13
name 'Timeframe' is not defined 0 2022-01-18 2022-08-16
Is the stock data from Finam dividend adjusted? 1 2021-09-15 2022-04-05
Get error when load EURUSD 15min period for period more than 1 year 0 2021-11-20 2022-08-01
method_of_morris.jl overwrites functions in method_of_morris_v2.jl 1 2022-05-01 2022-08-17
Not Banning Failed Attempts With Real Username 0 2021-01-09 2022-08-12
the fail2ban part itself seems to not work in a wp-mu setup 6 2020-12-25 2022-08-01
Implement Basic Enums in Derive 1 2022-02-05 2022-09-13
Removal of public symbols from installer 0 2022-07-01 2022-09-14
[BUG] - if not res["hasMore"] and not first: KeyError: 'hasMore' 13 2021-09-17 2022-06-29
isValidNumber returning false for US Area Code 840 0 2022-03-21 2022-08-14
Always get 'DeviceTokenNotForTopic' in production mode 4 2021-01-13 2022-09-02
Add hook for custom HTTP failures 0 2021-01-12 2022-06-23
Option to remove redundant subdomains 5 2021-01-10 2022-08-20
Does Giraffe compatible with BGISQ? 5 2022-03-30 2022-07-09
New release? 1 2020-06-04 2022-01-16
MarkDown navigation uses absolute paths 2 2021-11-05 2022-09-06
Komorebi is not working properly 0 2019-12-23 2022-09-03
Exclude option 8 2016-04-07 2022-01-12
A Boy and His Blob [NPUB31614] - Flickering/Corrupt/Swapped Textures on Vulkan 4 2022-05-16 2022-09-27
oneOf Discriminator shows also implicit mappings when references are defined in a custom section 0 2021-12-02 2022-09-17
eglew.h appears to be missing struct declarations 2 2020-03-17 2022-09-19
Add test that a failed safety check returns safety check revert message 0 2021-04-10 2022-09-08
v2cli -X build w/o Tectonic.toml misleading error 1 2021-08-16 2022-09-26
should `print` method also include logged BF values? 2 2021-07-23 2022-09-15
Parallel walk? 1 2021-10-12 2022-01-13
toupper prerequisites are incorrect 0 2021-08-18 2022-08-18
Streaming error in vcluster: Error streaming logs for ... INTERNAL_ERROR 11 2021-06-02 2022-09-14
Expose an HTTP Healthcheck for Temporal server 7 2022-08-18 2022-08-31
RESEARCH: Future of Authorization 0 2022-05-13 2022-09-15
Disable field and stop yup validation. 1 2021-06-11 2022-07-17
Swiftlint: Empty parantheses with trailing closure 0 2022-05-11 2022-09-09
Stop Littering the Documents folder with useless Wallpaper files 2 2022-05-12 2022-09-14
Swiftlint: Empty parameters 0 2022-05-11 2022-09-04
Error handling issue 3 2021-03-01 2022-07-22
[Navigation Architecture] Rename "Contribute" to "Get Involved" 2 2021-04-01 2022-09-20
[g-canvas] 同时应用 Text 的 letterSpacing 与 textAlign 属性问题 0 2022-01-17 2022-07-28
[WFX-174] Enable tab toolbar repositioning with… 0 2021-08-09 2021-12-29
[WIP] Test parallel 0 2021-08-22 2022-01-08
[Feature Request] 什么时候@formily/antdv 可以提供一个vue3 antv.3x的版本 3 2022-04-26 2022-08-26
Implement tests using utPLSQL and configure CI 0 2017-07-14 2022-09-22
Discuss destructuring assignment? 0 2021-12-11 2022-09-22
[新功能请求]获取群员资料时能够获取到该成员的群称号(荣誉) 3 2022-06-29 2022-09-06
SD Card Mounting in WSL2 from Win 11 and a USB Card Reader 16 2022-05-13 2022-09-08
Please include (man7) Salt docs in salt-common, and/or as a similarly required separate package 1 2018-06-12 2022-09-23
Rebuild pkgs/main repodata => wrong dependencies for libtiff & blosc 2 2022-01-14 2022-09-20
存在转换后被调用方法未实现的问题 0 2021-04-22 2022-01-15
Android12系统,如果修复的内容没有dex变化,如只有(So、资源变化)时,在Android12系统以下可以生效,但Android 12.0上无效。 1 2022-01-31 2022-04-27
Migrate vertical-pod-autoscaler to k8s.io/klog/v2 6 2021-09-17 2022-08-02