¿Que hace este método?

El nuevo método canParse() en JS hace algo relativamente simple. Este método del objeto URL simplemente verifica si una url es válida o no devolviendo true o false, ahorrándole código al programador.

Sintaxis

La sintaxis es verdaderamente fácil. Simplemente llamas al objeto URL y luego llamas al método canParse() del objeto con la url de argumento.

URL.canParse(url);

El método también acepta un segundo argumento base en caso de que la url sea relativa.

URL.canParse(url, base);

Ejemplos

• URL NO relativa:

  let result = URL.canParse("https://www.google.com/");
  console.log(result);

  El código anterior escribe true en consola, mientras que el siguiente retorna false

  let result = URL.canParse("google.com/");
  console.log(result);

  Esto debido a que google.com/ es una url relativa y sin protocolo.

• URL relativa:

  let base = "https://www.";
  let url = "google.com/";
  let result = URL.canParse(url, base);
  console.log(result);

  Otra forma seria:

  let result = URL.canParse("google.com/", "https://www.");
  console.log(result);

  En ambos casos el método retorna true.

  La base se puede usar cuando quieres hacer llamados a múltiples endpoints de una misma API definiendo la base como la API y la url como el endpoint de la API. Ejemplo:

  let api = "https://miapi.com/";
  let endpoint = "movies";
  let result = URL.canParse(endpoint, api);
  console.log(result);

• URL incorrecta:

  Obviamente un método hecho para verificar urls retorna false en caso de que el argumento no sea una url.

  let result = URL.canParse("esto no es una url");
  console.log(result);

  Debido a que el argumento no es una url, el código retorna false

Usos

Un uso que se le puede dar a este método es el de verificar urls en caso de que puedan ser entregadas por el usuario o puedan variar de alguna u otra forma, así se puede aumentar la seguridad de un api o una página/aplicación web, pues si la supuesta url no es válida se puede simplemente desechar y enviar un mensaje de error en su lugar.

Con que tener cuidado

1. Una url para ser una url tiene que tener un protocolo al inicio, el más común hoy en día es el protocolo https:, pero este método verifica como reales urls con cualquier protocolo como ftp: o incluso uno inventado como protocoloaleatorio:, por lo que hay que tener cuidado con el protocolo de la url antes o después de analizar con canParse(). Ejemplo:

   let result = URL.canParse("protocoloaleatorio://dominio.com");
   console.log(result);

   A pesar de que el protocolo protocoloaleatorio no existe, el código retorna true

2. Otro problema que puede haber es que el método también acepta como válidas las urls con puertos al final, por lo que si no quieres usar urls con puertos específicos o quieres evitar llamadas a código malicioso a través de este método tienes que tener cuidado con esto. Ejemplo:

   let result = URL.canParse("https://dominio.com:1223");
   console.log(result);

   Ya sea que el puerto este abierto o no o exista algo en él o no, canPars() va a decir que es una url valida, por lo que también hay que tener cuidado con esto.

3. Por último, canParse() no verifica si la url existe o no, solo si la sintaxis entregada es la correcta para una url. Ejemplo:

   let result = URL.canParse(
     "https://ohpoiufgbsohdfbgousydfvyubrouyvodsjhcgboizuxgf9auysgasdfasfasdfasdsndbgvsdfvcsdgsfgsdfrgfd--srtwfoujhage.com"
   );
   console.log(result);

   A pesar de que muy probablemente el dominio del ejemplo no exista el método sigue retornando true, así que trata de revisar si el dominio es conocido o no.

Compatibilidad

Por muy útil que pueda ser este nuevo método, aun no es soportado por todos los buscadores, sino que, por ahora solo es soportado por firefox y parcialmente por safari, también es soportado por node.js y la alternativa a node deno. Todos los buscadores basados en Chromium aun no soportan este nuevo método.

• fuente MDN

Conclusión

Este nuevo método promete facilitar la vida de los programadores a la hora de verificar una url antes de hacer fetch o enviarla a algún lado o hacer cualquier cosa con ella realmente, pero aun es muy nuevo y no tiene compatibilidad con todos los buscadores sin contar de que aún hay que tener cuidado al verificar protocolos y puertos, ya que estos siguen siendo urls validas de todas maneras.