Vollständiger Leitfaden zur URL-Analyse und -Kodierung: Von der Strukturzerlegung zur sicheren Verarbeitung

Kodierung

Vollständige URL-Struktur

https://user:pass@example.com:8080/path/to/page?name=value&age=25#section
  │       │     │    │          │  │   │            │                │
  scheme  user  pass  host      port path           query            fragment
Bestandteil Beispiel Beschreibung
scheme https Protokoll
userinfo user:pass Authentifizierungsinformationen (selten verwendet)
host example.com Domain oder IP
port 8080 Portnummer (Standard 80/443)
path /path/to/page Pfad
query ?name=value&age=25 Query-Parameter
fragment #section Anker (wird nicht an den Server gesendet)

Analyse mit der URL-API

Basisanalyse

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      // Vollständige URL

Query-Parameter analysieren

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')

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

URL modifizieren

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"

URL-Kodierungsregeln

Warum ist Kodierung notwendig?

URLs erlauben nur ASCII-Zeichen, andere Zeichen müssen kodiert werden:

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

encodeURI vs encodeURIComponent

Funktion Kodierungsbereich Verwendung
encodeURI Behält URL-Strukturzeichen (:/?#[]@!$&'()*+,;=) Vollständige URL kodieren
encodeURIComponent Kodiert alle Nicht-ASCII- + reservierte Zeichen Query-Parameterwerte kodieren 
const url = 'https://example.com/path?name=你好&redirect=/home';

// encodeURI: behält URL-Struktur
encodeURI(url);
// "https://example.com/path?name=%E4%BD%A0%E5%A5%BD&redirect=/home"

// encodeURIComponent: kodiert alle Sonderzeichen
encodeURIComponent(url);
// "https%3A%2F%2Fexample.com%2Fpath%3Fname%3D%E4%BD%A0%E5%A5%BD%26redirect%3D%2Fhome"

// ✅ Korrekte Verwendung: Parameterwerte mit encodeURIComponent
const name = '你好 世界';
const redirect = '/home';
const fullUrl = `https://example.com/path?name=${encodeURIComponent(name)}&redirect=${encodeURIComponent(redirect)}`;

Häufige Kodierungstabelle

Zeichen Kodierung Beschreibung
Leerzeichen %20 Kein + in URLs
+ %2B In Query-Parametern wird + als Leerzeichen dekodiert
& %26 Query-Parameter-Trennzeichen
= %3D Schlüssel-Wert-Trennzeichen
# %23 Anker-Kennung
% %25 Das Kodierungspräfix selbst
Chinesisch %E4%BD%A0 UTF-8-Dreibytekodierung

ToolsKu zum URL-Kodieren/Dekodieren verwenden

  1. Öffnen Sie das URL-Kodierungs-/Dekodierungs-Tool
  2. URL oder Text in das Eingabefeld einfügen
  3. Auf „Kodieren" oder „Dekodieren" klicken
  4. Ergebnis anzeigen

Sichere URL-Verarbeitung

1. URL-Injektion verhindern

// ❌ Gefährlich: Benutzereingabe direkt verketten
const url = `/api/users/${userId}`;

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

2. Offene Weiterleitung verhindern

// ❌ Gefährlich: Benutzer kann beliebige Weiterleitungs-URL angeben
app.get('/login', (req, res) => {
  res.redirect(req.query.redirect);
});

// ✅ Sicher: Whitelist-Validierung
function safeRedirect(url, allowedHosts) {
  try {
    const parsed = new URL(url, 'https://example.com');
    if (allowedHosts.includes(parsed.hostname)) {
      return url;
    }
  } catch {
    // Ungültige URL
  }
  return '/'; // Zur Startseite umleiten
}

3. XSS über URL verhindern

// ❌ Gefährlich: javascript:-Protokoll
const url = 'javascript:alert(document.cookie)';

// ✅ Sicher: Nur http/https-Protokolle erlauben
function sanitizeUrl(url) {
  try {
    const parsed = new URL(url);
    if (['http:', 'https:'].includes(parsed.protocol)) {
      return url;
    }
  } catch {
    // Ungültige URL
  }
  return 'about:blank';
}

URLPattern-API (Neuer Standard)

// Routen-Matching
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"
}

// Komplexeres Muster
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"

Best Practices zum Erstellen von Query-Parametern

URLSearchParams verwenden

// ✅ Empfohlen: URLSearchParams verwenden
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"

Gängige Konventionen für Array-Parameter

Konvention Beispiel Server-Framework
Wiederholte Schlüssel ?tags=js&tags=css Express, Koa
Klammersuffix ?tags[]=js&tags[]=css PHP, Rails
Index ?tags[0]=js&tags[1]=css PHP
Komma-getrennt ?tags=js,css Benutzerdefiniert

Häufige Fragen

Warum ist das Leerzeichen in URLs manchmal %20 und manchmal +?

  • Im URL-Pfad: Leerzeichen = %20 (Standard)
  • In Query-Parametern: Leerzeichen = + oder %20 (+ ist die Konvention für application/x-www-form-urlencoded)
  • Empfehlung: Einheitlich %20 verwenden, Mehrdeutigkeit vermeiden

Gibt es eine maximale URL-Länge?

Szenario Limit
Chrome-URL-Leiste 2MB
Firefox-URL-Leiste Kein Limit
IE-URL-Leiste 2083 Zeichen
HTTP-GET-Anfrage Server entscheidet (normalerweise 8KB)
Sicheres Limit 2048 Zeichen (kompatibel mit allen Browsern)

Parameter über 2048 Zeichen sollten POST-Anfragen verwenden.

Zusammenfassung

URLs sind das Fundament des Webs; ihre Struktur, Kodierungsregeln und sichere Verarbeitung zu verstehen ist eine Grundkompetenz jedes Entwicklers. Kernpunkte: Parameterwerte mit encodeURIComponent kodieren, Protokolle zur XSS-Prävention validieren, Whitelist-Validierung zur Verhinderung offener Weiterleitungen. Das URL-Kodierungs-/Dekodierungs-Tool von ToolsKu hilft Ihnen, URL-Kodierungsprobleme schnell zu lösen.

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