前端網絡請求真的搞懂了嗎？解密前端參數傳遞方式，讓開發更從容

I. 引言

介紹在前端開發中需要向後端傳遞參數的現實問題

在前端開發中，需要向後端傳遞參數以擷取資料或完成操作是非常普遍的現實問題。

常見的場景包括使用者表單送出、查詢資料、修改資料、添加資料、删除資料等等。

為了保證資料的正确性和安全性，前端應遵循安全規範，并在資料傳輸中選擇最佳的入參方式。

同時，正确的參數傳遞方式也會有助于提高網頁速度和響應效率，提升使用者體驗。

是以，前端開發适當的了解常見的參數傳遞方式，進行正确的參數傳遞也是非常重要的。

引出本文要介紹的前端常見入參方式

在前端開發中，我們通常會使用多種方式向後端傳遞參數以擷取資料或完成操作。

每種方式都有其優缺點和适用場景。

本文将介紹前端常見的入參方式，包括

• URL查詢參數
• 表單資料送出
• FormData對象送出
• HTTP Headers
• JSON資料送出
• XML資料送出
• Hash參數

接下來介紹并分析每種方式的情況，希望能夠對前端開發者提供實用、高效、安全的參數傳遞解決方案。

II. URL查詢參數

什麼是URL查詢參數

在網絡程式設計中，URL（Uniform Resource Locator，統一資源定位器）是用于指定網際網路上資源位置的一種辨別符。

URL查詢參數是指在URL中使用?和&符号對參數進行傳遞的一種方式。

例如：https://www.example.com/search/?q=front-end+development&oq=front-end+development&aqs=chrome.0.0i131i355i433i512j0i131i433j0i433j0i131i355i433i512l2j0i131i433i512j69i60.6558j1j7&sourceid=chrome&ie=UTF-8

在這個例子中，“?”之後的字元串就是URL查詢參數，其中每段參數都以“&”符号分隔。參數q表示關鍵詞，“oq”、“aqs”、“sourceid”、“ie”等參數表示其他操作行為。

前端開發者通常可以通過URL查詢參數的方式将一些資料傳遞到後端。常見的應用場景包括搜尋功能和分頁功能。需要注意的是，由于URL具有敏感性，敏感資訊不宜放在URL中傳遞。

如何在URL中添加參數

要在URL中添加參數，可以在URL的末尾添加“?”符号和參數清單，每個參數使用“&”符号分隔，格式如下：

http://www.example.com/search?name=value&age=18&sex=male
           

其中“name=value”表示一個參數及其取值，多個參數之間使用“&”符号分隔。參數名和參數值均需要進行url編碼，特殊字元需要進行轉義。例如：

http://www.example.com/search?name=John%20Doe&age=18&sex=male
           

注意：參數順序不影響頁面效果，但參數順序不同可能會被搜尋引擎誤認為是不同的頁面。

在前端開發中，我們可以通過JavaScript中的window.location.search屬性來擷取目前URL中的查詢參數。

const searchParams = new URLSearchParams(window.location.search);
console.log(searchParams.get('name')); // 輸出 'John Doe'
console.log(searchParams.get('age')); // 輸出 '18'
console.log(searchParams.get('sex')); // 輸出 'male'
           

以上代碼使用ES6文法建立URLSearchParams對象，可以輕松擷取URL中的查詢參數。get()方法用于擷取指定參數名的參數值，如果參數不存在，則傳回null。

擷取URL查詢參數的方法

擷取URL查詢參數的方法有以下幾種：

1. 使用原生JavaScript擷取：

可以使用window.location.search屬性來擷取目前URL中的查詢參數，傳回的是一個字元串，包括問号後面的所有參數。接着可以使用String.slice()方法去掉問号，再用String.split()方法按照"&"分割成數組，最後再周遊數組擷取參數。

// 擷取URL所有查詢參數
const params = window.location.search.slice(1).split('&');

// 周遊數組擷取每個參數名和值
const obj = {};
params.forEach(param => {
  const [key, value] = param.split('=');
  obj[key] = decodeURIComponent(value);
});

console.log(obj);  // 輸出對象 { name: "John Doe", age: "18", sex: "male" }
           

2. 使用URLSearchParams：

URLSearchParams是ES6中的一個新特性，可以友善地解析查詢參數。它提供了一些有用的方法，如get()擷取指定參數名的參數值，keys()擷取所有參數名，values()擷取所有參數值，entries()擷取所有參數名和參數值組成的數組。需要先建立一個URLSearchParams對象，将URL的查詢參數傳入進去。

// 擷取URL所有查詢參數
const searchParams = new URLSearchParams(window.location.search);

// 周遊擷取每個參數名和值
const obj = {};
for (const [key, value] of searchParams.entries()) {
  obj[key] = value;
}

console.log(obj);  // 輸出對象 { name: "John Doe", age: "18", sex: "male" }
           

3. 使用第三方庫：

如果項目中使用了第三方庫，如jQuery、Lodash、Underscore.js等，這些庫都提供了友善的解析參數的方法。例如，使用jQuery：

// 擷取URL所有查詢參數
const params = $.deparam(window.location.search.slice(1));

console.log(params);  // 輸出對象 { name: "John Doe", age: "18", sex: "male" }
           

URL查詢參數的使用場景

URL查詢參數的使用場景比較廣泛，包括但不限于以下幾種：

1. 搜尋結果頁：

搜尋引擎一般會在URL的查詢參數中帶有搜尋關鍵詞，友善使用者分享搜尋結果以及在浏覽器中回退到上一次搜尋結果頁面。

2. 分頁：

分頁功能需要在URL的查詢參數中帶有頁碼，這樣可以保證每個頁面的位址是唯一的，并且可以友善地通過位址欄切換不同的頁碼。

3. 篩選條件：

在電商網站等場景中，頁面上有多個篩選條件，如商品分類、價格區間、品牌等等。使用者在選擇完篩選條件後，點選“篩選”按鈕或者“搜尋”按鈕時，需要将這些條件以參數的形式傳遞給後端，以便後端進行篩選操作。

4. 跳轉頁面時傳遞參數：

在頁面跳轉時，有時候需要将參數傳遞給新頁面，以便新頁面進行操作。可以将參數放在URL的查詢參數中，然後在新頁面中進行解析和操作。

總之，URL查詢參數非常适合在前端和後端之間傳遞簡單的資料，例如一個或多個數值、邏輯狀态等等，友善實作GET請求。但對于更複雜的資料類型，如JSON或XML，最好使用其他的傳參方式，如POST請求。

III. 表單資料送出

前端表單的基礎結構

一個簡單的表單由以下幾個主要組成部分：

