踩雷-網址參數編碼、網址解析邏輯
幾天前上班時和同伴討論一個遇到的問題:
他要在一個導向到新增資料的頁面之前插個檢查的步驟,因此要再檢查的步驟指定導向的連結。
原本的api功能根據傳來的資料資料其ID存在與否來判斷是更新還是新增,所以這部分也要寫在「導向的連結」內。
列出來大概像這樣:
檢查的步驟: /chkActiveProcess 導向的頁面: /insertForm?itemId=12345
但是有種情況是使用者要新增一筆資料,其內容複製於現有的某筆資料,因此同伴做了這樣的改動:
檢查的步驟: /chkActiveProcess 導向的頁面: /insertForm?itemId=12345&isNewItem=yes
使用一個新的參數判斷這種情況,然後問題就發生了。
重導向之後顯示的連結,不管怎麼試都看不到isNewItem=yes的部分。
這邊插播補充一下網址解析的小知識,一個網址當中夾帶的資訊包含:
要用什麼連線方式、連到哪台主機的名稱/座標、路徑、以及參數。
舉個例子,
http://example.com/add?a=1&b=2
打好連結按下enter時會由左到右解析出如上述的連線必要資訊
首先, http 是一種連線方式,其他還有https、ftp等姑且不談,後面固定接「://」的文字;
接著 example.com 是連線主機的名稱,從「://」開始到下一個「/」前結束;
路徑 /add 就像是給這網頁的指令,要執行什麼功能,如果路徑是空的視同訪問根目錄,匹配到「?」之前,如果沒有「?」就表示沒有參數;
最後是「?」之後,以「參數名=值」的形式傳遞,多個參數間以「&」分隔,因此列出參數:
a -> 1 b -> 2
回到正題,同伴使用nodejs,部分程式碼如下:
let redirectTo = '/insertForm?itemId=12345&isNewItem=yes' ... endpoint: `/chkActiveProcess?redirectTo=${redirectTo}`
很簡單的字串相加,組合後會像這樣:
/chkActiveProcess?redirectTo=/insertForm?itemId=12345&isNewItem=yes
用上述的定義解釋這串網址實際執行後,參數部分會被如何解讀:
redirectTo -> /insertForm?itemId=12345 isNewItem -> yes
可以看到導向時想帶過去的參數少一個,被當成不相干的另一個參數了
要避免這種事情,需要使用網址傳遞資料時使用的編碼,代表用了這種編碼的部份都是資料,不會被誤判。
詳細可參考:https://zh.wikipedia.org/wiki/百分號編碼
以這次的例子,只要將「&」換成「%26」就行了,程式修正後如下
let redirectTo = '/insertForm?itemId=12345%26isNewItem=yes' ... endpoint: `/chkActiveProcess?redirectTo=${redirectTo}`
不過%26這樣的東西,乍一看是認不出來的,打錯成%25搞不好也認不出來,這時就要善用工具了
各家語言都有網址編碼的函式可用,以javascript來說,可以這樣寫:
let redirectTo = '/insertForm?itemId=12345&isNewItem=yes' ... endpoint: `/chkActiveProcess?redirectTo=${encodeURIComponent(redirectTo)}`
如此一來,不只是&,連同其他特殊符號如/、?、=都會被編碼(雖然這部分不編碼也不會出錯)。
這應該算是很基礎的常識,留個記錄希望以後不要再犯了。
喜欢我的作品吗?别忘了给予支持与赞赏,让我知道在创作的路上有你陪伴,一起延续这份热忱!