Guía Completa de Análisis y Codificación URL: De la Estructura al Tratamiento Seguro

Codificación

Estructura Completa de URL

https://user:pass@example.com:8080/path/to/page?name=value&age=25#section
  │       │     │    │          │  │   │            │                │
  scheme  user  pass  host      port path           query            fragment
Componente Ejemplo Descripción
scheme https Protocolo
userinfo user:pass Información de autenticación (raramente usado)
host example.com Dominio o IP
port 8080 Número de puerto (por defecto 80/443)
path /path/to/page Ruta
query ?name=value&age=25 Parámetros de consulta
fragment #section Ancla (no se envía al servidor)

Análisis con la API URL

Análisis básico

const url = new URL('https://example.com:8080/path?q=test#section');

url.protocol  // "https:"
url.hostname  // "example.com"
url.port      // "8080"
url.pathname  // "/path"
url.search    // "?q=test"
url.hash      // "#section"
url.origin    // "https://example.com:8080"
url.href      // URL completa

Análisis de parámetros de consulta

const url = new URL('https://example.com/api?name=Alice&age=25&tags=js&tags=css');

// URLSearchParams
url.searchParams.get('name')     // "Alice"
url.searchParams.get('age')      // "25"
url.searchParams.getAll('tags')  // ["js", "css"]
url.searchParams.has('name')     // true
url.searchParams.delete('age')

// Iterar
for (const [key, value] of url.searchParams) {
  console.log(`${key} = ${value}`);
}

Modificar URL

const url = new URL('https://example.com/page');

url.pathname = '/new-page';
url.searchParams.set('sort', 'desc');
url.searchParams.append('filter', 'active');
url.hash = '#top';

console.log(url.toString());
// "https://example.com/new-page?sort=desc&filter=active#top"

Reglas de Codificación URL

¿Por qué es necesaria la codificación?

Las URLs solo permiten caracteres ASCII, otros caracteres deben codificarse:

Original: https://example.com/search?q=你好 世界
Codificado: https://example.com/search?q=%E4%BD%A0%E5%A5%BD%20%E4%B8%96%E7%95%8C

encodeURI vs encodeURIComponent

