Blazor: Single-Quoted Attribute is rendered as Double-Quoted

[TPIvan]

Describe the bug

When an attribute is enclosed in single quotes in razor markup (onclick='alert("hello")') it is rendered with double quotes to HTML output (onclick="alert("hello")"). The resulting syntax is invalid (Uncaught SyntaxError: Unexpected end of input). The issue can be connected with Compiler error with mixed content in onclick attribute #5605 - Open oct 2018 or Blazor Codegen does not escape quotes #15558 - Closed

To Reproduce

1. In any razor component (e.g. Index.razor in standard blazor project) add

       <button onclick='alert("hello")'>hello</button>
   

2. Run the project (and go to component)

3. In the browser check what is rendered (usually right click inspect or inspect element):

       <button onclick="alert("hello")">hello</button>
   

4. Notice change ' to ".

Further technical details

• ASP.NET Core version
  .NET Core SDK (reflecting any global.json):
  Version: 3.1.101
  Commit: b377529961

Runtime Environment:
OS Name: Windows
OS Version: 10.0.18362
OS Platform: Windows
RID: win10-x64
Base Path: C:\Program Files\dotnet\sdk\3.1.101\

Host (useful for support):
Version: 3.1.1
Commit: a1388f194c

.NET Core SDKs installed:
2.1.202 [C:\Program Files\dotnet\sdk]
2.1.509 [C:\Program Files\dotnet\sdk]
2.2.103 [C:\Program Files\dotnet\sdk]
3.1.101 [C:\Program Files\dotnet\sdk]

.NET Core runtimes installed:
Microsoft.AspNetCore.All 2.1.0 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.All 2.1.13 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.All 2.1.15 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.All 2.2.1 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.App 2.1.0 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 2.1.13 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 2.1.15 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 2.2.1 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 3.1.1 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.NETCore.App 2.0.9 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 2.1.13 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 2.1.15 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 2.2.1 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 3.1.1 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.WindowsDesktop.App 3.1.1 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

• The IDE (VS / VS Code/ VS4Mac) you're running on, and it's version
  Visual Studio 16.4.5

[SteveSandersonMS]

Blazor doesn't render HTML strings; it builds the DOM programmatically. As such it doesn't use any type of quote character. When the browser presents a view of the DOM in its inspector window, it's picking an arbitrary representation for the programmatically-built content.

Hope this makes sense!

[SteveSandersonMS]

(There is one case where Blazor does render HTML strings, which is server-side prerendering. In this case we're still building a DOM representation programmatically and then serializing it as HTML, but the exact format for that serialized representation isn't defined or guaranteed - it just has to be a valid representation.)

[TPIvan]

I think it is not correct. The user have to be aware that onclick='alert("hello")' will cause not valid HTML output, but onclick="alert('hello')" will produce valid html output. WebForms doesn't change quotes and result is always correct.

[SteveSandersonMS]

Try adding such an attribute to any of your Blazor components. I believe it will work fine, since we produce valid DOM updates. If you have any trouble, could you file a bug with repro steps?

[TPIvan]

When I have:

 <InputText id="name" @bind-Value="_exampleModel.Name" onclick='alert("hello")' style="background-image: url('paper.gif');"   />
 <button type="submit" onclick='alert("hello")' style="background-image: url('paper.gif');" >Submit</button>

It renders:

   <input id="name" onclick="alert(&quot;hello&quot;)" style="background-image: url(&#x27;paper.gif&#x27;);" class="valid" />
   <button type="submit" onclick="alert("hello")" style="background-image: url('paper.gif');">Submit</button>

So component renders correctly (escapes quotes on both attributes).
HTML element renders style correctly but script is wrong.
Do you still consider this behavior correct?

[SteveSandersonMS]

Thanks @TPIvan, that's a very helpful clarification!

In the case of the <button> element there I see we do have a problem. I've filed #20950 to follow up on this.

Thanks for reporting this!