Differences between Firefox and Chromium JavaScript URL validation with new URL()

Question

I'm trying to validate URLs in JavaScript and according to MDN JavaScript's URL API is compatible with Chromium browsers and Firefox. However the behaviour varies between the two engines. Specifically it seems like Chromium browsers are far more lenient and automatically apply encoding where Firefox doesn't.

I've tried encoding the URL myself first before validating with encodeURI('https://abc.co m'), but Firefox also doesn't accept https://abc.c%20m as a valid URL, so I'm stumped as to how I can have a good way to support both browsers without having to resort to regex.

I'm not sure why they are different, or who is correct. What is a consistent, correct approach with cross browser support for this?

Runnable snippet:

const url = new URL("https://abc.c%20m");
console.log(url.hostname);

I took a quick look at the URL spec, and it seems that — according to your screenshots — Chrome is failing the decode step 4 of § 3.5 Host parsing (unless I misread it). I added a runnable snippet to the question so that others can reproduce your claims by clicking a button. — jsejcksn
– jsejcksn, Commented Aug 15, 2024 at 8:59
@jsejcksn - no, you read it right ... domain can not contain space, nor can it contain %, so no excuse for chromium fail — Jaromanda X
– Jaromanda X, Commented Aug 15, 2024 at 9:34
Are you asking how to get Firefox to accept (or otherwise signify no issues with) a URL that has a space, encoded or otherwise? Or are you trying to get them both to report the correct (as per the spec and actual implementations) result? — TylerH
– TylerH, Commented Aug 15, 2024 at 15:13
@TylerH well of course I'd like for both to produce the correct result. Traffic on my app comes from Chromium browsers only, Edge to be specific, so not sure if this is even a viable approach anymore because it seems to be a bug in Chrome. What would you do? — Florestan Korp
– Florestan Korp, Commented Aug 16, 2024 at 8:02
^ @FlorestanKorp You can either write your own implementation of a URL parser that conforms to the spec or audit the source code of an existing one that claims to and use it. One such example is whatwg-url (repo, demo using the input in your question). — jsejcksn
– jsejcksn, Commented Aug 16, 2024 at 9:21

jsejcksn · Accepted Answer · 2024-08-16 15:53:50Z

2

Browsers can have bugs, just like all other software. According to your screenshots, it appears that Chrome didn't properly parse the URL according to the specification — specifically step 4 (decode) of § 3.5 Host parsing. A space character (whether percent-encoded or not) isn't allowed in a hostname.

In cases like this — where you have to work around bugs in the implementation code used by native APIs in your runtime (e.g. the URL constructor or its canParse() static method) — you can either write your own JavaScript implementation of a URL parser that conforms to the spec or audit the source code of an existing one that claims to do so ¹ and use it instead.

¹ One such example is the whatwg-url package (repository) — here's a link to a demo using the input in your question: https://jsdom.github.io/whatwg-url/#url=aHR0cHM6Ly9hYmMuYyUyMG0=&base=YWJvdXQ6Ymxhbms=

answered Aug 16, 2024 at 15:53

jsejcksn

34.6k5 gold badges55 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kaiido Over a year ago

Please also report such bugs when you find them. This one was reported at issues.chromium.org/issues/40124263 Turns out it's currently an assumed discrepancy.

Collectives™ on Stack Overflow

Differences between Firefox and Chromium JavaScript URL validation with new URL()

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related