1. <form>标簽：定義了一個表單，并且将表單内的控件組合在一起。
2. 表單控件：<input>、<select>、<textarea>等标簽表示不同類型的表單控件，每個控件都有自己的屬性和特性，可以對表單輸入内容進行校驗或處理。
3. 送出按鈕：<button type="submit">或<input type="submit">按鈕定義在表單内，用于送出表單資料到伺服器端。
4. 取消/重置按鈕：<button type="reset">或<input type="reset">按鈕用于清空表單所有的控件内容（或将其還原為原始值）。

一個簡單的表單結構示例如下：

<form action="#" method="post">
  <label for="name">姓名：</label>
  <input id="name" type="text" name="username" required>

  <label for="email">郵箱：</label>
  <input id="email" type="email" name="email" required>

  <label for="sex">性别：</label>
  <select id="sex" name="sex">
    <option value="male">男</option>
    <option value="female">女</option>
  </select>

  <label for="message">留言：</label>
  <textarea id="message" name="message"></textarea>

  <button type="submit">送出</button>
  <button type="reset">重置</button>
</form>
           

需要注意的是，<form>标簽中的action屬性可以指定資料送出至伺服器端的處理腳本或API，并且method屬性可以指定資料送出方式（GET或POST）。同時每個表單控件都需要定義一個name屬性，以便伺服器端正确解析資料。

在以上示例中，标簽的type屬性設定為text和email，用于限制輸入格式；标簽定義了選項和預設選中項；标簽用于輸入多行文本内容，沒有type屬性；标簽用于定義按鈕類型，type屬性可以設定為submit、reset、button等。

表單送出的3中方式：GET、POST和PUT

表單送出有三種方式：GET、POST和PUT。

1. GET：将表單資料附加在URL後送出給伺服器。這種方式比較适合送出一些簡單查詢條件等資料，但不适合送出大量資料或敏感資料，因為表單資料會出現在URL中，容易被第三方擷取和竊取。
2. <form action="http://example.com/search" method="GET"> <input type="text" name="query" /> <button type="submit">搜尋</button> </form>
3. 例如，上述示例中，當使用者點選搜尋按鈕時，表單資料将通過GET方式送出到http://example.com/search?q=query，q參數就是表單中輸入的搜尋關鍵詞。
4. POST：将表單資料作為消息體送出給伺服器。使用者輸入的資料不會出現在URL中，是以比GET方式更安全，可以送出大量資料或敏感資料。
5. <form action="http://example.com/submit" method="POST"> <label for="name">姓名：</label> <input type="text" name="name" /> <label for="email">郵箱：</label> <input type="email" name="email" /> <button type="submit">送出</button> </form>
6. 例如，上述示例中，當使用者點選送出按鈕時，表單資料将通過POST方式送出到http://example.com/submit，資料不會出現在URL中，而是封裝在HTTP請求的消息體中。
7. PUT：将表單資料作為消息體送出給伺服器，并用來更新伺服器上存在的文檔或資源。PUT請求類似于POST請求，不同之處在于PUT請求用于更新已有的資源，而不是在伺服器上建立新的資源。
8. <form action="http://example.com/update" method="PUT"> <input type="hidden" name="id" value="123" /> <label for="name">姓名：</label> <input type="text" name="name" /> <label for="email">郵箱：</label> <input type="email" name="email" /> <button type="submit">送出</button> </form>
9. 例如，上述示例中，當使用者點選送出按鈕時，表單資料将通過PUT方式送出到http://example.com/update/123，其中123是要更新的資源的ID。

需要注意的是，在使用PUT方式送出時，通常需要使用隐藏<input>來傳遞資源ID等必要的資訊，這樣伺服器在接收到PUT請求時才能正确更新相應的資源。

使用各種HTTP方法送出表單資料之間的差異

HTTP方法	說明
GET	表單資料作為查詢字元串附加在URL上發送。适用于資料量小、安全性要求不高的情況，如搜尋、檢視等。
POST	表單資料作為請求體内容發送。适用于資料量大、安全性要求高的情況，如登入、注冊等。
PUT	表單資料作為請求體内容發送，并更新指定資源。适用于更新整個資源。
PATCH	表單資料作為請求體内容發送，并對指定資源進行部分更新。适用于隻更新部分資源。
DELETE	删除指定資源。适用于需要删除指定資源的情況。

總結：

• GET：資料在URL中傳輸，适用于資料量小、安全性不高的情況。
• POST：資料在請求體中傳輸，适用于資料量大、安全性高的情況。
• PUT：用于更新整個資源。
• PATCH：用于更新部分資源。
• DELETE：用于删除指定資源。

如何擷取表單資料以及其它輸入控件的值

擷取表單資料以及其它輸入控件的值可以通過JavaScript來實作。以下是常見的擷取表單資料或其它輸入控件值的方法：

1. 通過id擷取元素，并使用value屬性擷取控件的值，例如：

<input type="text" id="username">
<button onclick="getValue()">擷取值</button>

<script>
function getValue() {
  var username = document.getElementById("username").value;
  console.log(username);
}
</script>
           

2. 通過name屬性擷取元素，并使用querySelector()或querySelectorAll()方法擷取表單元素的值，例如：

<form>
  <label>
    使用者名：
    <input type="text" name="username">
  </label>
  <label>
    密碼：
    <input type="password" name="password">
  </label>
  <button type="button" onclick="getFormValues()">擷取表單值</button>
</form>

<script>
function getFormValues() {
  var formData = new FormData(document.querySelector('form'));
  console.log(formData.get('username'));
  console.log(formData.get('password'));
}
</script>
           

3. 使用jQuery庫來簡化擷取元素和值的操作，例如：

<form>
  <label>
    使用者名：
    <input type="text" name="username">
  </label>
  <label>
    密碼：
    <input type="password" name="password">
  </label>
  <button type="button" onclick="getFormValues()">擷取表單值</button>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function getFormValues() {
  var username = $('input[name="username"]').val();
  var password = $('input[name="password"]').val();
  console.log(username);
  console.log(password);
}
</script>
           

以上是常用的擷取表單資料或其它輸入控件值的方法，需要根據實際情況選擇适合自己的方法。

IV. FormData對象送出

什麼是FormData

FormData 是一種對象，可以将一個表單中的資料以 key-value 的形式建構出來，以便用于 AJAX 請求中送出資料。

FormData 的資料類型用于 HTML 表單資料、檔案以及 Blob 對象等二進制資料。

使用 FormData 的好處是，可以自動識别表單中的控件類型，并将資料以正确的方式編碼和添加到請求中。不必對每個表單字段手動進行編碼，也不必為上傳檔案和二進制資料檢查每個位元組或者執行個體化許多 XmlHttpRequest 對象。

使用 FormData 建構表單資料并送出到伺服器端的示例代碼如下：

