Unicode characters are different from browser source code

[tobiasbrandstaedter]

Hey, hope everyone is doing fine.
Currently, I'm having the problem that I want to test my component and check for an earlier generated Base64 string (data url for an img).

cut.Markup.Should().Contain(_iconDto.Svg.ToBase64());

This is the code I use in my test.

public static string ToBase64(this string str)
{
    var toEncodeAsBytes = Encoding.UTF8.GetBytes(str);
    return Convert.ToBase64String(toEncodeAsBytes);
}

This is the method I use to generate the Base64 string.

However, my cut.Markup looks different from the actual HTML when I use my developer tools to inspect the component's source code in the browser. Special characters like ' or + get encoded to their unicode hex values url('data:image/svg+xml;base64,.

In the browser, it looks like url('data:image/svg+xml;base64,. I'm not quite sure why this occurs or how I could "fix" this without manually de/encoding the values. Any help on this is appreciated.

[linkdotnet]

Hey @tobiasbrandstaedter,

I can't really reproduce the behaviour, that Blazor unescapes those values:

<section style="background-image: url(&#x27;https://some-image.png&#x27;)">
 @test
</section>

@code {
  private const string test = "&#x27;Test&#x27;";
}

Will produce this output:

<section style="background-image: url(&#x27;https://some-image.png&#x27;)" b-9pdcu9z7mx="">
&amp;#x27;Test&amp;#x27;
</section>

Can you show how you are using the component?

Cheers
Steven

[tobiasbrandstaedter]

Hey @linkdotnet and thanks for the quick reply :)

So the component under test looks like this:

SetupServices();
_iconDto.Description = null;
var cut = RenderComponent<IconDetails>(parameters => parameters
    .Add(p => p.ClickedIcon, _iconDto)
);

IconDetails.razor

<div class="icon-detailview align-self-center">
    <div class="icon-img icon-img-detail" style="@GetStyleString()"></div>
</div>

IconDetails.razor.cs

private string GetStyleString()
{
    if (string.IsNullOrWhiteSpace(Icon.Svg)) return string.Empty;
    
    var dataUrl = "data:image/svg+xml;base64," + Icon.Svg.ToBase64();
    
    return $"mask-image: url('{dataUrl}'); -webkit-mask-image: url('{dataUrl}');";
}

So for example, while debugging my test case @GetStyleString() returns

mask-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTI4IDEyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCg1LjMzMzMzMzMzMzMzMzMzMywwLDAsNS4zMzMzMzMzMzMzMzMzMzMsMCwwKSI+PHBhdGggZD0iTTAuNzUwIDkuODEyIEE5LjA2MyA5LjA2MyAwIDEgMCAxOC44NzYgOS44MTIgQTkuMDYzIDkuMDYzIDAgMSAwIDAuNzUwIDkuODEyIFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMuMDU2IDQuNjIpIHJvdGF0ZSgtMjMuMDI1KSI+PC9wYXRoPjxwYXRoIGQ9Ik0xNi4yMjEgMTYuMjJMMjMuMjUgMjMuMjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSI+PC9wYXRoPjwvZz48L3N2Zz4='); -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTI4IDEyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCg1LjMzMzMzMzMzMzMzMzMzMywwLDAsNS4zMzMzMzMzMzMzMzMzMzMsMCwwKSI+PHBhdGggZD0iTTAuNzUwIDkuODEyIEE5LjA2MyA5LjA2MyAwIDEgMCAxOC44NzYgOS44MTIgQTkuMDYzIDkuMDYzIDAgMSAwIDAuNzUwIDkuODEyIFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMuMDU2IDQuNjIpIHJvdGF0ZSgtMjMuMDI1KSI+PC9wYXRoPjxwYXRoIGQ9Ik0xNi4yMjEgMTYuMjJMMjMuMjUgMjMuMjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSI+PC9wYXRoPjwvZz48L3N2Zz4=');

whereas cut.Markup looks like

