大家好，我是 V 哥，HTTP 請求實現跨域，會出現安全問題，下面來聊一聊這個問題。
HTTP 請求實現跨域
一、跨域的概念
跨域是指瀏覽器從一個域名的網頁去請求另一個域名的資源時，由於同源策略的限制而出現的安全機制。同源策略要求協議、域名、端口完全相同，只要有一個不同，就會產生跨域問題。
二、實現 HTTP 請求跨域的常見方法
-
CORS（跨域資源共享）
- 服務器端設置：在服務器端設置響應頭，允許指定的源進行跨域訪問。
Access-Control-Allow-Origin: <origin> Access-Control-Allow-Methods: <method>[, <method>]* Access-Control-Allow-Headers: <header>[, <header>]* - 例如，如果希望允許來自
http://example.com的請求，可以設置Access-Control-Allow-Origin: http://example.com。對於允許多種請求方法，可以使用Access-Control-Allow-Methods: GET, POST, PUT。對於允許的自定義請求頭，可以設置Access-Control-Allow-Headers: Authorization, Content-Type。
- 對於預檢請求（OPTIONS 請求），服務器需要正確響應幷包含相應的允許信息，如上述設置，以便瀏覽器判斷是否允許後續的實際請求（如 POST、PUT 等）。
- JSONP（JSON with Padding）
- 原理：利用
<script>標籤不受同源策略限制的特性，通過動態創建<script>標籤並插入到 HTML 中，請求一個 JSON 數據。
<script>
function handleData(data) {
// 處理獲取到的數據
console.log(data);
}
</script>
<script src="http://example.com/data?callback=handleData"></script>- 服務器端會將數據包裹在回調函數中返回，如
handleData({ "key": "value" });。 - 缺點：只能處理 GET 請求，並且由於是使用
<script>標籤，存在一定的安全風險，例如可能受到 XSS 攻擊。
- 代理服務器
- 思路：在同源的服務器上設置一個代理接口，讓前端請求先到達同源服務器，然後由同源服務器轉發請求到目標服務器，再將結果返回給前端。
- 實現方式：
可以使用 Node.js 的http-proxy-middleware等中間件。
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();
app.use('/api', createProxyMiddleware({ target: 'http://example.com', changeOrigin: true }));
app.listen(3000);
解釋：上述 Node.js 代碼使用 Express 框架，當請求 /api 路徑時，使用 createProxyMiddleware 中間件將請求轉發到 http://example.com，changeOrigin 參數會修改請求頭中的 Origin 字段，模擬同源請求。
- WebSocket
- 原理：WebSocket 是一種全雙工通信協議，其連接不受同源策略限制。
const socket = new WebSocket('ws://weige.com/socket');
socket.onopen = function() {
console.log('Connection opened');
};
socket.onmessage = function(event) {
console.log('Message from server ', event.data);
};
- 解釋：通過創建 WebSocket 連接到
ws://weige.com/socket，可以進行雙向通信。onopen事件在連接建立時觸發，onmessage事件在收到服務器消息時觸發。
三、注意事項
- CORS 是最常用和推薦的方式，但需要服務器端的支持。
- JSONP 雖然簡單，但功能有限且有安全隱患，僅適用於簡單的 GET 請求。
- 代理服務器需要額外的服務器資源，並且可能會增加網絡延遲。
- WebSocket 適合長連接和實時通信場景，但需要服務器和客户端都支持 WebSocket 協議。
跨域請求中可能會遇到哪些安全問題
一、跨域請求中的常見安全問題
-
CSRF（跨站請求偽造）
- 原理：攻擊者誘導用户在已登錄的狀態下訪問惡意網站，該惡意網站會自動發起對目標網站的跨域請求，利用用户的登錄憑證（如 Cookie）來執行非用户本意的操作。
- 示例：假設用户已經登錄了銀行網站，惡意網站可能包含一個隱藏的表單，自動提交到銀行的轉賬頁面，從而導致用户在不知情的情況下轉賬。
-
XSS（跨站腳本攻擊）
- 原理：當使用 JSONP 等跨域技術時，如果沒有對返回的數據進行嚴格的過濾，攻擊者可能會插入惡意腳本。
- 示例：在 JSONP 中，如果服務器返回的數據包含
<script>alert('XSS');</script>，而前端直接將其作為腳本執行，會導致 XSS 攻擊。
-
信息泄露
- 情況：如果跨域請求中包含敏感信息，而沒有適當的加密和安全機制，可能會導致信息在傳輸過程中被攔截和泄露。
- 例如：使用 HTTP 而不是 HTTPS 進行跨域請求，數據在網絡上以明文傳輸，容易被第三方竊取。
二、防範措施
-
針對 CSRF 的防範
- 使用 CSRF 令牌：服務器在頁面中生成並存儲一個 CSRF 令牌，在表單提交或 AJAX 請求時，要求攜帶該令牌，服務器驗證令牌的有效性。
<form action="/transfer" method="post">
<input type="hidden" name="csrf_token" value="random_token_here">
<input type="text" name="amount" value="100">
<input type="submit" value="Transfer">
</form>
- 解釋：在表單中添加一個隱藏的
csrf_token輸入，該令牌是服務器端生成的隨機字符串，每次請求時服務器會檢查令牌是否匹配。
- 針對 XSS 的防範
- 對返回的數據進行編碼：在使用 JSONP 或其他跨域請求獲取數據後，對數據進行 HTML 編碼，避免直接執行腳本。
function safeHTML(str) {
return str.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
- 解釋：上述 JavaScript 代碼對字符串中的特殊字符進行了轉義，將
&轉為&，<轉為<等，這樣即使包含惡意腳本，也不會被執行。
- 信息安全
- 使用 HTTPS：確保跨域請求使用 HTTPS 協議，對數據進行加密傳輸，防止信息泄露。
- 限制跨域訪問：使用 CORS 時，嚴格控制
Access-Control-Allow-Origin的值，只允許信任的源進行跨域訪問，避免不必要的源訪問敏感信息。
總結
- 跨域請求會帶來多種安全問題，需要從不同角度進行防範。
- CSRF 主要是利用用户的登錄狀態進行惡意操作，通過 CSRF 令牌可以有效防範。
- XSS 多發生在未對數據進行處理的情況下，編碼數據是關鍵的防護手段。
- 對於信息安全，要確保使用安全的傳輸協議並嚴格控制跨域訪問權限。
關注威哥愛編程，全棧開發你最猛。兄弟，都看到這了，點個小關小注唄，你的支持是V 哥最大的寫作動力。