function sendData() {
  var inputs = document.querySelectorAll('input[type="text"], input[type="email"]');
  var formData = new FormData();

  for (var i = 0; i < inputs.length; i++) {
    formData.append(inputs[i].name, inputs[i].value);
  }

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/submitform', true);

  xhr.onload = function(e) {
    if (this.status === 200) {
      console.log(this.response);
    }
  };

  xhr.send(formData);
}
           

以上代碼使用 FormData 将表單資料編碼并送出到 /api/submitform 伺服器端的位址，其中将表單中的所有 type="text" 和 type="email" 的控件的 name 和 value 填充到 FormData 對象中。最後使用 XmlHttpRequest 對象發送請求，并在響應成功後輸出響應結果。

如何使用FormData進行表單資料編碼

可以使用 FormData 對象來将表單資料編碼，以便用于 AJAX 請求或其他相關用途。

以下是使用 FormData 對象進行表單資料編碼的示例：

<form id="example-form">
  <label>
    使用者名：
    <input type="text" name="username">
  </label>
  <label>
    密碼：
    <input type="password" name="password">
  </label>
  <label>
    頭像：
    <input type="file" name="avatar">
  </label>
  <button type="button" onclick="submitForm()">送出</button>
</form>

<script>
function submitForm() {
  const form = document.querySelector('#example-form');
  const formData = new FormData(form);

  // 将編碼後的資料發送到伺服器
  fetch('/api/submit-form', {
    method: 'POST',
    body: formData
  })
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('送出表單失敗');
    }
  })
  .then(data => {
    console.log('送出成功', data);
  })
  .catch(error => {
    console.error(error.message);
  })
}
</script>
           

在以上示例中，我們使用 FormData 對象并指定表單 DOM 元素，并将其指派給 formData 變量。然後，使用 fetch() 發送了一個 HTTP POST 請求，将 formData 作為請求體中的資料，發送到了伺服器上的 /api/submit-form 接口。

使用Ajax送出請求時如何使用FormData

使用 Ajax 進行表單資料送出時，可以使用 FormData 對象來進行表單資料編碼，簡化表單資料的構造和傳輸，以下是使用 Ajax 和 FormData 進行表單資料送出的一個示例：

<form id="example-form">
  <label>
    使用者名：
    <input type="text" name="username">
  </label>
  <label>
    密碼：
    <input type="password" name="password">
  </label>
  <label>
    頭像：
    <input type="file" name="avatar">
  </label>
  <button type="button" onclick="submitForm()">送出</button>
</form>

<script>
function submitForm() {
  const form = document.querySelector('#example-form');
  const formData = new FormData(form);

  // 使用 Ajax 發送資料
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/submit-form', true);
  xhr.onload = function() {
    if (this.status === 200) {
      console.log(this.responseText);
    } else {
      console.error('請求發生錯誤');
    }
  };
  xhr.send(formData);
}
</script>
           

以上示例中，我們使用 FormData 對象将表單資料編碼，并在點選送出按鈕時，使用 XMLHttpRequest 對象發送了一個 HTTP POST 請求，将 formData 作為請求體中的資料，發送到了伺服器上的 /api/submit-form 接口。在 xhr.onload 事件中，我們判定如果傳回狀态值為 200，就将響應文本在控制台輸出，否則輸出錯誤資訊。

FormData的使用場景

FormData 可以用于處理表單送出的資料，并将資料以正确的方式編碼和添加到 AJAX 請求中進行傳輸。

以下是使用 FormData 的一些常見應用場景：

1. 檔案上傳 - 可以通過 FormData 對象送出表單中的檔案。使用 append() 方法可以将檔案對象添加到 FormData 中，然後通過 AJAX 請求将資料送出到伺服器。這是 FormData 最常用的應用場景之一。
2. 表單送出 - 可以使用 FormData 對象将表單資料編碼，并通過 AJAX 請求将資料送出到伺服器，這種方式通常比傳統的表單送出更加靈活。
3. 圖檔預覽 - 可以使用 FileReader 對象讀取選擇的圖檔檔案，并将檔案内容轉換為 Base64 格式後，将轉換後的字元串指派給表單中的一個隐藏字段，然後通過 FormData 異步送出給伺服器。
4. AJAX 檔案下載下傳 - 可以将要下載下傳的檔案和其他參數一起添加到 FormData 對象中，并通過 AJAX 請求将資料送出到伺服器，進而實作檔案下載下傳。
5. 漸進式應用 - 可以通過 FormData 對象來支援漸進式表單送出，如實時儲存資料，并在使用者離開頁面時送出資料。

總之，FormData 可以在各種情況下使用，友善了資料的處理和異步送出。無論是上傳圖檔、檔案，還是通過 AJAX 送出表單，都可以使用 FormData 來簡化操作。

用途	描述
檔案上傳	使用 FormData 對象送出表單中的檔案，并通過 AJAX 請求将資料傳輸到伺服器
表單送出	使用 FormData 對象将表單資料編碼，并通過 AJAX 請求将資料送出到伺服器，比傳統表單送出更加靈活
圖檔預覽	使用 FileReader 對象讀取并轉換圖檔檔案為 Base64 格式後，将字元串指派給表單的隐藏字段，并通過 FormData 異步送出給伺服器
AJAX 檔案下載下傳	使用 FormData 對象将要下載下傳的檔案和其他參數添加到資料中，并通過 AJAX 請求将資料傳輸到伺服器
漸進式應用	使用 FormData 對象支援漸進式表單送出，如實時儲存資料，并在使用者離開頁面時送出資料

FormData 是一種非常有用的對象，可以用于處理表單送出的資料，并将資料以正确的方式編碼和添加到 AJAX 請求中進行傳輸，進而實作各種常見的應用，如檔案上傳、表單送出、圖檔預覽、AJAX 檔案下載下傳等，同時也可以支援漸進式應用。通過使用 FormData，我們可以簡化資料處理和異步送出，提高我們的開發效率。

V. HTTP Headers

什麼是HTTP Headers

HTTP Headers（HTTP頭部資訊）是在 HTTP 協定通信過程中，對于 HTTP 請求和 HTTP 響應的描述性資訊。

HTTP header 主要由一系列基本的名稱/值對（鍵值對）組成，用于描述用戶端和伺服器之間的各種資料類型和操作，例如，用戶端可以通過設定 HTTP header 來告訴伺服器請求的方法、使用的編碼格式、預期的 MIME 類型等資訊，伺服器則可以通過設定 HTTP header 來告訴用戶端響應的狀态碼、MIME 類型、緩存政策等資訊。

HTTP header 分為請求頭和響應頭，請求頭包含用戶端向伺服器端請求資訊之前發送的資訊，響應頭則包含伺服器傳回的資訊。

