如何防止输入字段、文本域中被注入JavaScript脚本代码

首先你当前写的过滤函数存在严重逻辑问题，既无法有效阻止脚本注入，还会严重影响正常输入：

• 正则/[^a-zA-Z0-9_]/会拦截所有非字母、数字、下划线的字符，中文、空格、常用标点（比如邮箱的@、地址的.、手机号的连接符）都会被判定为非法内容，用户无法完成正常输入
• 仅靠监听输入事件拦截的逻辑天生存在绕过风险：用户可以通过右键粘贴、拖放填充、浏览器自动填充、控制台删除事件监听、直接构造表单请求等方式绕开前端拦截
• 就算调整正则匹配script、onclick这类高危关键字，也很容易被绕过：比如大小写混写<ScRiPt>、插入不可见字符、编码转换、拼接恶意属性等，靠正则穷举所有恶意特征根本不可能覆盖全。

正确的防护思路 #

注意：防脚本注入（XSS）的核心从来不是在输入阶段拦字符，而是在内容渲染、输出阶段做安全处理

• 优先使用纯文本渲染：如果你不需要支持用户输入HTML内容，所有用户输入的内容渲染到页面时，不要用innerHTML、outerHTML、document.write这类会解析HTML的API，改用textContent插入内容，浏览器会自动将所有内容识别为纯文本，其中的脚本代码完全不会被执行，示例代码：

// 危险写法：会解析并执行输入中的脚本
document.querySelector('.show-content').innerHTML = userInputValue
// 安全写法：纯文本渲染，无脚本执行风险
document.querySelector('.show-content').textContent = userInputValue

• 富文本场景使用成熟消毒库：如果业务需要支持用户输入部分HTML标签（比如富文本评论），不要自己写正则过滤恶意内容，使用成熟的HTML消毒库处理用户输入，自动剥离脚本标签、恶意事件属性、危险跳转链接等风险内容，覆盖所有已知绕过场景。
• 后端必须做二次防护：前端的所有校验都可以被绕过，后端接收用户提交的内容后，在返回给页面前必须做HTML实体转义，将<、>、"、'、&这类特殊字符转义为对应的HTML实体，确保恶意脚本输出到页面时只会被识别为普通文本，不会被浏览器解析执行。
• 输入阶段仅做提示不做强制拦截：如果确实需要在用户输入时做风险提醒，可以在input事件中检测高危特征弹出提示，但不要直接阻止输入——毕竟用户可能只是正常输入和脚本相关的讨论内容，比如“script标签的默认type属性是什么”，这类正常内容不应该被拦截。

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