# Codificador y Decodificador de URL / URI Components: Arquitectura Técnica y Guía Exhaustiva

Los Identificadores Uniformes de Recursos (URI) y Localizadores Uniformes de Recursos (URL) definen el estándar de direccionamiento web. Regulados por blank" rel="noopener noreferrer" class="text-emerald-400 hover:text-emerald-300 underline underline-offset-4 decoration-emerald-500/40 hover:decoration-emerald-400 font-medium transition inline-flex items-center gap-0.5">RFC 3986 y WHATWG URL, aplican restricciones para asegurar enrutamiento determinista en proxies y microservicios.

Al enviar datos en cadenas de consulta (query strings), rutas o formularios, caracteres no alfanuméricos —espacios, puntuación y glifos Unicode— deben transformarse a codificación porcentual (percent-encoding o URL encoding). Un escape erróneo ocasiona truncamiento de parámetros, excepciones URIError: URI malformed y fallos graves como Redirecciones Abiertas (Open Redirects) y SSRF.

El Codificador y Decodificador de URL / URI Components de ToolsAA integra un codificador url online, decodificador url, emulador de encodeURIComponent online y análisis bidireccional en tiempo real. Con arquitectura de conocimiento cero ("use client"), el 100% del procesamiento se ejecuta en la memoria del navegador: cero paquetes viajan a la red, protegiendo tokens OAuth, secretos de API y credenciales.

# Visión General y Casos de Uso en Producción

La codificación de URL convierte flujos de bytes en caracteres US-ASCII mediante tripletas %XY, donde XY es el valor hexadecimal del byte en UTF-8. Esto preserva los delimitadores estructurales de la URI y neutraliza los literales del payload:

+---------------------------------------------------------------------------------------------------+
|                                      Anatomía de una URI Moderna                                  |
|  https://api.dominio.com:443 /v2/buscar/recurso ;matrix=val ?q=herramientas+dev&lang=es #resultado|
|  |___|   |______________| |__| |________________| |__________| |_______________________| |________| |
| Esquema     Autoridad     Puerto      Ruta          Matriz         Cadena de Consulta    Fragmento  |
+---------------------------------------------------------------------------------------------------+
                                                   |
                        +--------------------------+--------------------------+
                        |                                                     |
                        v                                                     v
          [ Codificación de Componente ]                             [ Codificación de URI Completa ]
          - Preserva: ALPHA, DIGIT, - _ . ~                         - Preserva: Esquema, host, barras
          - Codifica: : / ? # [ ] @ ! $ & ' ( ) * + , ; =             de ruta, delimitadores de query
          - Objetivo: Claves y valores de query params              - Objetivo: Direcciones web íntegras

# Casos de Uso Críticos en Entornos Empresariales

• Flujos OAuth 2.0 y OIDC: Endpoints de redirección exigen codificar redirecturi y tokens PKCE (codechallenge), evitando que & o = fragmenten argumentos.
• Serialización en APIs REST y GraphQL: Peticiones GET con filtros o cursores deben escapar JSON (filter={"status":"active"} pasa a filter=%7B%22status%22%3A%22active%22%7D).
• Firmas Criptográficas (AWS SigV4): APIs cloud exigen cadenas canónicas ordenadas lexicográficamente y codificadas según RFC 3986 estricto para evitar discrepancias.
• Enrutamiento Multilingüe (i18n): Los estándares HTTP prohíben caracteres no US-ASCII en cabeceras o rutas directas. Caracteres acentuados y emojis se serializan en UTF-8 (español a espa%C3%B1ol, 東京 a %E6%9D%B1%E4%BA%AC).
• Webhooks y Formularios (application/x-www-form-urlencoded): Los espacios se formatean como + y los caracteres reservados se escapan para transporte en brokers como Kafka o RabbitMQ.

# Privacidad Absoluta: Procesamiento en el Cliente

Las utilidades con backend remoto crean riesgos severos. Las URLs contienen tokens OAuth, JWTs, claves de API y datos personales (PII). Transmitirlas por red las expone a registros de acceso (access logs), proxies y cachés, vulnerando RGPD, HIPAA, SOC 2 y PCI-DSS.

ToolsAA aplica un Modelo de Cero Servidor: todo el procesamiento, expresiones regulares y conversiones se ejecutan localmente en el navegador. Cero paquetes salen del equipo.

# Arquitectura Técnica y Funcionamiento Interno