HTTP 頭部資訊通常包括以下幾個基本的屬性：

• Accept：用戶端接受的 HTTP 響應的資料類型；
• Content-Type：請求或響應内容的 MIME 類型；
• Authorization：用戶端提供的證書或令牌；
• Cache-Control：緩存政策；
• Connection：請求完成之後是否關閉網絡連接配接；
• Content-Length：請求或響應的内容長度（機關是位元組）；
• Cookie：用戶端傳輸到伺服器的 Cookie 值；
• Host：請求的主機名和端口号；
• User-Agent：用戶端的應用程式或浏覽器資訊。

除了上面列舉的基本屬性之外，還有一些其他特定于某一類型的資料請求或響應的 HTTP header 資訊，例如：

• Referer：用戶端使用者的來源網址；
• Location：重定向的位址；
• Content-Encoding：資料請求或響應的編碼方式；
• Set-Cookie：伺服器端寫入的 Cookie 值；
• Last-Modified：内容的最後修改時間。

HTTP header 是 Web 應用程式中的關鍵元素，有助于用戶端和伺服器端之間的通信。通過設定正确的 HTTP header，可以幫助實作各種功能和技術，如緩存、安全驗證、内容壓縮、跨域資源共享等。

常見的HTTP Headers及其作用

以下是常見的 HTTP Headers 及其作用：

HTTP Headers	作用
Accept	用于向伺服器指出用戶端希望接受的 MIME 類型
Authorization	包含用戶端提供的證書或令牌
Cache-Control	用于在請求和響應間傳遞緩存指令
Connection	用于指定是否關閉網絡連接配接
Content-Encoding	用于指定文檔内容的編碼方式
Content-Language	用于指定文檔内容的自然語言
Content-Length	用于指定請求或響應内容的長度
Content-Type	用于指定請求或響應内容的 MIME 類型
Cookie	包含用戶端傳輸到伺服器的 Cookie 值
Host	指定請求的主機名和端口号
If-Modified-Since	用于執行條件 GET 操作
Last-Modified	請求資源的最後修改時間
Referer	送出請求的頁面的 URI
User-Agent	包含了用戶端的應用程式、作業系統、浏覽器等資訊
Set-Cookie	向用戶端寫入 Cookie 值
Location	用于執行 HTTP 重定向

不同的 HTTP Header 具有不同的作用，可以用于傳遞資料資訊，請求或響應内容的控制以及緩存政策等内容。開發者可以根據自己的需求選擇适合的 HTTP Header 來完成網站開發任務。

如何使用HTTP Headers傳遞參數

HTTP Headers 可以用于傳遞請求或響應中的參數資訊，具體方法如下：

1. 使用 XMLHttpRequest 對象（簡稱 AJAX），可以向伺服器發送 HTTP 請求，并在請求中通過設定 HTTP Headers 來傳遞參數資訊。例如，可以使用 setRequestHeader() 方法來設定請求頭部資訊：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api');
xhr.setRequestHeader('Authorization', 'Bearer token');
xhr.send();
           

在這個例子中，setRequestHeader() 方法被用來設定認證 token。這樣，就可以将認證資訊作為一個請求頭資訊，發送到伺服器上。

1. 像 HTTP Headers 一樣設定 URL 中的參數。HTTP URL 經常會傳遞參數資訊，可以跟 HTTP Header 相配合，将資料傳遞到伺服器。例如：

http://example.com/api?username=user&password=pass
           

在這個例子中，URL 參數是 username 和 password。如果伺服器知道如何讀取這些參數，就可以處理 HTTP 請求，傳回結果适當地響應。使用這種方式傳遞參數的好處是，URL 參數的格式比請求頭更加簡單，容易處理。

總之，HTTP Headers 可以用來傳遞請求或響應中的參數資訊，具有非常廣泛的應用場景，并且搭配 AJAX 使用時可實作無需頁面重新整理的異步資料傳送。但是開發者需要注意，不要把過多的資訊放到頭部參數中，以免拖慢伺服器的響應速度。

HTTP Headers的使用場景

以下是 HTTP Headers 的常見使用場景及其具體的 HTTP Headers：

場景	HTTP Headers
認證	Authorization
緩存控制	Cache-Control, Expires
壓縮	Accept-Encoding, Content-Encoding
跨域請求	Access-Control-Allow-Credentials, Access-Control-Allow-Headers, Access-Control-Allow-Methods, Access-Control-Allow-Origin
表單送出	Content-Type, Content-Disposition
斷點續傳	Range, Content-Range
跳轉	Location
使用者代理	User-Agent
Cookie 傳輸	Cookie, Set-Cookie

HTTP Headers 可以用于傳輸請求和響應的資訊，不同的場景需要使用不同的 HTTP Headers。對于認證、表單送出、斷點續傳等場景，HTTP Headers 通常會承載關鍵資訊；對于緩存控制、跨域請求、壓縮、使用者代理等場景，HTTP Headers 可以幫助伺服器和用戶端作出決策。最常見的 HTTP Headers 是 Content-Type，用于指定請求或響應消息的 MIME 類型，因為它能等效于設定一些其他 HTTP Headers。

通過使用正确的 HTTP Headers，可以使用戶端和伺服器之間的資料傳輸更加高效，并保證資訊的傳輸和存儲的安全性，開發者應該在實際應用中根據不同場景選擇對應的 HTTP Headers。

VI. JSON資料送出

JSON格式介紹

JSON（JavaScript Object Notation）是一種輕量級的資料交換格式，基于 JavaScript 文法的子集，是以易于閱讀和編寫。JSON 格式是一種常見的資料交換格式，旨在通過獨立于作業系統和程式設計語言的方式實作資料的交換和遠端通路。

JSON 格式是一種完全獨立的格式，不依賴于任何語言或軟體包。

它的設計簡單，可讀性強，易于實作和擴充。

JSON 格式可以表示

• 對象（使用花括号 {}）
• 數組（使用方括号 []）
• 原始值（例如字元串、數字、布爾值和空值）
• 并且支援嵌套和複合資料類型。

下面是一個示例 JSON 對象：

{
  "name": "John",
  "age": 30,
  "email": "[email protected]",
  "hobbies": ["reading", "music", "sports"],
  "address": {
    "street": "123 Main St",
    "city": "New York",
    "state": "NY",
    "zip": "10001",
    "country": "USA"
  }
}
           

在這個例子中，JSON 對象表示了一個人的資訊，包括姓名、年齡、愛好、位址等。其中，hobbies 是一個數組類型，address 是一個嵌套的對象類型。

