如何用JavaScript阻止URL参数中alert()脚本执行以防范XSS？

针对你遇到的URL中error参数携带恶意脚本的问题，核心解决思路就是把HTML特殊字符转义成浏览器会识别为纯文本的实体，让<script>这类标签失去执行能力。下面是具体的实现步骤：

1. 先正确获取URL中的error参数 #

首先我们需要从URL里提取出error参数的值，用现代浏览器支持的URLSearchParams会很方便：

function getUrlParam(paramName) {
    const searchParams = new URLSearchParams(window.location.search);
    return searchParams.get(paramName);
}

// 获取error参数的原始值
const rawErrorMsg = getUrlParam('error');

2. 编写HTML转义函数 #

我们需要把HTML里的特殊字符（比如<、>、&等）转换成对应的HTML实体，这样浏览器就不会把它们解析成可执行的标签：

function escapeHtml(text) {
    // 如果参数为空，直接返回空字符串
    if (!text) return '';
    // 按顺序替换特殊字符，&要最先替换，避免其他实体被二次转义
    return text
        .replace(/&/g, '&')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
}

3. 安全插入转义后的内容到页面 #

转义完成后，把内容插入到页面中时，推荐使用textContent属性（它默认会把内容当作纯文本处理），如果必须用innerHTML，一定要确保内容已经被转义：

const safeErrorMsg = escapeHtml(rawErrorMsg);

// 方式1：推荐使用textContent，无需额外转义（不过转义了也没问题）
document.getElementById('error-display').textContent = safeErrorMsg;

// 方式2：如果用innerHTML，必须传入转义后的内容
// document.getElementById('error-display').innerHTML = safeErrorMsg;

关键注意事项 #

• 双重防护更安全：虽然前端做了转义，后端PHP也应该在输出这个参数时做转义处理，比如用PHP的htmlspecialchars()函数，这样即使前端出问题，后端也能拦住恶意代码。
• 避免危险操作：不要直接使用decodeURIComponent()处理未转义的恶意内容，也不要用eval()这类危险函数解析参数值，否则会加重XSS风险。
• 优先用textContent：textContent是最安全的插入文本方式，它不会解析任何HTML标签，比手动转义后用innerHTML更省心。

这样处理后，你的页面遇到?error=<script>alert(11170579)</script>这类URL时，只会显示<script>alert(11170579)</script>的纯文本，而不会执行alert弹窗。

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