目錄

1. XSS（跨站腳本攻擊）
2. CSRF（跨站請求偽造）
3. SQL 注入
4. 文件上傳漏洞
5. 其他前端常見安全問題
6. 面試常見問答

---

1. XSS（跨站腳本攻擊）

定義

XSS（Cross-Site Scripting）是一種 通過注入惡意腳本執行非預期操作 的攻擊。
分為三類：

• 存儲型：代碼存儲在數據庫中，用戶訪問時執行（評論區、論壇）。
• 反射型：代碼通過 URL 參數返回執行。
• DOM 型：前端 JS 動態插入數據時執行。

---

危害

• 竊取 Cookie、Token，盜取用戶身份。
• 偽造請求（轉賬、發帖）。
• 植入惡意腳本、廣告、木馬。

---

防御手段

• 輸入過濾 + 輸出轉義。
• CSP（Content Security Policy） 限制腳本來源。
• HttpOnly Cookie，防止通過 JS 獲取。
• 前端框架（React/Vue）默認轉義 HTML。

---

示例

? 漏洞代碼

document.body.innerHTML = location.search; 

訪問：

http://site.com?msg=<script>alert(1)</script>

? 安全代碼

document.body.textContent = location.search;

---

2. CSRF（跨站請求偽造）

定義

CSRF（Cross-Site Request Forgery）利用 用戶已登錄狀態，誘導其訪問惡意鏈接，偽造合法請求。
瀏覽器會自動帶上用戶 Cookie，從而冒充用戶身份。

---

危害

• 轉賬、盜刷。
• 修改密碼、郵箱。
• 批量操作（刪帖、發帖）。

---

防御手段

1. CSRF Token 驗證（每個請求附帶隨機 Token）。
2. SameSite Cookie：阻止跨站請求攜帶 Cookie。
3. 驗證碼 / 二次確認。
4. Referer / Origin 校驗。

---

示例

? 漏洞

<img src="http://bank.com/transfer?to=attacker&amount=1000">

? 安全（CSRF Token）

<form method="POST" action="/transfer"><input type="hidden" name="csrfToken" value="random123"><input name="to"><input name="amount"><button>提交</button>
</form>

---

3. SQL 注入

定義

SQL 注入是攻擊者 在輸入中注入惡意 SQL 代碼，拼接后數據庫直接執行。

---

危害

• 繞過登錄驗證。
• 竊取/篡改數據。
• 刪除數據庫。

---

防御手段

1. 參數化查詢 / 預編譯（Prepared Statement） ?
2. 輸入校驗（過濾 ', --, ; 等特殊符號）。
3. 最小權限（避免刪庫）。
4. 使用 ORM 框架。

---

示例

? 漏洞

const sql = `SELECT * FROM users WHERE username='${username}' AND password='${password}'`;
db.query(sql);

輸入：

' OR '1'='1

? 安全

const sql = 'SELECT * FROM users WHERE username=? AND password=?';
db.query(sql, [username, password]);

---

4. 文件上傳漏洞

定義

文件上傳漏洞是指：攻擊者上傳惡意文件（如 WebShell），服務器未嚴格校驗，導致代碼執行或 DoS 攻擊。

---

危害

• 上傳腳本木馬，控制服務器。
• 上傳惡意文檔，攻擊用戶。
• 上傳大文件，導致拒絕服務。

---

防御手段

1. 白名單文件類型（校驗擴展名 + MIME + 文件頭）。
2. 重命名文件（避免保留原始擴展名）。
3. 存儲到非 Web 目錄。
4. 限制大小/數量。
5. 前端校驗（次要）+ 后端強制校驗（核心）。

---

示例

? 漏洞

if (substr($_FILES['file']['name'], -4) === ".jpg") {move_uploaded_file($_FILES['file']['tmp_name'], "/uploads/" . $_FILES['file']['name']);
}

攻擊者上傳 evil.php.jpg。

? 安全（Node.js）

const upload = multer({storage,fileFilter: (req, file, cb) => {const allowed = ['image/jpeg', 'image/png'];if (!allowed.includes(file.mimetype)) return cb(new Error('Invalid type'));cb(null, true);},limits: { fileSize: 1024 * 1024 * 2 }
});

---

5. 其他前端常見安全問題

5.1 點擊劫持（Clickjacking）

• 定義：攻擊者在透明 iframe 中嵌套目標站點，引導用戶點擊。
• 防御：X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 'none';。

5.2 敏感信息泄露

• 問題：前端暴露 API Key、JWT、調試接口。

• 防御：

  • 不在前端存儲敏感信息。
  • 使用環境變量 + 后端代理。

5.3 依賴安全漏洞

• 問題：前端依賴（npm 包）可能被注入惡意代碼。

• 防御：

  • 使用 npm audit/yarn audit。
  • 鎖定依賴版本。
  • 關注供應鏈安全（supply chain attack）。

---

6. 面試常見問答

Q1: 什么是 XSS？怎么防御？

• 跨站腳本攻擊，注入惡意 JS。
• 危害：竊取 Cookie、執行惡意操作。
• 防御：輸入過濾 + 輸出轉義 + CSP + HttpOnly Cookie。

Q2: 什么是 CSRF？怎么防御？

• 跨站請求偽造，利用用戶 Cookie 發起偽造請求。
• 防御：CSRF Token、SameSite Cookie、驗證碼、Referer 校驗。

Q3: 什么是 SQL 注入？怎么防御？

• 在輸入中拼接 SQL 語句篡改數據庫。
• 防御：預編譯、參數化查詢、最小權限、ORM 框架。

Q4: 文件上傳漏洞如何防御？

• 白名單校驗文件類型（MIME + 文件頭）。
• 上傳后重命名，存儲到非 Web 目錄。
• 限制大小和數量，多層校驗。

Q5: 點擊劫持如何防御？

• 使用 X-Frame-Options 或 CSP frame-ancestors。