使用 JSON 格式的最主要優點是它能夠簡化資料交換的過程，使得不同系統之間的資料交換變得更加容易和可靠。在 Web 應用程式的開發中，JSON 格式也被廣泛使用，例如在 AJAX 技術中，通過從伺服器擷取 JSON 格式資料，可以實作動态頁面效果。

如何将JSON資料序列化為字元串

将 JSON 資料序列化為字元串的過程被稱為 “stringify” 。

在 JavaScript 中，可以使用 JSON.stringify() 方法将 JavaScript 資料類型序列化為 JSON 字元串。

以下是使用 JSON.stringify() 方法将 JavaScript 對象轉化為 JSON 字元串的示例：

const data = {
  "name": "John",
  "age": 30,
  "hobbies": ["reading", "music", "sports"],
  "address": {
    "street": "123 Main St",
    "city": "New York",
    "state": "NY",
    "zip": "10001",
    "country": "USA"
  }
};

const jsonString = JSON.stringify(data);
console.log(jsonString); // {"name":"John","age":30,"hobbies":["reading","music","sports"],"address":{"street":"123 Main St","city":"New York","state":"NY","zip":"10001","country":"USA"}}
           

以上代碼中，定義了一個 JavaScript 對象 data ，該對象包含一些屬性和子屬性。通過在 JSON.stringify() 方法中傳入 data 對象，可以将其序列化為 JSON 字元串并指派給 jsonString 變量。

需要注意的是，JSON.stringify() 方法預設情況下會将包含 “undefined”、“function” 或 “symbol” 類型的屬性删除，是以建議使用時添加過濾函數或指定額外參數。同時，使用 JSON.stringify() 方法序列化的 JSON 字元串可以輕松地通過網絡發送、存儲或在 Web 應用程式中交換。

如何在請求參數中傳遞和解析JSON資料

在 Web 應用程式中，常常需要在請求參數中傳遞和解析 JSON 資料。以下是一些常見的方法：

1. 使用 GET 請求和 URL 參數傳遞 JSON 資料：

const data = { "name": "John", "age": 30 };
const urlParams = new URLSearchParams(JSON.stringify(data));
const response = await fetch('/api?data=' + encodeURIComponent(urlParams.toString()));
           

在這個例子中，JavaScript 對象 data 被序列化為 JSON 字元串後通過 URLSearchParams 添加到 URL 參數中，最後使用 encodeURIComponent() 方法對參數進行編碼處理，發送 GET 請求。

2. 使用 POST 請求和請求體傳遞 JSON 資料：

const data = { "name": "John", "age": 30 };
const response = await fetch('/api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data)
});
           

在這個例子中，JavaScript 對象 data 被序列化為 JSON 字元串後設定為 POST 請求的請求體内容，通過 headers 中指定的 Content-Type 通知伺服器該請求體是一個 JSON 資料。

在伺服器端，可以使用對應的解析方法将 JSON 資料反序列化為 JavaScript 對象。例如，在 Node.js 中，可以使用内置的 JSON.parse() 方法解析 JSON 資料：

const http = require('http');

http.createServer((req, res) => {
  if (req.method === 'POST' && req.url === '/api') {
    let body = '';
    req.on('data', (chunk) => { body += chunk.toString(); });
    req.on('end', () => { 
      const data = JSON.parse(body); 
      console.log(data);
      res.writeHead(200, { 'Content-Type': 'application/json' });
      res.end(JSON.stringify(data));
    });
  }
}).listen(8080);
           

以上是一個簡單的 Node.js HTTP 伺服器，當接收到 /api 的 POST 請求時，将請求體通過 JSON.parse() 方法反序列化為 JavaScript 對象并輸出到控制台，然後将其再次序列化為 JSON 字元串并傳回到用戶端。

以上是一些常見的方法，通過這些方法，您可以在 Web 應用程式中輕松地傳遞和解析 JSON 資料。

JSON資料送出的使用場景

以下是 JSON 資料送出的常見使用場景及其優勢：

場景	優勢
前後端資料互動	使用 JSON 進行前後端資料互動時，前端可以将 JavaScript 對象或數組轉化為 JSON 字元串後發送到伺服器，伺服器可以簡單地解析 JSON 資料并以同樣的格式傳回資料，大大簡化了資料格式轉換的過程。
Web API 設計	在設計 Web API 時，通常會選擇使用 JSON 格式作為資料交換的格式。使用 JSON 格式作為資料交換格式，不僅能夠輕松處理不同資料類型和結構的資料，還能與多種程式設計語言和平台配合使用。
存儲資料	在 Web 應用程式中，将資料存儲為 JSON 格式的檔案或資料庫記錄，可以提高應用程式的性能和可維護性。這是因為，JSON 格式是易于閱讀和編寫的，而且通常比傳統的關系型資料庫更快地進行讀寫資料。
處理 RESTful API	在處理 RESTful API 時，通常使用 JSON 格式傳遞資料。使用 JSON 格式的優點就在于，它可以輕松地表示多個複雜嵌套的對象和數組，并且這些對象和數組可以再次嵌套在一起。

使用 JSON 格式進行資料送出的優點就在于其可讀性強，易于解析和擴充，并且可以與不同程式設計語言和平台進行協作。在 Web 應用程式的開發中，因為使用 JSON 資料可以大大簡化前後端互動的過程，是以越來越多的 Web 應用程式開始使用 JSON 資料格式。

VII. XML資料送出

XML資料格式介紹

XML（Extensible Markup Language）是一種通用的标記語言，用于描述資料結構和内容。

XML 可以表示各種複雜的資料類型，如數字、文本、日期、時間、對象、數組等等，同時具有自我描述性：通過描述資料的結構和定義資料屬性，可以擷取資料的詳細說明和目的。

以下是一個簡單的 XML 示例：

<person>
  <name>John</name>
  <age>30</age>
  <address>
    <street>123 Main St</street>
    <city>New York</city>
    <state>NY</state>
    <zip>10001</zip>
  </address>
</person>
           

在此示例中，XML 标記 ”” 表示 “人” 類型的資料，标記下的子元素包含個人的姓名、年齡和位址。同時，子元素中還有子元素，表示位址資訊的詳細資訊。

與使用标記語言（如 HTML）的網頁相比，XML 更強調資料的格式和結構描述。通過定義文檔類型聲明（DTD）或 XML 模式（XSD）等機制，可對 XML 文檔結構和屬性進行嚴格的定義和規範，進而增強了資料交換和資料處理的準确性和可靠性。

由于其靈活性和可擴充性，XML 已被廣泛應用于跨平台資料交換、Web 服務、配置檔案和消息傳遞等領域。

如何将XML資料序列化為字元串

将 XML 資料序列化為字元串的過程被稱為 “裝串行”。

在 JavaScript 中，可以使用 XMLSerializer 序列化 Document 對象為 XML 字元串。

