為什麼你不應該自己組 query string


Posted by Jas on 2021-05-24

相信大家都有組 query string 的需求,乍看之下寫起來不難

function toQueryString(obj) {
  return Object.entries(obj).map(([key, value]) => {
    return `${key}=${value}`;
  }).join('&');
}

toQueryString({ a:1, b:2 })
// => "a=1&b=2"

這樣寫如果 key 或 value 有 &= 就行不通了,還可能有被注入參數的安全疑慮 😨

toQueryString({ a:1, b: '2&c=3' })
// => "a=1&b=2&c=3"

那要怎麼改呢?答案是用 encodeURIComponent

function toQueryString(obj) {
  return Object.entries(obj).map(([key, value]) => {
    return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
  }).join('&');
}

toQueryString({ a:1, b: '1&c=3'})
// => "a=1&b=1%26c%3D3"

那麼要怎麼解析 query string 呢?試著寫一下

function fromQueryString(qs) {
  return qs.split('&').reduce((result, pair) => {
    const [key, value] = pair.split('=');
    result[decodeURIComponent(key)] = decodeURIComponent(value);
    return result;
  }, {});
}

fromQueryString("a=1&b=1%26c%3D3")
// => {a: "1", b: "1&c=3"}

看起來不錯,但是有一個問題是無法解析重複的 key(還真的有這種存在)

fromQueryString("a=1&a=2")
// => {a: "2"}

我們可以再改一下我們的 code 加個處理之類的,這時候已經有點累了,有沒有更快的方法?

答案是用 browser 內建的 URLSearchParams 來做,上述的 case 都可以處理得到。文件寫得很清楚,就不介紹了。

別再自己操作 query string 了啦!


#Web #Security #javascript







Related Posts

Day 33-API & ISS Tracker

Day 33-API & ISS Tracker

[01] 程式設計簡介 - 述句、運算式、運算子

[01] 程式設計簡介 - 述句、運算式、運算子

使用 JavaScript 處理二進位資料

使用 JavaScript 處理二進位資料


Comments