前端页面JS注入问题,前端JS注入解决办法


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

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

示例

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

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

在输入框中输入伪恶意代码,点击保存,去列表页面查看效果如下
前端页面JS注入问题,前端JS注入解决办法
首先会弹框,说明恶意代码执行了。
前端页面JS注入问题,前端JS注入解决办法
数据显示错位或者不完整,用户体验差,会被老板骂。
前端页面JS注入问题,前端JS注入解决办法
数据库中存储的是用户输入的原始字符
前端页面JS注入问题,前端JS注入解决办法

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注入问题,前端JS注入解决办法
查看此时数据库中存储的数据:
数据库中存储的是经过转义过后的特殊字符,这样当数据在页面上显示的时候,就不会出现 js 注入的问题
前端页面JS注入问题,前端JS注入解决办法

所以,web 开发中,对于用户可以自由输入的地方,一定要做校验和处理,因为你不知道你的用户是不是也懂一点 JavaScript。

经验有限,如果纰漏或错误,欢迎指正!

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

前端页面JS注入问题,前端JS注入解决办法

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 前端页面JS注入问题,前端JS注入解决办法
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