js xss 会弹出alert

基础概念： 跨站脚本攻击（XSS）是一种常见的Web安全漏洞，它允许攻击者在用户的浏览器上执行恶意脚本。当应用程序在网页中包含未经适当验证或转义的用户输入时，就会发生XSS攻击。这种攻击可能导致攻击者窃取用户数据、劫持用户会话或进行其他恶意活动。

相关优势： 对于攻击者而言，XSS攻击的优势在于它可以绕过同源策略，使得攻击者可以在受害者的浏览器上执行任意JavaScript代码。

类型： XSS攻击主要分为三种类型：

1. 反射型XSS：攻击者将恶意脚本注入到URL参数中，用户点击链接后，服务器返回包含恶意脚本的网页，浏览器随即执行该脚本。
2. 存储型XSS：攻击者将恶意脚本存储在服务器的数据库中，当其他用户访问这些数据时，恶意脚本被执行。
3. DOM型XSS：攻击者通过修改网页的DOM环境来注入恶意脚本，这种方式不需要服务器的直接参与。

应用场景： XSS攻击通常发生在用户输入没有得到适当处理的应用程序中，例如社交网络、论坛、博客等允许用户提交内容的网站。

问题原因： 当JavaScript代码中包含未经过滤的用户输入，并且这些输入被直接插入到HTML页面中时，就可能触发XSS攻击。例如，如果一个网页上的JavaScript代码如下：

var userInput = document.getElementById('user-input').value;
document.write('<img src="x" onerror="alert(\'XSS\')">');

如果用户输入' onclick="alert(\'XSS\')"'，则最终执行的JavaScript代码将变为：

document.write('<img src="x" onerror="alert(\'XSS\')" onclick="alert(\'XSS\')">');

这将导致弹出一个alert对话框，显示“XSS”。

解决方法： 为了避免XSS攻击，开发者应该采取以下措施：

1. 对用户输入进行严格的验证和转义。
2. 使用安全的API，如textContent代替innerHTML来设置文本内容。
3. 在服务器端对输出进行编码，确保所有动态生成的内容都是安全的。
4. 使用内容安全策略（CSP）来限制浏览器可以执行的脚本来源。

例如，使用DOMPurify库来清理用户输入：

import DOMPurify from 'dompurify';

var userInput = document.getElementById('user-input').value;
var cleanInput = DOMPurify.sanitize(userInput);
document.getElementById('output').innerHTML = cleanInput;

这样即使用户尝试注入恶意脚本，DOMPurify也会将其清理掉，从而防止XSS攻击的发生。