以下是一個将 XML 資料序列化為字元串的示例：

// 建立 XML Document 對象
const xmlDoc = document.implementation.createDocument("", "root", null);

// 添加子元素和屬性
const person = xmlDoc.createElement("person");
person.setAttribute("id", "123");
const name = xmlDoc.createElement("name");
const text = xmlDoc.createTextNode("John");
name.appendChild(text);
person.appendChild(name);
xmlDoc.documentElement.appendChild(person);

// 将 Document 對象序列化為 XML 字元串
const serializer = new XMLSerializer();
const xmlString = serializer.serializeToString(xmlDoc);

console.log(xmlString);
           

以上代碼中，首先使用 document.implementation.createDocument() 方法建立了一個名稱為 “root” 的 XML Document 對象，并向其中添加了一個 “person” 元素和一個 “name” 子元素。然後使用 XMLSerializer 将 xmlDoc 對象序列化為 XML 字元串，并将結果列印到控制台中。

需要注意的是，XMLSerializer 不會自動生成 XML 聲明，開發者需要手動添加或使用 createDocument() 方法時傳遞。

此外，在伺服器端，也可以使用相關的解析庫将 XML 資料反序列化為 JavaScript 對象或其他資料類型。例如，在 Node.js 中，可以使用 xml2js 庫對 XML 資料進行解析：

const xml2js = require('xml2js');

const xmlString = '<person id="123"><name>John</name></person>';
const parser = new xml2js.Parser({ explicitArray: false, trim: true });
parser.parseStringPromise(xmlString).then(result => {
  console.log(result);
});
           

以上代碼中，使用 xml2js.Parser 類建立了一個解析器，并将 xmlString 作為參數進行解析，并将解析結果輸出到控制台中。

如何在請求參數中傳遞和解析XML資料

在 Web 應用程式中，常常需要在請求參數中傳遞和解析 XML 資料。

以下是一些常見的方法：

1. 使用 GET 請求和 URL 參數傳遞 XML 資料：

const xmlDoc = document.implementation.createDocument("", "root", null);
const person = xmlDoc.createElement("person");
const name = xmlDoc.createElement("name");
const text = xmlDoc.createTextNode("John");
name.appendChild(text);
person.appendChild(name);
xmlDoc.documentElement.appendChild(person);

const urlParams = new URLSearchParams(new XMLSerializer().serializeToString(xmlDoc));
const response = await fetch('/api?data=' + encodeURIComponent(urlParams.toString()));
           

在這個例子中，XML Document 對象 xmlDoc 通過 XMLSerializer 序列化為字元串後通過 URLSearchParams 添加到 URL 參數中，最後使用 encodeURIComponent() 方法對參數進行編碼處理，發送 GET 請求。

2. 使用 POST 請求和請求體傳遞 XML 資料：

const xmlDoc = document.implementation.createDocument("", "root", null);
const person = xmlDoc.createElement("person");
const name = xmlDoc.createElement("name");
const text = xmlDoc.createTextNode("John");
name.appendChild(text);
person.appendChild(name);
xmlDoc.documentElement.appendChild(person);

const response = await fetch('/api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/xml' },
  body: new XMLSerializer().serializeToString(xmlDoc)
});
           

在這個例子中，XML Document 對象 xmlDoc 直接設定為 POST 請求的請求體内容，通過 headers 中指定的 Content-Type 通知伺服器該請求體是一個 XML 資料。

在伺服器端，可以使用對應的解析方法将 XML 資料反序列化為 JavaScript 對象。例如，在 Node.js 中，可以使用相關的解析庫（如 xml2js）解析 XML 資料：

const http = require('http');
const xml2js = require('xml2js');

http.createServer((req, res) => {
  if (req.method === 'POST' && req.url === '/api') {
    let body = '';
    req.on('data', (chunk) => { body += chunk.toString(); });
    req.on('end', () => { 
      const parser = new xml2js.Parser({ explicitArray: false, trim: true });
      parser.parseStringPromise(body).then(data => {
        console.log(data);
        res.writeHead(200, { 'Content-Type': 'application/xml' });
        res.end(body);
      });
    });
  }
}).listen(8080);
           

以上是一個簡單的 Node.js HTTP 伺服器，當接收到 /api 的 POST 請求時，将請求體通過 xml2js 解析為 JavaScript 對象并輸出到控制台，然後将其再次序列化為 XML 字元串并傳回到用戶端。

以上是一些常見的方法，通過這些方法，您可以在 Web 應用程式中輕松地傳遞和解析 XML 資料。

XML資料送出的使用場景

以下是 XML 資料送出的常見使用場景及其優勢：

場景	優勢
Web 服務	許多 Web 服務協定（如 SOAP）使用 XML 格式作為消息傳遞的格式。XML 支援複雜的資料結構和命名空間，能夠描述資料的層次結構和類型資訊，可幫助 Web 服務實作請求和響應的互動。
配置檔案	在一些 Web 應用程式中，XML 格式用于配置檔案記錄應用程式的設定。使用 XML 格式儲存配置資訊，有助于使配置檔案易于閱讀和編輯，并且可以友善地進行版本控制和擴充。
資料存儲	XML 資料可以存儲在資料庫中，作為一種結構化資料格式進行存儲和檢索。在一些 Web 應用程式中，XML 資料常用來存儲和處理文檔、模闆和報表等結構化資料。
通訊協定	在某些情況下，XML 資料可以作為一種通訊協定傳輸，例如在傳統的 Web Service 以及一些基于 REST 風格的 API 中，XML 作為資料格式可以使得多個系統之間通訊交流變得簡單，适用于網際網路上分散的多個系統。

在 Web 應用程式的開發中，XML 作為一種通用的資料交換格式，已被廣泛應用于 Web 服務、配置檔案、資料存儲和通訊協定等領域。具有結構化、可擴充性、自描述性和跨平台互操作性等特點，使得 XML 資料格式能夠适用于不同類型的資料描述和資料交換場景。

VIII. Hash參數

什麼是Hash參數

Hash 參數是指 URL 中的 hash（#）後面帶着的參數。

當 URL 中的 hash 後面有參數時，稱為 Hash 參數。

Hash 參數通常用于 Web 應用程式中的用戶端路由和狀态管理。

以下是一個示例 URI：

https://example.com/home?id=123#tab=info§ion=contact
           

在 URI 中，https://example.com/home?id=123 是查詢參數部分，而 #tab=info§ion=contact 則是 Hash 參數部分。Hash 參數後的字元串可以被 JavaScript 腳本解析和操作，而不會重新加載頁面。這使得前端應用程式可以在不重新整理頁面的情況下加載特定狀态的視圖或元件。

