紀錄工作經驗、相關知識,解決技術相關問題。

新手 Jamp Holes

HTTP URL GET 的錯誤使用 – 新手 Jamp Holes

最近看到一個很有趣的 React 專案,頁面間使用 GET 來傳遞資料,有趣的地方在於 GET 的使用方式,我們直接來看一下這個案例:

https://domain.com/product?pid=111&pid=222&pid=444&pid=444&pid=555

這個範例我們可以看到,他的再GET當中,同時出現了參數 pid 5次,很顯然,工程師將 GET 理寫成了只是一串字串資料,然後使用字串的概念來進行命名與處理。

細節的原理我們先不再這說明,我們直接用幾個範例看看,這樣使用到底會出現什麼問題。

以 PHP Form 來看 GET 重複問題

以上面的URL,我們建立一個 a.php 頁面,並撰寫一個能夠產生相同 URL GET的 Form 表單

<form action="b.php" method="get">
  <input type="text" name="pid" value="111" />
  <input type="text" name="pid" value="222" />
  <input type="text" name="pid" value="333" />
  <input type="text" name="pid" value="333" />
  <input type="text" name="pid" value="333" />
  <input type="submit" value="Submit" />
</form>

將接收到的GET 資料直接印出來

<?php
    var_dump($_GET);
?>
<!-- 輸出結果 -->
array(1) { ["pid"]=> string(3) "555" }

範例實作 demo

這裡我們可以看到,將 GET參數全部列印出來,並不會得到 5 筆 pid,只會有一項 pid,而且值為最後一筆 pid 的資料。

URL GET 錯誤使用所產生的影響

這個例子,因為對方是使用 React 製作前端,而JS 其實並沒有直接取得GET的方法,所以絕大多數使用 JS 抓取/處理GET,都是將其轉換成字串再進行分析,所以在功能製作上不一定會錯誤,也因此新手往往並未意識到 GET 重複命名將會帶來的問題。

但網站製作,不僅僅只要求功能無誤,還須具備可操作、可抓取、可追蹤紀錄才行,錯誤的 URL GET 使用,最常產生的不良影響如下:

  • GA 等相關紀錄產生錯誤
  • 後續系統整合將在取值上出現問題
  • 後續不利維護與管理
  • GET 長度超過限制造成截斷,導致功能錯誤

URL GET 的正確使用

URL GET 正確的使用,只須注意以下幾點:

  • GET 有長度限制
  • GET 以 ? 為開始,以&為連接符號
  • GET 的所有參數名稱是唯一值,不可重複
  • GET 僅支援 ASCII,其餘的會被轉換

任何 GET 的使用,都應該要符合以上4點。

到這有新手會問,那如果是性質相同的 GET 資料,在參數不能重複的限制下,該如何呈現比較好呢?

你可以這樣呈現:

https://domain.com/product?pid=111,222,444,444,555
or
https://domain.com/product?pid=111|222|444|444|555

發表迴響