La codificación de URLs se rige por especificaciones técnicas complementarias:

# 1. Evolución de los Estándares: RFC 3986 vs RFC 2396 vs WHATWG URL

RFC 2396 (1998) consideraba !, ', (, ), * marcas no reservadas; JavaScript las conserva sin escapar en encodeURIComponent(). RFC 3986 (2005) las reclasificó como subdelimitadores reservados, exigiendo su escape en firmas canónicas. Los caracteres no reservados quedan limitados a: A-Z, a-z, 0-9, -, _, ., ~. WHATWG URL estandariza el parsing en navegadores y formularios.

# 2. Mecánica a Nivel de Bytes: Serialización UTF-8 y Porcentaje

Antes de codificar, cada carácter se transforma en bytes UTF-8 expresados como %XY:

• 1 Byte (U+0000 a U+007F): US-ASCII. Espacio (U+0020) produce %20.
• 2 Bytes (U+0080 a U+07FF): Grafemas latinos. ñ (U+00F1) genera 0xC3 0xB1 (%C3%B1); á (U+00E1) genera 0xC3 0xA1 (%C3%A1).
• 3 Bytes (U+0800 a U+FFFF): Ideogramas CJK. 東 (U+6771) genera 0xE6 0x9D 0xB1 (%E6%9D%B1).
• 4 Bytes (U+10000 a U+10FFFF): Emojis. 🚀 (U+1F680) genera 0xF0 0x9F 0x9A 0x80 (%F0%9F%9A%80).

JavaScript maneja caracteres sobre U+FFFF como pares sustitutos UTF-16. Truncar un par produce sustitutos huérfanos que disparan URIError: URI malformed.

# 3. La Tríada de APIs Nativas del Navegador

• encodeURIComponent(): Escapa todo excepto alfanuméricos y -, _, ., !, ~, *, ', (, ). Para parámetros individuales.
• encodeURI(): Normaliza URLs completas preservando delimitadores estructurales (:, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, =).
• URLSearchParams: Implementa application/x-www-form-urlencoded, convirtiendo espacios en + y analizando tanto + como %20.

# 4. Web APIs Nativas, Web Crypto y Rendimiento

• Concurrencia con React 18: useDeferredValue() desacopla el tecleo del cálculo léxico, manteniendo 60 FPS estables.
• Web Workers y Streams: Entradas sobre 500 KB se delegan a Web Workers con búferes Uint8Array (TextEncoder/TextDecoder).
• Web Crypto API: window.crypto.subtle.digest genera hashes SHA-256 para validar firmas HMAC y PKCE.
• Canvas HTML5: Gráficos de distribución se renderizan fuera de pantalla sin reflujo en el DOM.

# Guía Práctica de Uso Paso a Paso

# Paso 1: Carga de Datos y Preajustes

Pegue su texto, URL o token en el editor, o importe archivos mediante la API FileReader. Dispone de plantillas como OAuth 2.0 PKCE o Payload JSON Anidado.

# Paso 2: Selección del Algoritmo de Codificación

• encodeURIComponent: Para valores individuales de query strings.
• RFC 3986 Estricto: Para firmas cloud (AWS SigV4), forzando el escape de !, ', (, ), y *.
• encodeURI: Para sanear URLs completas respetando delimitadores y barras.
• application/x-www-form-urlencoded: Para formularios HTML donde el espacio se formatea como +.

# Paso 3: Análisis Interactivo de Parámetros

ToolsAA desglosa la query string en una tabla interactiva editable. Active, modifique o agregue variables con sincronización bidireccional inmediata.

# Paso 4: Decodificación Tolerante a Fallos y Recursiva

• Detección de Doble Codificación: Identifica secuencias anidadas como %2520 o %253A.
• Auto-Desempaquetado: Descompone recursivamente capas múltiples de codificación en un clic.
• Tolerancia a Fallos: Ante secuencias truncadas, aísla el error sin interrumpir el flujo.

# Paso 5: Auditoría de Métricas y Exportación

Consulte en tiempo real el recuento de caracteres, tamaño en bytes UTF-8 e inflación porcentual. Copie el resultado o descárguelo como archivo plano.

# Implementaciones de Código en Producción

# 1. Implementación en TypeScript Moderno

Módulo tipado para codificación RFC 3986 estricta, decodificación segura y desglose de parámetros:

export type EncodingMode = "rfc3986" | "component" | "fullUri" | "formUrlEncoded";

