GET表单场景下如何阻止页面加载时script标签自动执行

问题根本原因 #

你遇到的是典型的反射型XSS跨站脚本攻击，原有方案失效的核心原因有两个：

• 执行时机太晚：$(document).ready 是DOM完全加载、解析完成后才触发，此时浏览器已经解析执行了输入框中嵌入的恶意脚本，后置修改输入框值根本来不及拦截
• 逻辑漏洞：你允许后端直接把未转义的用户输入填充到input的value属性中，本身就给了恶意脚本执行的入口

可落地的解决方案 #

1. 后端输出转义（首选，最可靠） #

这是根治XSS的核心方案，所有用户输入的内容输出到HTML页面时，必须对特殊字符做HTML实体转义，转义规则如下：

举个常用后端语言的实现示例：

• PHP：输出参数到页面时使用 htmlspecialchars($_GET['search'], ENT_QUOTES)
• Node.js（Express）：可以使用 escape-html 库处理输出内容

转义后就算用户输入的是<script>alert(document.cookie)</script>，输出到页面后会变成纯文本，不会被浏览器解析为脚本执行。

2. 前端提前处理参数（补充方案） #

如果暂时无法修改后端逻辑，可以调整前端逻辑，不要让后端直接把参数填充到input的value中，改为前端提前解析URL参数、过滤后再赋值给输入框，代码示例：

// 放在页面head中，不需要等待DOM加载完成即可执行
function getSafeQueryParam(name) {
  const params = new URLSearchParams(window.location.search);
  const rawValue = params.get(name) || '';
  // 过滤所有HTML标签，或者直接转义特殊字符
  return rawValue.replace(/<[^>]*>/g, '');
}
const safeSearchValue = getSafeQueryParam('search');
// 等input元素可用时直接赋值
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('search').value = safeSearchValue;
});

3. 增加CSP安全头（额外防护层） #

可以在服务端的HTTP响应头中添加内容安全策略配置，直接禁止浏览器执行内联恶意脚本，就算出现漏洞也能阻止攻击生效，示例头配置：
Content-Security-Policy: default-src 'self'; script-src 'self'

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