在一些流行的前端架構和庫中，如 Vue、React 和 AngularJS，都有使用 Hash 參數來實作用戶端路由和狀态管理的功能。在這些架構中，當應用程式切換到不同的路由或狀态時，會更新 URI 的 Hash 部分，是以後退和前進按鈕可以直接在應用程式中進行操作，而不會重新整理整個頁面。

如何在URL中添加Hash參數

要在 URL 中添加 Hash 參數，隻需要在 URL 的末尾添加 # 符号和需要添加的 Hash 參數即可。

通常，Hash 參數格式為 #key1=value1&key2=value2...，其中 key=value 表示一個參數鍵值對。

以下是一個示例 JavaScript 代碼，示範如何通過代碼添加 Hash 參數到 URL：

const params = new URLSearchParams();
params.set('tab', 'info');
params.set('section', 'contact');

location.hash = params.toString();
           

在這個例子中，我們首先使用 URLSearchParams 類構造一個參數對象 params，并向其中添加了兩個參數鍵值對 'tab'='info' 和 'section'='contact'。然後在 location.hash 中設定 Hash 參數的值為 params.toString()，即 tab=info§ion=contact，使浏覽器 URL 的 Hash 部分被設定為我們所需的值。

除了使用上述的代碼來添加 Hash 參數，還可以通過拼接字元串的方式将參數附加到 URL 的末尾。例如：

const url = 'https://example.com/page.html#' + encodeURIComponent('tab=info§ion=contact');
           

在這個例子中，我們使用 encodeURIComponent() 方法将參數序列化為 URL 可用的格式，然後将其拼接到 URL 字元串的末尾形成完整的 URL。

需要注意的是，在添加 Hash 參數時，隻是在 URL 中添加了一個用于用戶端的辨別符，服務端并不會收到這些參數。如果想要将參數發送到服務端進行處理，需要使用查詢參數（query string）來傳遞參數。

擷取Hash參數的方法

要擷取 URL 的 Hash 參數，可以使用 JavaScript 中的 window.location.hash 屬性擷取目前頁面的 URL 中的 Hash 部分。然後，可以将 Hash 值解析成對象形式，擷取其中的參數。

以下是一個示例代碼，示範了如何從頁面 URL 擷取 Hash 參數：

// 從 URL 擷取 Hash 參數
const hashStr = window.location.hash.substring(1); // 去掉第一個字元 '#'
const params = new URLSearchParams(hashStr);

// 從 Hash 參數中擷取具體的值
const tab = params.get('tab');
const section = params.get('section');

console.log(tab); // "info"
console.log(section); // "contact"
           

在這個例子中，window.location.hash 擷取了目前頁面的 URL 中的 Hash 部分，并使用 substring() 方法将其前面的 # 字元去掉。然後，使用 URLSearchParams 類構造一個參數對象 params，提取 Hash 參數中的資料。

由于 Hash 參數部分的格式通常為 #key1=value1&key2=value2...，是以 URLSearchParams 類通常可以友善地解析 Hash 參數到參數對象中。通過調用 params.get('參數名') 方法，可以輕松地擷取參數的值。

需要注意的是，在某些舊版本的浏覽器中，可能不支援 URLSearchParams 類，此時可以使用正規表達式或字元串分割等方式進行解析。

Hash參數的使用場景

以下是 Hash 參數的常見使用場景及其優勢：

場景	優勢
用戶端路由	在單頁應用程式中，使用 Hash 參數作為用戶端路由的實作方式已經成為一種流行的方式。通過改變 URL 中的 Hash 參數來實作視圖的切換，而無需重新整理整個頁面，提高了應用程式的互動性和響應速度。
狀态管理	Hash 參數可以用來管理應用程式的狀态，可以将狀态編碼到參數中，并在應用程式的不同片段之間進行傳遞。與用戶端路由相結合，可以幫助應用程式保留狀态資訊以提供更好的使用者體驗。
分享連結	在一些應用程式中，Hash 參數用于儲存使用者輸入的資料，或使用者的浏覽狀态資訊等。使用者可以分享這些連結，以便其他人檢視相同的内容或狀态。
子產品化加載	在一些子產品化加載器（module loader）中，Hash 參數可以用于定義子產品的版本或路徑等資訊，幫助加載器加載所需的子產品并降低響應延遲。

在 Web 應用程式的開發中，Hash 參數已經被廣泛應用于用戶端路由、狀态管理、資料共享和子產品化加載等領域。

使用 Hash 參數作為用戶端路由和狀态管理的方式，可以實作無需重新整理頁面的視圖切換和狀态管理，并且可以大大提高應用程式的性能和使用者體驗。

此外，Hash 參數還可以用于分享連結和子產品化加載等場景，為 Web 應用程式的開發和使用帶來更多的便利。

IX. 入參方式的選擇

分析每種方式的優缺點

對于用戶端路由和狀态管理這兩種使用 Hash 參數的方式，它們的優缺點如下：

用戶端路由

優點

• 無需重新整理頁面：使用 Hash 參數可以實作無需重新整理頁面的視圖切換，提高了應用程式的互動性和響應速度。
• 可以使用浏覽器曆史記錄：使用 Hash 參數來實作用戶端路由，浏覽器可以根據不同的 Hash 值來存儲曆史記錄，使用者可以使用浏覽器的前進和後退按鈕來導航應用程式的視圖。
• 易于實作：Hash 參數作為用戶端路由的實作方式相對來說比較簡單易懂，并且可以在不同的浏覽器和裝置上進行相容性測試。

缺點

• 安全性：Hash 參數可以被用戶端 JavaScript 通路和修改，這可能導緻某些安全問題。比如，惡意腳本可以修改 Hash 參數來篡改用戶端路由和狀态資訊，這可能會影響使用者的體驗和應用程式的可靠性。
• 可讀性：由于 Hash 參數部分通常是一些密集的、難以閱讀的字元串，是以它們不太具有可讀性，這可能會給使用者造成困惑或不便。

狀态管理

優點

• 可以儲存應用程式的狀态：Hash 參數可以用于儲存應用程式的狀态資訊，比如選擇的視圖和使用者的操作等，這可以大大提高應用程式的穩定性和可靠性。
• 可以在應用程式的不同片段之間傳遞資料：Hash 參數可以在應用程式的不同片段之間傳遞資料，這可以減少伺服器的負載，并且提高了應用程式的性能。
• 易于實作：Hash 參數作為狀态管理的實作方式相對比較簡單，可以在不同的浏覽器和裝置上進行相容性測試。

缺點

• 依賴于用戶端 JavaScript：Hash 參數作為用戶端狀态管理的實作方式，依賴于用戶端 JavaScript，是以當使用者禁用 JavaScript 或浏覽器不支援時，這種方式将會失效。
• 安全性：Hash 參數可以被用戶端 JavaScript 通路和修改，這可能會導緻某些安全問題。