export class UrlCodec {
  public static encodeStrictRFC3986(input: string): string {
    return encodeURIComponent(input).replace(
      /[!'()*]/g,
      (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`
    );
  }

  public static encode(input: string, mode: EncodingMode = "component"): string {
    if (!input) return "";
    switch (mode) {
      case "rfc3986": return this.encodeStrictRFC3986(input);
      case "component": return encodeURIComponent(input);
      case "fullUri": return encodeURI(input);
      case "formUrlEncoded":
        return encodeURIComponent(input)
          .replace(/%20/g, "+")
          .replace(/[!'()*]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`);
      default: throw new Error(`Modo no compatible: ${mode}`);
    }
  }

  public static safeDecode(input: string, isForm = false): { text: string; error: boolean } {
    if (!input) return { text: "", error: false };
    const normalized = isForm ? input.replace(/\+/g, " ") : input;
    try {
      return { text: decodeURIComponent(normalized), error: false };
    } catch {
      let output = "", hasError = false;
      for (const token of normalized.split(/(%[0-9a-fA-F]{2})/g)) {
        if (token.startsWith("%") && token.length === 3) {
          try { output += decodeURIComponent(token); }
          catch { output += token; hasError = true; }
        } else { output += token; }
      }
      return { text: output, error: hasError };
    }
  }

  public static parseQuery(urlOrQuery: string): Record<string, string[]> {
    const raw = urlOrQuery.includes("?") ? urlOrQuery.split("?")[1].split("#")[0] : urlOrQuery;
    const params: Record<string, string[]> = {};
    new URLSearchParams(raw).forEach((val, key) => {
      params[key] = params[key] ? [...params[key], val] : [val];
    });
    return params;
  }
}

# 2. Implementación en Python 3.11+

Implementación para backend y automatización con generación de cadenas canónicas ordenadas:

from typing import Dict, List, Tuple
import urllib.parse

class UrlCodec:
    @staticmethod
    def encode_rfc3986(value: str) -> str:
        return urllib.parse.quote(value or "", safe="-_.~")

    @staticmethod
    def encode_form(value: str) -> str:
        return urllib.parse.quote_plus(value or "")

    @staticmethod
    def safe_decode(encoded_str: str, is_form: bool = False) -> str:
        if not encoded_str:
            return ""
        decoder = urllib.parse.unquote_plus if is_form else urllib.parse.unquote
        return decoder(encoded_str, errors="replace")

