URL validation does not accept //

[c100k]

Describe the bug

URLs containing "//" are valid according to the spec. See dubzzz/fast-check#4935 for more details.

To Reproduce

const { strictEqual } = require('node:assert');
const { it } = require('node:test');
const { object, string } = require("yup");

it('should pass', async () => {
  const schema = object({
    url: string().url(),
  });

  const obj = {
    url: 'https://mqk2p.pe//',
  };
  const isValid = await schema.isValid(obj);

  strictEqual(isValid, true);
});

node index.test.js

✖ failing tests:

test at index.test.js:5:1
✖ should pass (7.207379ms)
  AssertionError [ERR_ASSERTION]: Expected values to be strictly equal:
  
  false !== true
  
      at TestContext.<anonymous> (/Users/toto/index.test.js:15:3)
      at async Test.run (node:internal/test_runner/test:632:9)
      at async startSubtest (node:internal/test_runner/harness:216:3) {
    generatedMessage: true,
    code: 'ERR_ASSERTION',
    actual: false,
    expected: true,
    operator: 'strictEqual'
  }

Expected behavior

This test is expected to pass because "//" is valid in a URL.

Platform:

• Browser [e.g. chrome, safari] : Node
• Version [e.g. 22] : 20

[thany]

Yup uses a regex for URL validation, which might not be the best way to go. It looks daunting at best, and is probably a nightmare to maintain. URLs are surprisingly versatile, and correctly validating all use-cases, and correctly rejecting genuinely invalid URLs, requires are LOT of work and a LOT of tests.

Instead I would propose doing something like this:

const isValidUrl = url => {
    try {
        new URL(url);
        return true;
    } catch (error) {
        return false;
    }
};

Source: https://stackoverflow.com/questions/1410311/regular-expression-for-url-validation-in-javascript

I know that answer isn't upvoted much at all, but it does seem solid, iyam. And there's zero regex maintenance. Just leave it to the browser.

[c100k]

Indeed this solution seems very elegant. However it causes problems on some platforms. For example, React Native ships with a custom implementation of URL that has lots of issues (see https://www.npmjs.com/package/react-native-url-polyfill for more details).