<div class="icon-img icon-img-detail"
     style="mask-image: url(&#x27;data:image/svg&#x2B;xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTI4IDEyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCg1LjMzMzMzMzMzMzMzMzMzMywwLDAsNS4zMzMzMzMzMzMzMzMzMzMsMCwwKSI&#x2B;PHBhdGggZD0iTTAuNzUwIDkuODEyIEE5LjA2MyA5LjA2MyAwIDEgMCAxOC44NzYgOS44MTIgQTkuMDYzIDkuMDYzIDAgMSAwIDAuNzUwIDkuODEyIFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMuMDU2IDQuNjIpIHJvdGF0ZSgtMjMuMDI1KSI&#x2B;PC9wYXRoPjxwYXRoIGQ9Ik0xNi4yMjEgMTYuMjJMMjMuMjUgMjMuMjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSI&#x2B;PC9wYXRoPjwvZz48L3N2Zz4=&#x27;); -webkit-mask-image: url(&#x27;data:image/svg&#x2B;xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTI4IDEyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCg1LjMzMzMzMzMzMzMzMzMzMywwLDAsNS4zMzMzMzMzMzMzMzMzMzMsMCwwKSI&#x2B;PHBhdGggZD0iTTAuNzUwIDkuODEyIEE5LjA2MyA5LjA2MyAwIDEgMCAxOC44NzYgOS44MTIgQTkuMDYzIDkuMDYzIDAgMSAwIDAuNzUwIDkuODEyIFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMuMDU2IDQuNjIpIHJvdGF0ZSgtMjMuMDI1KSI&#x2B;PC9wYXRoPjxwYXRoIGQ9Ik0xNi4yMjEgMTYuMjJMMjMuMjUgMjMuMjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSI&#x2B;PC9wYXRoPjwvZz48L3N2Zz4=&#x27;);"
     b-1psx2y99xx>
</div>

The page's source code (inspected with dev tools) contains the special characters without displaying their unicode value

<div class="icon-img icon-img-detail"
     style="mask-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTI4IDEyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCg1LjMzMzMzMzMzMzMzMzMzMywwLDAsNS4zMzMzMzMzMzMzMzMzMzMsMCwwKSI+PHBhdGggZD0iTTAuNzUwIDkuODEyIEE5LjA2MyA5LjA2MyAwIDEgMCAxOC44NzYgOS44MTIgQTkuMDYzIDkuMDYzIDAgMSAwIDAuNzUwIDkuODEyIFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMuMDU2IDQuNjIpIHJvdGF0ZSgtMjMuMDI1KSI+PC9wYXRoPjxwYXRoIGQ9Ik0xNi4yMjEgMTYuMjJMMjMuMjUgMjMuMjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSI+PC9wYXRoPjwvZz48L3N2Zz4='); -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTI4IDEyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCg1LjMzMzMzMzMzMzMzMzMzMywwLDAsNS4zMzMzMzMzMzMzMzMzMzMsMCwwKSI+PHBhdGggZD0iTTAuNzUwIDkuODEyIEE5LjA2MyA5LjA2MyAwIDEgMCAxOC44NzYgOS44MTIgQTkuMDYzIDkuMDYzIDAgMSAwIDAuNzUwIDkuODEyIFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMuMDU2IDQuNjIpIHJvdGF0ZSgtMjMuMDI1KSI+PC9wYXRoPjxwYXRoIGQ9Ik0xNi4yMjEgMTYuMjJMMjMuMjUgMjMuMjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSI+PC9wYXRoPjwvZz48L3N2Zz4=');"
     b-71t5201lrw>
</div>

[linkdotnet]

Thanks @tobiasbrandstaedter, yes I could reproduce this very easily now. I thought it was the other way around.

<h3 style="@Escaped">@Escaped</h3>

@code {
	private string Escaped => "url('')";
}

Will produce the following marup:

<h3 style="url(&#x27;&#x27;)">url(&#x27;&#x27;)</h3>

@egil The reason lays here: https://github.com/bUnit-dev/bUnit/blob/main/src/bunit.web/Rendering/Internal/Htmlizer.cs#L275

We are encoding the input, which leads to the shown result. By the way the aspnet core abonded that "encode" line. I would do the same here: https://github.com/dotnet/aspnetcore/blob/main/src/Mvc/Mvc.ViewFeatures/src/RazorComponents/HtmlRenderer.cs#L239

If it's fine I would transform this into an issue and provide a fix?

[linkdotnet]

The issues is tracked by #898 and should be fixed with #899 .
@egil I thought I take the lead on this one, as I did the triage anyway.

[egil]

Hi @tobiasbrandstaedter, thanks for reporting this. I will push a prerelease version of bUnit to nuget.org in 10 minutes or so that you can use to get unblocked. Please report back if this fixes your issues.

[linkdotnet]

Okay I checked on my own - Blazor does not escape '. Everything good for your case :D

[linkdotnet]

See #947 - We missed some cases where we should escape

[tobiasbrandstaedter]

Ok @linkdotnet . Do you still want me to provide the code example? If so, I'd do this tomorrow since I do not have access to the source code right now.

[linkdotnet]

Hey thanks for the swift response @tobiasbrandstaedter .
No I am fine so far :) your case isn’t affected.
Basically we escaped too much than too less :)

if I need something I let you know- enjoy the holiday season

[tobiasbrandstaedter]

Thanks, enjoy your holidays as well :)