原生js xss攻击防御

基础概念： 跨站脚本攻击（XSS）是一种常见的Web应用安全漏洞，攻击者通过在网页中注入恶意脚本，当用户浏览网页时，嵌入其中的脚本会被执行，从而达到攻击目的。

相关优势： 防御XSS攻击可以保护用户数据的安全，防止敏感信息泄露，维护网站的信誉和用户信任。

类型：

1. 反射型XSS：恶意脚本通过URL传递并在用户点击链接时执行。
2. 存储型XSS：恶意脚本被存储在服务器上，所有访问该页面的用户都会执行。
3. DOM型XSS：通过修改网页的DOM环境来执行恶意脚本。

应用场景： 任何涉及用户输入并动态生成内容的Web应用都可能受到XSS攻击。

常见问题及原因：

• 用户输入未经过充分验证和过滤。
• 输出到页面的数据未进行适当的编码。

解决方案：

1. 输入验证：对用户输入进行严格的验证，确保输入符合预期格式。
2. 输出编码：在将数据插入HTML文档之前，对其进行适当的编码。
3. 内容安全策略（CSP）：通过设置CSP头，限制浏览器可以加载的资源类型和来源。

示例代码： 以下是一个简单的JavaScript函数，用于对用户输入进行HTML转义，以防止XSS攻击：

function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
}

// 使用示例
let userInput = "<script>alert('XSS');</script>";
let safeOutput = escapeHtml(userInput);
document.getElementById("output").innerHTML = safeOutput; // 安全地插入到DOM中

总结： 防御XSS攻击的关键在于对用户输入进行严格的验证和过滤，并在输出到页面时进行适当的编码。此外，采用内容安全策略可以进一步增强网站的安全性。