Fallstricke von URL und URLSearchParams in JavaScript

Alles begann mit einem Fehler

Das Arbeiten mit URLs in JavaScript und Node.js sollte unkompliziert sein, aber ein kürzlich aufgetretener Fehler in unserem Projekt hat mich in ein Kaninchenloch voller subtiler Macken in den URL- und URLSearchParams-APIs geführt. In diesem Beitrag werden diese Macken untersucht, wie sie Probleme in Ihrem Code verursachen können und was Sie tun können, um sie zu vermeiden.

---

Das Problem: URL-Handling mit Axios

Dieses Problem ist beim Generieren von URLs und beim Hinzufügen von Hash-Signaturen aufgetreten. Die Abfrageparameter waren nicht durchgängig prozentual kodiert, was zu unerwartetem Verhalten und falschen Hash-Signaturen führte.

Es wurde deutlich, dass die Interaktion zwischen URL- und URLSearchParams-Objekten besondere Sorgfalt erforderte.

---

Fallstrick Nr. 1: URL.search vs. URLSearchParams.toString()

Die erste Überraschung war der Unterschied zwischen URL.search und URLSearchParams.toString().

Seien Sie vorsichtig, wenn Sie .searchParams zum Ändern der URL verwenden, da das URLSearchParams-Objekt gemäß der WHATWG-Spezifikation unterschiedliche Regeln verwendet, um zu bestimmen, welche Zeichen prozentual codiert werden sollen. Beispielsweise wird das URL-Objekt das ASCII-Tildezeichen (~) nicht prozentual kodieren, während URLSearchParams es immer kodiert.

// Example 1
const url = new URL("https://example.com?param=foo bar");
console.log(url.search); // prints param=foo%20bar
console.log(url.searchParams.toString()); // prints ?param=foo+bar

// Example 2
const myURL = new URL('https://example.org/abc?foo=~bar');
console.log(myURL.search);  // prints ?foo=~bar
// Modify the URL via searchParams...
myURL.searchParams.sort();
console.log(myURL.search);  // prints ?foo=%7Ebar

In unserem Projekt mussten wir url.search = url.searchParams.toString() explizit neu zuweisen, um sicherzustellen, dass die Abfragezeichenfolge konsistent codiert wurde.

---

Falle Nr. 2: Das Pluszeichen-Dilemma

Ein weiteres Problem ist, wie URLSearchParams mit Zeichen umgeht. Standardmäßig wird URLSearchParams als Leerzeichen interpretiert, was bei der Kodierung von Binärdaten oder Base64-Zeichenfolgen zu Datenbeschädigungen führen kann.

const params = new URLSearchParams("bin=E+AXQB+A");
console.log(params.get("bin")); // "E AXQB A"

Eine Lösung besteht darin, encodeURIComponent zu verwenden, bevor Werte an URLSearchParams angehängt werden:

params.append("bin", encodeURIComponent("E+AXQB+A"));

Weitere Details finden Sie in der MDN-Dokumentation.

---

Fallstrick Nr. 3: URLSearchParams.get vs. URLSearchParams.toString()

Eine weitere Feinheit ergibt sich beim Vergleich der Ausgaben von URLSearchParams.get und URLSearchParams.toString. Zum Beispiel:

const params = new URLSearchParams("?key=value&key=other");
console.log(params.get("key")); // "value" (first occurrence)
console.log(params.toString()); // "key=value&key=other" (all occurrences serialized)

In Szenarien mit mehreren Werten gibt get nur den ersten Wert zurück, während toString alle serialisiert.

---

Der Fix in unserer Codebasis

In unserem Projekt haben wir das Problem gelöst, indem wir die Sucheigenschaft explizit neu zugewiesen haben:

url.search = url.searchParams.toString();
url.searchParams.set(
  "hash",
  cryptography.createSha256HmacBase64UrlSafe(url.href, SECRET_KEY ?? "")
);

Dadurch wurde sichergestellt, dass alle Abfrageparameter ordnungsgemäß codiert wurden, bevor der Hashwert hinzugefügt wurde.

---

Node.js-Querystring-Modul

Die WHATWG URLSearchParams-Schnittstelle und das Querystring-Modul haben einen ähnlichen Zweck, der Zweck des Querystring-Moduls ist jedoch allgemeiner, da es die Anpassung von Trennzeichen (& und =) ermöglicht. Andererseits ist die URLSearchParams-API ausschließlich für URL-Abfragezeichenfolgen konzipiert.

Abfragezeichenfolge ist leistungsfähiger als URLSearchParams, aber keine standardisierte API. Verwenden Sie URLSearchParams, wenn die Leistung nicht entscheidend ist oder wenn Kompatibilität mit Browsercode wünschenswert ist.

Bei der Verwendung von URLSearchParams sind im Gegensatz zum Querystring-Modul doppelte Schlüssel in Form von Array-Werten nicht zulässig. Arrays werden mithilfe von array.toString() in Strings unterteilt, wodurch einfach alle Array-Elemente mit Kommas verknüpft werden.

// Example 1
const url = new URL("https://example.com?param=foo bar");
console.log(url.search); // prints param=foo%20bar
console.log(url.searchParams.toString()); // prints ?param=foo+bar

// Example 2
const myURL = new URL('https://example.org/abc?foo=~bar');
console.log(myURL.search);  // prints ?foo=~bar
// Modify the URL via searchParams...
myURL.searchParams.sort();
console.log(myURL.search);  // prints ?foo=%7Ebar

Mit dem Querystring-Modul wird die Abfragezeichenfolge „foo=bar&abc=xyz&abc=123“ analysiert in:

const params = new URLSearchParams("bin=E+AXQB+A");
console.log(params.get("bin")); // "E AXQB A"

---

Imbissbuden

1. Seien Sie vorsichtig, wie URLSearchParams mit Sonderzeichen (z. B. ~) und Leerzeichen umgeht. Verwenden Sie bei Bedarf encodeURIComponent.

2. Verstehen Sie den Unterschied zwischen URL.search, URLSearchParams.get und URLSearchParams.toString, um unerwartetes Verhalten zu vermeiden.

3. In Node.js verwenden Sie Querystring Modul, wenn Sie doppelte Abfrageparameterschlüssel als Array analysieren möchten.

Das obige ist der detaillierte Inhalt vonFallstricke von URL und URLSearchParams in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!