2

I use blazor with .net core 3.0 to develop a website that allow to pass some parameters in URL.

The problem is whenever I pass a Vietnamese keyword in the URL, the blazor throw an inner exception that appears on Browser console.

Please be aware of that I cannot use Encode URL to extract that information since the blazor throw exceptions by it-self before OnAfterRenderAsync calling

Work

https://localhost:44316/?keyword=tieng viet
https://localhost:44316/?keyword=tieng%20viet

Not Work

https://localhost:44316/?keyword=tiếng việt
https://localhost:44316/?keyword=tiếng%20việt
https://localhost:44316/?keyword=ti%E1%BA%BFng%20vi%E1%BB%87t

How to reproduce:

  • Just create a completely new blazor project with .net core 3.0.
  • Then start the project and try with these urls.

=> Since I don't add any extra code here, the blazor should not throw any exceptions

Here is the exception: Here is the exception

Thanks for help!

Hieu Le
  • 1,042
  • 8
  • 18
  • 1
    Does this answer your question? [URL Encode and Decode in ASP.NET Core](https://stackoverflow.com/questions/44920875/url-encode-and-decode-in-asp-net-core) – mjwills Nov 04 '19 at 03:51
  • 1
    @mjwills I don't think so since the blazor should handle perfectly by default for any parameters come. We can decode the parameter values later it's okay. The problem is the blazor throws exceptions by itsself – Hieu Le Nov 04 '19 at 04:00
  • 1
    Step 1, blazor should not throw exceptions, step 2 we can decode parameters and get what we need. – Hieu Le Nov 04 '19 at 04:03
  • Does it work if you use my suggested URL? – mjwills Nov 04 '19 at 04:22
  • @mjwills no, it doesn't. Also throw exceptions – Hieu Le Nov 04 '19 at 04:48
  • It is thrown in visual studio. It is shown in in browser console as the attachment I put saying "The uris provided are invalid" – Hieu Le Nov 04 '19 at 06:52
  • 2
    Does https://localhost:44316/?keyword=ti%E1%BA%BFng+vi%E1%BB%87t work? – mjwills Nov 04 '19 at 09:06
  • @mjwills sorry guy, your suggestion is work fine. I did check wrong way. Thank you! – Hieu Le Nov 05 '19 at 02:40
  • Maybe I did check with percent encoding, not + one – Hieu Le Nov 05 '19 at 02:48
  • To be fair, %20 **should** work. Its perfectly legitimate. – mjwills Nov 05 '19 at 02:54
  • Yeah, it's weird. I use QueryHelpers.AddQueryString to generate the URL. It gives me %20 ones, not +. So, from now one, I have to encode and decode every time – Hieu Le Nov 05 '19 at 03:02

2 Answers2

2

I have to encode and decode every time

Not sure whether it is a bug. However, you don't have to encode and decode every time. As a walkaround, we can create a quick and dirty fix so that the space within the querystring is converted to +.

Since this error happens when invoking remote signalR ComponentHub::StartCircuit() method, we can replace the location before it is passed to siganlR. Based on @mjwills's above comment that suggests localhost:44316/?keyword=ti%E1%BA%BFng+vi%E1%BB%87t, you can add a script in your _Host.cshtml as below:

<script>
    !function(){
        var raw = new URL(window.location.href);
        raw.search = raw.search.replace("%20","+");    // replace the `%20` with "+"
        window.history.replaceState('', document.title, raw);
    }();
</script>
<script src="_framework/blazor.server.js"></script>

By this way, your server side code doesn't have to care about the encoding.

itminus
  • 23,772
  • 2
  • 53
  • 88
  • Your idea works bro. I did the navigation in OnInitializedAsync if the URL contains %20, however it just works for ServerPrerendered, not others – Hieu Le Nov 06 '19 at 02:40
1

First things first: This is nothing Blazor specific

You are simply using an URI which is not valid. Each character used in an URI must have a corresponding characters via US-ASCII table.

Blazor is just calling Uri.IsWellFormedUriString which returns false for your given example.

As others have pointed out the solution is to encode the url. This has to be done before that URL is used to navigate to a blazor page.

Postlagerkarte
  • 6,600
  • 5
  • 33
  • 52
  • I thought the same, but tried the OP's repro steps and discovered that while https://localhost:44316/?keyword=ti%E1%BA%BFng+vi%E1%BB%87t worked, https://localhost:44316/?keyword=ti%E1%BA%BFng%20vi%E1%BB%87t didn't (and the latter definitely **is** a valid URL) – mjwills Nov 04 '19 at 10:48
  • 1
    I believe your statement that it is caused by`Uri.IsWellFormedUriString`. What confused me is when pasting `https://localhost:44316/?keyword=tiếng việt` to chrome, it will be encoded to `keyword=tiếng%20việt` instead of `keyword=tiếng+việt`. According to this [thread](https://stackoverflow.com/questions/1634271/url-encoding-the-space-character-or-20) , it seems that the `%20` should be considered as a valid URL ? – itminus Nov 04 '19 at 10:51
  • @mjwills sorry everyone. After reading your comments again. I have tried. It works! – Hieu Le Nov 05 '19 at 02:42
  • So, basically, as you mentioned, I don't understand why "space character" is converted to "%20", not "+" – Hieu Le Nov 05 '19 at 02:43