前端页面JS注入问题，前端XSS安全问题解决办法_前端资源注入如何修复

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

在页面中增加 JS 校验，对特殊符号进行替换，防止用户输入恶意代码导致 JS 注入问题。

在 web 开发中，对用户输入的内容做校验是必不可少的环节，不管是通过正则表达式对用户的输入进行校验，还是通过对特殊符号进行转义，均可达到目的。通过正则表达式校验，可能会导致用户体验差一点（因为用户不能自由输入~~），本文通过对 特殊符号进行转义 的方法来演示。

自定义添加角色，包括角色名称、角色描述

1.1 未对特殊符号进行替换，直接保存到数据库。

在输入框中输入伪恶意代码，点击保存，去列表页面查看效果如下

首先会弹框，说明恶意代码执行了。

数据显示错位或者不完整，用户体验差，会被老板骂。

数据库中存储的是用户输入的原始字符

1.2 在提交表单前或者发送 ajax 请求前，对用户输入的值做校验，并对特殊符号进行替换。

js 函数代码如下

function replaceStr(a) {
    a = a.replace(/(<br[^>]*>| |\s*)/g, '')
        .replace(/\&/g,"&amp;")
        .replace(/\"/g,"&quot;")
        .replace(/\'/g,"&#39;")
        .replace(/\</g,"&lt;")
        .replace(/\>/g,"&gt;");
    return a;
本示例中是通过 form 表单进行提交的，所以在 form 表单提交前，对表单属性的值进行了 replace。同样，通过常规的 ajax 请求，也可以在提交请求前，对参数的 value 进行 replace 再提交。 
再次执行 1.1 中的添加角色步骤，查看页面效果和数据库存储情况。 
 经过特殊符号替换后，页面显示正常，没有弹框、数据错位等问题
 
 查看此时数据库中存储的数据：
 数据库中存储的是经过转义过后的特殊字符，这样当数据在页面上显示的时候，就不会出现 js 注入的问题
  
 所以，web 开发中，对于用户可以自由输入的地方，一定要做校验和处理，因为你不知道你的用户是不是也懂一点 JavaScript。 
上述方法在实际开发中，并不推荐。因为用户可以篡改前端JS代码导致校验失效，这样无法避免 xss 漏洞，推荐在服务端做JS校验，有效预防 XSS 安全问题。 使用过滤器解决xss安全问题 
经验有限，如果纰漏或错误，欢迎指正！