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

在页面中增加 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安全问题 
经验有限，如果纰漏或错误，欢迎指正！

推荐文章

跑龙套的毛衣 · 前端页面JS注入问题，前端XSS安全问题解决办法_前端资源注入如何修复-CSDN博客

9 小时前

追风的手套 · 【魈&五郎】危险派对，但是魈猫猫和可爱狗狗五郎♥【双倍可爱暴击♥】_哔哩哔哩_bilibili

9 月前

聪明伶俐的勺子 · 财务凭证数据如何快速准确导入用友T3生成凭证 - 知乎

1 年前

好帅的苦咖啡 · 猎兽-无上神王-漫画牛

1 年前

神勇威武的泡面 · 广汽埃安上半年累计销量10万，计划2023年进行IPO|乘用车|比亚迪|上汽|广汽集团_网易订阅

1 年前

长情的啤酒 · 《王牌保镖2》：尺度更大，笑点密集，动作带劲，却成了部大杂烩|杰克逊|瑞安·雷诺兹|电影_网易订阅

1 年前