如何在JavaScript中防护AJAX获取的数据库数据免受XSS攻击？

Great question—XSS is one of the most common vulnerabilities when dealing with user-generated or untrusted content, especially since you're using html() to inject data directly into the DOM. Let's break down the fixes you need, from front to back:

Frontend Fix: Use text() Instead of html() #

Right now, your code uses $("#message-div").html(response[0].user_input_message);—this method parses the input as HTML, which means any malicious scripts (like <script>stealCookies()</script>) will be executed by the browser.

Switch to text() instead. This method treats the input as plain text, automatically escaping special characters (like <, >, ", ') so they're rendered as literal characters instead of parsed HTML:

$.ajax({
  url: "getDatabaseData.php",
  type: "post",
  dataType: "json",
  success: function(response){
    $("#message-div").text(response[0].user_input_message); // Use text() here!
  }
});

This is your first line of defense because it neutralizes any HTML/script content before it hits the DOM.

Backend Fix: Escape Content Before Sending It #

Even if you fix the frontend, you should always sanitize/escape untrusted data on the backend too—this adds a safety net in case the frontend code is modified, or if this data is reused elsewhere (like in an email or another page).

In your PHP code, use htmlspecialchars() to escape the user_input_message values before encoding to JSON. This ensures that any special characters are converted to their HTML entities before being sent to the client:

$messages = $CFG_DB->select("SELECT user_input_message FROM messages");

// Escape each message to prevent XSS
foreach ($messages as &$message) {
    // ENT_QUOTES escapes both single and double quotes; UTF-8 ensures proper encoding
    $message['user_input_message'] = htmlspecialchars($message['user_input_message'], ENT_QUOTES, 'UTF-8');
}

echo json_encode($messages);

By doing this, even if someone accidentally uses html() later, the escaped content won't execute as code.

Bonus: Add a Content Security Policy (CSP) #

For an extra layer of protection, implement a Content Security Policy (CSP) on your server. CSP tells the browser which sources of content (scripts, styles, images) are trusted, and blocks anything else.

Add this header in your PHP code (or configure it directly in your web server config):

header("Content-Security-Policy: default-src 'self'; script-src 'self'");

This example allows scripts only from your own domain ('self') and blocks inline scripts entirely—so even if a malicious script slips through, the browser won't run it.

Key Takeaway #

Always use defense in depth: escape data on the backend, use safe rendering methods on the frontend, and add CSP as a final guard. This combination makes it extremely hard for XSS attacks to succeed.

内容的提问来源于stack exchange，提问作者Danie