總的來說，Hash 參數作為用戶端路由和狀态管理的實作方式，在應用程式開發中具有一定的優勢和劣勢，需要按照實際需求和具體情況進行權衡和選擇。

根據場景選擇最佳的入參方式

根據不同的場景，在選擇最佳的入參方式時，可以考慮以下幾個因素：

1. 資料類型：入參可能是字元串、數字、布爾值、日期等不同的資料類型。需要選擇一種能夠支援處理所需資料類型的入參方式。
2. 相容性：入參方式需要在不同的浏覽器和裝置上進行相容性測試，以確定在各種環境下均能正常工作。
3. 安全性：需要考慮入參方式的安全性，以避免惡意腳本或攻擊者篡改或僞造入參資料，進而導緻資料洩漏或系統崩潰等問題。
4. 可擴充性：在選擇入參方式時，需要考慮其是否具有可擴充性，以便在未來的需求變更或功能擴充中能夠适應新的需求。

基于以上考慮，下面是常見場景下的推薦入參方式：

• URL 查詢參數：适合需要從 URL 中擷取簡單的參數資訊，例如在支付頁面中使用訂單号作為查詢參數傳遞到後端。
• POST 資料：适合需要傳遞複雜資料類型，例如在表單送出時，需要傳遞多個字段和内容比較多的文本資料。
• Hash 參數：适合實作用戶端路由或在單頁應用程式中傳遞狀态資訊，例如使用 Hash 參數來辨別不同的頁面或狀态。
• 請求頭參數：适合在 HTTP 請求中傳遞認證資訊或應用程式的中繼資料，例如在請求 API 接口時，使用請求頭參數傳遞 OAuth2 認證 Token。
• Web 存儲：适合在前端存儲少量的資料或應用程式的緩存資訊，例如使用 localStorage 存儲使用者在應用程式中選擇的主題或語言資訊。

在實際開發中，需要根據自身的需求和場景來選擇最适合的入參方式。

防止攻擊的代碼實作技巧

在 Web 應用程式中，防止攻擊是非常關鍵的一項工作。以下是幾個常用的代碼實作技巧：

1. 輸入驗證

對于所有輸入資料，必須進行嚴格的驗證和過濾，以確定輸入的資料不包含任何惡意代碼或特殊字元。例如，使用正規表達式來驗證輸入的資料格式，使用 HTML 編碼來過濾特殊字元等。

2. 輸出轉義

在将資料輸出到 HTML、CSS、JavaScript 或其他上下文中時，必須進行适當的轉義，以避免腳本注入或其他攻擊。例如，使用 HTML 實體編碼來對特殊字元進行轉義。

3. 資料庫安全性

在進行資料庫互動時，必須使用參數化查詢和存儲過程等安全措施，以避免 SQL 注入攻擊或其他資料庫攻擊。例如，使用 PreparedStatement 類來執行參數化查詢，使用存儲過程限制使用者對資料庫的通路權限等。

4. 認證和授權

為使用者提供安全的登入、身份驗證和授權機制，以確定隻有經過授權的使用者才可以通路應用程式的功能和資料。例如，使用 OAuth2 或其他可信的身份驗證和授權協定，使用密碼雜湊演算法來保護使用者密碼等。

5. 安全頭部

在應用程式中設定合适的安全頭部，以幫助防禦跨站點腳本（XSS）、點選劫持和其他攻擊。例如，使用 Content-Security-Policy（CSP）頭部來限制應用程式中可以使用的腳本和資源。

6. 日志記錄

在應用程式中記錄重要事件，例如登入失敗、通路被拒絕等，以幫助監控和檢測潛在的攻擊行為。

以上技巧隻是一些常見的防禦方法，實際上還有許多其他的技巧和工具可以幫助保護 Web 應用程式的安全。在實際開發中，需要根據自身的需求和情況來選擇最适合的防禦措施，并且需要不斷更新和評估這些措施，以保護應用程式不受到威脅。

X. 結論

總結各種入參方式的優缺點及其适用場景

入參方式	優點	缺點	适用場景
URL 查詢參數	- 參數簡單明了 - 可以被搜尋引擎收錄	- 易受 XSS 攻擊 - 安全性差	傳遞少量的基本資料類型，如查詢條件、頁碼等
POST 資料	- 傳遞複雜資料類型 - 安全性好	- 增加了伺服器負擔 - 需要跳轉頁面	傳遞較多資料或安全要求較高的資料項
Hash 參數	- 無重新整理頁面切換 - 可以使用浏覽器曆史記錄	- 安全性差 - 可讀性差	實作用戶端路由或在單頁應用程式中傳遞狀态資訊
請求頭參數	- 安全性高 - 可以使用不同的請求體	- 需要比較繁瑣的設定 - 難以調試	傳遞認證資訊或應用程式的中繼資料
Web 存儲	- 可以存儲少量的資料 - 友善讀取和設定	- 存儲較多資料時性能不佳 - 安全性差	在前端存儲少量的資料或應用程式的緩存資訊

以上表格總結了常用的入參方式及其優缺點和适用場景，需要根據實際的需求和場景進行選擇。需要注意的是，在代碼中使用任何一種入參方式時，都需要進行相應的防禦措施，以保護 Web 應用程式的安全。

推薦在實際開發中結合實際場景選擇最優的入參方式

在實際開發中，需要結合具體的場景選擇最優的入參方式，以下是一些常見的場景和推薦的入參方式：

1. 傳遞少量的查詢條件或狀态資訊時，可以使用 URL 查詢參數或 Hash 參數。例如，通過 URL 查詢參數傳遞搜尋關鍵字或頁面編号，或者通過 Hash 參數傳遞單頁應用程式的狀态資訊。
2. 傳遞大量或複雜的資料時，可以使用 POST 資料。例如，通過 POST 資料傳遞一個包含多個字段的表單，或者傳遞一個 JSON 對象以執行某些操作。
3. 傳遞不需要公開的中繼資料或校驗資料時，可以使用請求頭參數。例如，在請求 API 接口時使用請求頭參數傳遞 OAuth2 認證 Token 或者傳遞自定義的校驗資訊。
4. 對于前端需要存儲少量資料的場景，可以使用 Web 存儲。例如，在前端存儲一些使用者配置資訊或應用程式狀态資訊。

需要注意的是，在選擇任何一種入參方式時，都需要進行相應的防禦措施，以確定應用程式的安全性。如果不确定應用程式所傳遞的資料是否安全，建議使用 POST 資料或請求頭參數傳遞資料，這樣可以更好地保護資料的安全性。