    @classmethod
    def build_canonical_query(cls, params: Dict[str, str | List[str]]) -> str:
        pairs: List[Tuple[str, str]] = []
        for key, val in params.items():
            k = cls.encode_rfc3986(str(key))
            items = val if isinstance(val, list) else [val]
            for item in items:
                pairs.append((k, cls.encode_rfc3986(str(item))))
        pairs.sort(key=lambda x: (x[0], x[1]))
        return "&".join(f"{k}={v}" for k, v in pairs)

# Errores Comunes, Casos Límite y Solución de Problemas

# 1. El Problema de la Doble Codificación (%2520)

Al procesar una cadena ya codificada, % se vuelve %25, transformando %20 en %2520. La decodificación entregará %20 literal.

• Solución: Valide idempotencia: si decodeURIComponent(str) !== str, la cadena ya contiene secuencias codificadas.

# 2. La Dualidad del Espacio: + frente a %20

RFC 3986 estipula %20 para espacios, mientras que formularios HTML usan +. Utilizar + en rutas o llamadas REST con JSON causa que el servidor reciba un signo más literal.

• Solución: Emplee siempre %20 en APIs REST y reserve + para formularios. Codifique signos más literales como %2B.

# 3. Sustitutos Huérfanos y Error URIError: URI malformed

JavaScript utiliza UTF-16. Cortar un emoji por la mitad produce un sustituto huérfano que dispara URIError en encodeURIComponent().

• Solución: Sanee cadenas con toWellFormed() antes de codificar:

```javascript const urlSegura = encodeURIComponent(entrada.toWellFormed()); ```

# 4. Segmentación Ingenua con Delimitadores sin Codificar

Dividir URLs con split("&") fragmenta valores con & o = en JSON no escapados.

• Solución: Analice parámetros mediante URLSearchParams.

# 5. Barras Inclinadas Codificadas (%2F) en Proxies Inversos

Al recibir %2F en una ruta, Apache devuelve error 404 (AllowEncodedSlashes Off) y NGINX lo normaliza a /.

• Solución: Envíe barras en parámetros de consulta (?path=dir%2Fsub).

# 6. Dominios Internacionalizados (IDN / Punycode) vs Rutas

Aplicar encodeURI("https://münchen.de") genera https://m%C3%BCnchen.de, rechazado por servidores DNS.

• Solución: Convierta dominios mediante Punycode (xn--mnchen-3ya.de bajo RFC 5891). La codificación porcentual aplica solo a rutas y consultas.

# Preguntas Frecuentes (FAQ)

# Q1: ¿Cuál es la diferencia exacta entre encodeURI() y encodeURIComponent() en JavaScript?

Respuesta: encodeURI() normaliza una URL íntegra preservando delimitadores estructurales (:, /, ?, #, &, =), codificando solo espacios y caracteres no ASCII. encodeURIComponent() procesa valores de parámetros aislados y escapa también los delimitadores para impedir que rompan la jerarquía de la URL.

# Q2: ¿Por qué encodeURIComponent() no codifica !, ', (, ), y *?

Respuesta: ECMAScript adoptó el estándar histórico RFC 2396, que consideraba estos símbolos marcas no reservadas. El estándar RFC 3986 los reclasificó como subdelimitadores reservados. En APIs estrictas como AWS SigV4, deben escaparse manualmente con expresión regular.

# Q3: ¿Cuándo debe representarse un espacio como + frente a %20?

Respuesta: El uso de + aplica exclusivamente a envíos con el tipo MIME application/x-www-form-urlencoded (formularios HTML). En cualquier otro contexto web (rutas, REST, JSON y norma RFC 3986), los espacios deben codificarse estrictamente como %20.

# Q4: ¿Cómo puedo prevenir la excepción URIError: URI malformed al decodificar cadenas de terceros?

Respuesta: decodeURIComponent() lanza excepciones ante secuencias corruptas o pares sustitutos incompletos. En producción, utilice bloques try...catch con un decodificador tokenizado de respaldo o normalice los datos con str.toWellFormed().

# Q5: ¿Cómo funciona la codificación multibyte UTF-8 para caracteres en español y emojis?

Respuesta: Cada carácter no ASCII se convierte en bytes binarios UTF-8 representados como tripletas %XY. La letra ñ toma 2 bytes (0xC3 0xB1), generando %C3%B1. Un emoji como 🚀 requiere 4 bytes (0xF0 0x9F 0x9A 0x80), generando %F0%9F%9A%80.

# Q6: ¿Cómo puedo detectar si una cadena de texto ya ha sido codificada en URL?

Respuesta: Compruebe la presencia de tripletas hexadecimales con /%[0-9A-Fa-f]{2}/.test(str). Para validar idempotencia, evalúe si decodeURIComponent(str) !== str. Si decodificar y recodificar devuelve la cadena original, se confirma que ya estaba codificada homogéneamente.

# Q7: ¿Mis claves de API o tokens sensibles se envían a servidores al usar ToolsAA?

Respuesta: No. ToolsAA funciona exclusivamente en el navegador ("use client"). Todo el procesamiento léxico y la codificación ocurren en la memoria de su equipo. Ningún dato ni telemetría sale por la red, permitiendo auditar credenciales de forma privada y sin conexión.

# Q8: ¿Por qué los proxies inversos devuelven errores 404 o 400 cuando las URLs contienen %2F?

Respuesta: Servidores como Apache y balanceadores como AWS ALB interpretan %2F en rutas como un riesgo de salto de directorio (path traversal). Apache devuelve 404 a menos que se configure AllowEncodedSlashes On, mientras que NGINX lo normaliza a /. Envíe barras dentro de parámetros de consulta.

# Matriz Técnica Comparativa: Especificaciones de Codificación de URL

# Conclusión

El dominio de la codificación y decodificación de URLs es esencial para construir sistemas web robustos y seguros. Desde proteger flujos OAuth 2.0 y generar firmas canónicas en APIs cloud hasta normalizar rutas multilingües, la precisión léxica previene fallos silenciosos y brechas críticas.

Comprender las diferencias entre RFC 3986, JavaScript y formularios web permite eliminar la doble codificación y gobernar casos límite con rigor. El Codificador y Decodificador de URL / URI Components de ToolsAA ofrece precisión determinista con ejecución 100% en el cliente, garantizando privacidad absoluta y cero fugas de datos.