Función Alcance de codificación Uso
encodeURI Conserva caracteres estructurales de URL (:/?#[]@!$&'()*+,;=) Codificar URL completa
encodeURIComponent Codifica todos los caracteres no ASCII + caracteres reservados Codificar valores de parámetros de consulta 
const url = 'https://example.com/path?name=你好&redirect=/home';

// encodeURI: conserva la estructura de URL
encodeURI(url);
// "https://example.com/path?name=%E4%BD%A0%E5%A5%BD&redirect=/home"

// encodeURIComponent: codifica todos los caracteres especiales
encodeURIComponent(url);
// "https%3A%2F%2Fexample.com%2Fpath%3Fname%3D%E4%BD%A0%E5%A5%BD%26redirect%3D%2Fhome"

// ✅ Uso correcto: valores de parámetros con encodeURIComponent
const name = '你好 世界';
const redirect = '/home';
const fullUrl = `https://example.com/path?name=${encodeURIComponent(name)}&redirect=${encodeURIComponent(redirect)}`;

Tabla de codificación común

Carácter Codificación Descripción
Espacio %20 No usar + en URL
+ %2B En parámetros de consulta + se decodifica como espacio
& %26 Separador de parámetros de consulta
= %3D Separador clave-valor
# %23 Identificador de ancla
% %25 Prefijo de codificación en sí
Chino %E4%BD%A0 Codificación UTF-8 de tres bytes

Usar ToolsKu para Codificar/Decodificar URL

  1. Abre la herramienta de Codificación/Decodificación URL
  2. Pega la URL o texto en el campo de entrada
  3. Haz clic en "Codificar" o "Decodificar"
  4. Consulta el resultado

Tratamiento Seguro de URL

1. Prevenir inyección de URL

// ❌ Peligroso: concatenar directamente la entrada del usuario
const url = `/api/users/${userId}`;

// ✅ Seguro: validar + codificar
function buildUserUrl(userId) {
  if (!/^\d+$/.test(userId)) {
    throw new Error('Invalid user ID');
  }
  return `/api/users/${encodeURIComponent(userId)}`;
}

2. Prevenir redirección abierta

// ❌ Peligroso: el usuario puede especificar cualquier URL de redirección
app.get('/login', (req, res) => {
  res.redirect(req.query.redirect);
});

// ✅ Seguro: validación con lista blanca
function safeRedirect(url, allowedHosts) {
  try {
    const parsed = new URL(url, 'https://example.com');
    if (allowedHosts.includes(parsed.hostname)) {
      return url;
    }
  } catch {
    // URL inválida
  }
  return '/'; // Redirigir a la página de inicio
}

3. Prevenir XSS vía URL

// ❌ Peligroso: protocolo javascript:
const url = 'javascript:alert(document.cookie)';

// ✅ Seguro: solo permitir protocolos http/https
function sanitizeUrl(url) {
  try {
    const parsed = new URL(url);
    if (['http:', 'https:'].includes(parsed.protocol)) {
      return url;
    }
  } catch {
    // URL inválida
  }
  return 'about:blank';
}

API URLPattern (Nuevo Estándar)

// Coincidencia de rutas
const pattern = new URLPattern({ pathname: '/api/users/:id' });

const result = pattern.exec('https://example.com/api/users/123');
if (result) {
  console.log(result.pathname.groups.id); // "123"
}

// Patrón más complejo
const apiPattern = new URLPattern({
  protocol: 'https',
  hostname: ':env.example.com',
  pathname: '/api/:version/:resource/:id?',
});

const match = apiPattern.exec('https://prod.example.com/api/v2/users/456');
match.hostname.groups.env      // "prod"
match.pathname.groups.version  // "v2"
match.pathname.groups.resource // "users"
match.pathname.groups.id       // "456"

Mejores Prácticas para Construir Parámetros de Consulta

Usar URLSearchParams

// ✅ Recomendado: usar URLSearchParams
const params = new URLSearchParams({
  q: '搜索关键词',
  sort: 'desc',
  page: '1',
  limit: '20',
});

params.append('tags', 'javascript');
params.append('tags', 'css');

const url = `https://api.example.com/search?${params}`;
// "https://api.example.com/search?q=...&sort=desc&page=1&limit=20&tags=javascript&tags=css"

Convenciones comunes para parámetros de array

Convención Ejemplo Framework del servidor
Claves repetidas ?tags=js&tags=css Express, Koa
Sufijo con corchetes ?tags[]=js&tags[]=css PHP, Rails
Subíndice ?tags[0]=js&tags[1]=css PHP
Separados por coma ?tags=js,css Personalizado

Preguntas Frecuentes

¿Por qué el espacio en URL a veces es %20 y a veces +?

  • En la ruta URL: espacio = %20 (estándar)
  • En los parámetros de consulta: espacio = + o %20 (+ es la convención de application/x-www-form-urlencoded)
  • Recomendación: usar %20 uniformemente, evitar ambigüedad

¿Las URL tienen un límite máximo de longitud?

Escenario Límite
Barra de URL de Chrome 2MB
Barra de URL de Firefox Sin límite
Barra de URL de IE 2083 caracteres
Petición HTTP GET El servidor decide (generalmente 8KB)
Límite seguro 2048 caracteres (compatible con todos los navegadores)

Los parámetros que superen los 2048 caracteres deben usar peticiones POST.

Resumen

La URL es la piedra angular de la Web; comprender su estructura, reglas de codificación y tratamiento seguro es una habilidad fundamental para cada desarrollador. Puntos clave: codificar valores de parámetros con encodeURIComponent, verificar protocolos para prevenir XSS, validar con lista blanca para prevenir redirección abierta. La herramienta de Codificación/Decodificación URL de ToolsKu te ayuda a manejar rápidamente problemas de codificación URL.

#URL解析#URL编码#查询参数#Web开发#教程