مشکلات URL و URLSearchParams در جاوا اسکریپت

Summarize this content to 400 words in Persian Lang

همه چیز با یک اشکال شروع شد

کار با URL ها در جاوا اسکریپت و Node.js باید ساده باشد، اما یک باگ اخیر در پروژه ما باعث شد تا من به یک سوراخ خرگوشی از ابهامات ظریف دست پیدا کنم. URL و URLSearchParams API ها این پست به بررسی این ویژگی‌ها می‌پردازد، اینکه چگونه می‌توانند در کد شما مشکل ایجاد کنند و برای جلوگیری از آنها چه کاری می‌توانید انجام دهید.

مشکل: مدیریت URL با Axios

ما هنگام تولید URL و اضافه کردن امضای هش به آنها با این مشکل مواجه شدیم. پارامترهای پرس و جو به طور مداوم به صورت درصد رمزگذاری نشده بودند، که منجر به رفتار غیرمنتظره و امضاهای هش اشتباه شد.

مشخص شد که تعامل بین URL و URLSearchParams اشیاء نیاز به مراقبت بیشتری دارند

دام شماره 1: URL.search در مقابل URLSearchParams.toString()

اولین شگفتی تفاوت بین آنها بود URL.search و URLSearchParams.toString().

هنگام استفاده مراقب باشید .searchParams برای اصلاح URL زیرا طبق مشخصات WHATWG، URLSearchParams شی از قوانین مختلفی برای تعیین اینکه کدام کاراکترها را درصد رمزگذاری کند استفاده می کند. به عنوان مثال، URL شیء tilde ASCII را با درصد رمزگذاری نمی کند (~) شخصیت، در حالی که URLSearchParams همیشه آن را رمزگذاری خواهد کرد.

// 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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در پروژه ما، ما نیاز به تخصیص مجدد داشتیم url.search = url.searchParams.toString() برای اطمینان از اینکه رشته پرس و جو به طور مداوم کدگذاری شده است.

دام شماره 2: معضل علامت مثبت

یکی دیگر از مشکلات این است که چگونه URLSearchParams دسته ها + شخصیت ها به طور پیش فرض، URLSearchParams تفسیر می کند + به عنوان یک فاصله، که ممکن است در هنگام رمزگذاری داده های باینری یا رشته های Base64 منجر به خراب شدن داده ها شود.

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

یکی از راه حل ها استفاده است encodeURIComponent قبل از اضافه کردن مقادیر به URLSearchParams:

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

جزئیات بیشتر در اسناد MDN موجود است.

دام شماره 3: URLSearchParams.get در مقابل URLSearchParams.toString()

ظرافت دیگری هنگام مقایسه خروجی ها به وجود می آید URLSearchParams.get و URLSearchParams.toString. به عنوان مثال:

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)

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در سناریوهای چند ارزشی، get فقط اولین مقدار را برمی گرداند، while toString همه را سریال می کند

رفع مشکل در پایگاه کد ما

در پروژه خود، مشکل را با تخصیص مجدد صریحاً حل کردیم search دارایی:

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این اطمینان حاصل کرد که تمام پارامترهای پرس و جو قبل از اضافه کردن به درستی کدگذاری شده اند hash ارزش

Node.js querystring ماژول

WHATWG URLSearchParams رابط و querystring ماژول یک هدف مشابه دارند، اما هدف از querystring ماژول کلی تر است، زیرا امکان سفارشی سازی کاراکترهای جداکننده را فراهم می کند (& و =). از سوی دیگر، URLSearchParams API صرفاً برای رشته‌های جستجوی URL طراحی شده است.

querystring عملکرد بیشتر از URLSearchParams اما یک API استاندارد نیست. استفاده کنید URLSearchParams زمانی که عملکرد حیاتی نیست یا زمانی که سازگاری با کد مرورگر مطلوب است.

هنگام استفاده URLSearchParams بر خلاف querystring ماژول، کلیدهای تکراری در قالب مقادیر آرایه مجاز نیستند. آرایه ها با استفاده از رشته بندی می شوند array.toString()، که به سادگی تمام عناصر آرایه را با کاما به هم می پیوندد.

const params = new URLSearchParams({
user: ‘abc’,
query: [‘first’, ‘second’],
});
console.log(params.getAll(‘query’));
// Prints [ ‘first,second’ ] console.log(params.toString());
// Prints ‘user=abc&query=first%2Csecond’

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با querystring ماژول، رشته پرس و جو ‘foo=bar&abc=xyz&abc=123’ تجزیه می شود به:

{
“foo”: “bar”,
“abc”: [“xyz”, “123”] }

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

غذای آماده

باشد محتاط از چگونگی URLSearchParams کاراکترهای خاص را کنترل می کند (مثلا ~) و فضاها. استفاده کنید encodeURIComponent در صورت لزوم
تفاوت بین را درک کنید URL.search، URLSearchParams.get، و URLSearchParams.toString برای جلوگیری از رفتار غیر منتظره
در Node.js استفاده کنید querystring ماژول اگر شما می خواهید کلیدهای پارامتر پرس و جو تکراری را به عنوان یک آرایه تجزیه کنید.

// 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

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

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

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)

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

const params = new URLSearchParams({
  user: 'abc',
  query: ['first', 'second'],
});
console.log(params.getAll('query'));
// Prints [ 'first,second' ]
console.log(params.toString());
// Prints 'user=abc&query=first%2Csecond'

{
  "foo": "bar",
  "abc": ["xyz", "123"]
}