Как нормализовать URL?

Question

Я имею дело с ситуацией, когда мне нужно, чтобы пользователи вводили различные URL-адреса (например: для своих профилей). Однако пользователи не всегда вставляют URL-адреса в формате https://example.com. Они могут вставить что-то вроде:

• example.com
• example.com/
• example.com/somepage
• но что-то вроде me@example.com или что-то еще не должно быть приемлемым

Как я могу нормализовать URL-адреса в формате, который потенциально может привести к веб-адресу? Я вижу это поведение в веб-браузерах. Мы почти всегда вводим дрянные вещи в панель веб-браузера, и они могут различить, является ли это поиском или чем-то, что можно превратить в URL.

Я пытался искать во многих местах, но мне кажется, что я не могу найти никакого подхода к этому.

Я бы предпочел решение, написанное для Node, если это возможно. Большое спасибо!

Answer 1

Вы хотите пакет normalize-url:

const normalizeUrl = require('normalize-url');

normalizeUrl('example.com/');
//=> 'http://example.com'

Он выполняет кучу нормализаций в URL.

Answer 2

Используйте API узла URL вместе с некоторыми ручными проверками.

1. Вручную проверьте, что URL имеет действительный протокол.
2. Создание URL-адреса.
3. Убедитесь, что URL не содержит дополнительной информации.

Пример кода:

const { URL } = require('url')
let myTestUrl = 'https://user:pass@sub.host.com:8080/p/a/t/h?query=string#hash';

try {
  if (!myTestUrl.startsWith('https://') && !myTestUrl.startsWith('http://')) {
    // The following line is based on the assumption that the URL will resolve using https.
    // Ideally, after all checks pass, the URL should be pinged to verify the correct protocol.
    // Better yet, it should need to be provided by the user - there are nice UX techniques to address this.
    myTestUrl = `https://${myTestUrl}`
  }

  const normalizedUrl = new URL(myTestUrl);

  if (normalizedUrl.username !== '' || normalized.password !== '') {
    throw new Error('Username and password not allowed.')
  }

  // Do your thing
} catch (e) {
  console.error('Invalid url provided', e)
}

Я использовал только http и https в этом примере для сущности.

Прямо из документации, приятная визуализация API:

┌─────────────────────────────────────────────────────────────────────────────────────────────┐
│                                            href                                             │
├──────────┬──┬─────────────────────┬─────────────────────┬───────────────────────────┬───────┤
│ protocol │  │        auth         │        host         │           path            │ hash  │
│          │  │                     ├──────────────┬──────┼──────────┬────────────────┤       │
│          │  │                     │   hostname   │ port │ pathname │     search     │       │
│          │  │                     │              │      │          ├─┬──────────────┤       │
│          │  │                     │              │      │          │ │    query     │       │
"  https:   //    user   :   pass   @ sub.host.com : 8080   /p/a/t/h  ?  query=string   #hash "
│          │  │          │          │   hostname   │ port │          │                │       │
│          │  │          │          ├──────────────┴──────┤          │                │       │
│ protocol │  │ username │ password │        host         │          │                │       │
├──────────┴──┼──────────┴──────────┼─────────────────────┤          │                │       │
│   origin    │                     │       origin        │ pathname │     search     │ hash  │
├─────────────┴─────────────────────┴─────────────────────┴──────────┴────────────────┴───────┤
│                                            href                                             │
└─────────────────────────────────────────────────────────────────────────────────────────────┘