介紹：

JavaScript 注入攻擊是對 Web 應用程式的重大安全威脅。這些攻擊可能導致資料外洩、未經授權的操作和各種其他安全問題。我將指導您使用先進的技術來偵測和防止 JavaScript 注入攻擊。本部落格將包含實際範例程式碼，以幫助您有效地理解和實施這些技術。

什麼是 JavaScript 注入？

當攻擊者能夠將惡意程式碼注入 Web 應用程式時，就會發生 JavaScript 注入。這可以透過多種方式實現，例如輸入欄位、URL 參數，甚至 cookie。一旦注入，惡意程式碼就可以在 Web 應用程式的上下文中執行，可能導致資料竊取、未經授權的操作和其他有害後果。

JavaScript 注入攻擊的常見型別：

1.跨站腳本 (XSS)： 將惡意腳本注入其他使用者檢視的網頁中。
2.基於 DOM 的 XSS： 操縱 DOM 環境來執行惡意 JavaScript。
3. SQL注入：注入可以對資料庫執行任意查詢的SQL指令。

偵測 JavaScript 注入攻擊：

1. 輸入驗證：

• 驗證客戶端和伺服器端的所有使用者輸入。
• 使用正規表示式確保輸入符合預期格式。

function validateInput(input) {
    const regex = /^[a-zA-Z0-9_]*$/; // Example regex for alphanumeric and underscore
    return regex.test(input);
}

const userInput = document.getElementById('user-input').value;
if (!validateInput(userInput)) {
    alert('Invalid input');
}

2. 內容安全策略（CSP）：

實作CSP來控制JavaScript的載入和執行來源。

3.轉義用戶輸入：

轉義所有使用者輸入以防止執行惡意腳本。

function escapeHTML(input) {
    const div = document.createElement('div');
    div.appendChild(document.createTextNode(input));
    return div.innerHTML;
}

const safeInput = escapeHTML(userInput);
document.getElementById('output').innerHTML = safeInput;

防止 JavaScript 注入攻擊：

1.使用準備好的語句：

對於SQL查詢，使用準備好的語句以避免SQL注入。

const query = 'SELECT * FROM users WHERE username = ?';
db.execute(query, [username], (err, results) => {
    // Handle results
});

2. 清理使用者輸入：

使用 DOMPurify 等函式庫來淨化 HTML 並防止 XSS 攻擊。

const cleanInput = DOMPurify.sanitize(userInput);
document.getElementById('output').innerHTML = cleanInput;

僅 HTTP Cookie：

使用僅限 HTTP 的 cookie 來阻止透過 JavaScript 存取 cookie。

document.cookie = "sessionId=abc123; HttpOnly";

4.限制JavaScript能力：

使用子資源完整性 (SRI) 等功能來確保僅執行受信任的腳本。

例子：

考慮一個可能容易受到 JavaScript 注入的簡單登入表單。以下是保護它的方法：

HTML：

JavaScript：

document.getElementById('login-form').addEventListener('submit', function(event) {
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    if (!validateInput(username) || !validateInput(password)) {
        alert('Invalid input');
        event.preventDefault();
    }
});

function validateInput(input) {
    const regex = /^[a-zA-Z0-9_]*$/;
    return regex.test(input);
}

伺服器端（Node.js 範例）：

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const mysql = require('mysql');

const db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'test'
});

app.use(bodyParser.urlencoded({ extended: true }));

app.post('/login', (req, res) => {
    const username = req.body.username;
    const password = req.body.password;

    const query = 'SELECT * FROM users WHERE username = ? AND password = ?';
    db.execute(query, [username, password], (err, results) => {
        if (err) throw err;
        if (results.length > 0) {
            res.send('Login successful');
        } else {
            res.send('Invalid credentials');
        }
    });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

結論：

偵測並防止 JavaScript 注入攻擊對於維護 Web 應用程式的安全至關重要。透過實施本部落格中討論的技術，您可以顯著降低此類攻擊的風險。請記得驗證和清理所有使用者輸入、使用 CSP、僅限 HTTP 的 cookie，並使用 SRI 限制 JavaScript 功能。

請繼續關注更多有關高級 JavaScript 主題和網路安全的部落格。請隨時在下面的評論中分享您的想法和經驗。我們可以一起建立更安全的 Web 應用程式！