URL.href has an extraneous slash

[jsamr]

Description

As per the WHATWG URL standard, the below assertion should pass:

const url = "http://example.com/foo";
expect(new URL(url).href).toEqual(url);

But instead of http://example.com/foo, the result is http://example.com/foo/ (on Android and iOS). The issue is not reproducible on Web, since modern browsers follow the standard appropriately.

See the official test data from WHATWG here: https://github.com/web-platform-tests/wpt/blob/8959b13684b68186781340c044d9c1b62a388358/url/resources/urltestdata.json#L1976

React Native version:

System:
OS: Linux 5.9 Manjaro Linux
CPU: (8) x64 Intel(R) Core(TM) i7-8809G CPU @ 3.10GHz
Memory: 344.38 MB / 31.28 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.15.4 - /usr/bin/node
Yarn: 2.4.0 - ~/.node_modules/bin/yarn
npm: 6.14.11 - /usr/bin/npm
Watchman: 4.9.0 - /usr/bin/watchman
SDKs:
Android SDK:
API Levels: 28, 29, 30
Build Tools: 28.0.3, 29.0.0, 29.0.2, 29.0.3, 30.0.0, 30.0.1, 30.0.3
System Images: android-22 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.7042882
Languages:
Java: 1.8.0_275 - /usr/bin/javac
Python: 3.9.1 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: ^0.63.4 => 0.63.4
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

Execute the below code in Android or iOS:

const url = "http://example.com/foo";
console.info(new URL(url).href);

You'll notice an extraneous slash character at the end of the string.

Snack, code example, screenshot, or link to a repository:

See https://snack.expo.io/@jsamr/react-native-url-bug

[elicwhite]

Interesting, the examples on MDN include:

let m = 'https://developer.mozilla.org';
let a = new URL("/", m);                                // => 'https://developer.mozilla.org/'
let b = new URL(m);                                     // => 'https://developer.mozilla.org/'

[yungsters]

I think that the path needs to be normalized to start with /, which explains the following:

let m = 'https://developer.mozilla.org';
let a = new URL('/', m);  // => 'https://developer.mozilla.org/'
let b = new URL('', m);   // => 'https://developer.mozilla.org/'
let c = new URL('a', m);  // => 'https://developer.mozilla.org/a'

But other than that, we should not be appending /:

let m = 'https://developer.mozilla.org';
let a = new URL('a', m);  // => 'https://developer.mozilla.org/a'
let b = new URL('a/', m); // => 'https://developer.mozilla.org/a/'

Today, it seems like we are always appending / which is wrong.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.