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

news/2024/7/19 15:52:37 标签: JS注入, JS, xss

JS__JS__0">在页面中增加 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 注入的问题
数据库中存储的是经过转义过后的特殊字符,这样当数据在页面上显示的时候,就不会出现 js 注入的问题

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


注意

上述方法在实际开发中,并不推荐。因为用户可以篡改前端JS代码导致校验失效,这样无法避免 xss 漏洞,推荐在服务端做JS校验,有效预防 XSS 安全问题。 使用过滤器解决xss安全问题

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


http://www.niftyadmin.cn/n/695072.html

相关文章

Java手动序列化和反序列化的实现

Java代码 //序列化对象为String字符串&#xff0c;先对序列化后的结果进行BASE64编码&#xff0c;否则不能直接进行反序列化 public static String writeObject(Object o) throws Exception { ByteArrayOutputStream bos new ByteArrayOutputStream(); ObjectOutputStream…

HTTP协议之缓存

2019独角兽企业重金招聘Python工程师标准>>> 一、缓存的拓扑结构 私有缓存(private cache)是个人的缓存&#xff0c;包含了单个用户最常用的页面 公有缓存&#xff08;public cache&#xff09;又称为共享的缓存&#xff0c;包含了某个用户团体的常用页面 图是网…

华为鸿蒙系统确认适配高通,华为鸿蒙系统确认适配高通/联发科手机!曝OV魅族有意采用...

这段时间&#xff0c;华为再度成为手机圈的流量担当。虽然芯片没有导致华为手机在硬件方面无法继续前行&#xff0c;但华为非常聪明&#xff0c;把势头全面转化到软件系统上&#xff0c;其自研的鸿蒙操作系统已经推送了好几个测试版本&#xff0c;而官方也放话6月份将对华为/荣…

【转】PL/SQL Developer 设置快捷键

1、登录后默认自动选中My Objects 默认情况下&#xff0c;PLSQL Developer登录后&#xff0c;Brower里会选择All objects&#xff0c;如果你登录的用户是dba&#xff0c;要展开tables目录&#xff0c;正常情况都需要Wait几秒钟&#xff0c;而选择My Objects后响应速率则是…

vlan规划方案

一个vlan对应一个子网&#xff0c;同时一个vlan的三层接口对应一个子网的网关&#xff0c;所以通常按照一个企业的部门来规划vlan。注意:各VLAN中的客户机的网关分别对应各VLAN的接口IP。 例如&#xff1a;假设一个公司有三个业务部门&#xff0c;一个技术管理部门&#xff0c;…

守护进程的单实例实现_非宁静无以致远_百度空间

守护进程的单实例实现_非宁静无以致远_百度空间守护进程的单实例实现为了正常工作&#xff0c;守护进程应该实现为单实例的&#xff0c;也就是在任一时刻只运行该守护进程的一个副本&#xff0c;因为这个守护进程要排它的访问一个设备。这里需要用到文件锁的机制&#xff0c;如…

html5如何设置主题两边留白,公众号文章两边留白多少合适?公众号文章页边距怎么设置?...

说到留白&#xff0c;相信大家都会认为是设计的专业名词&#xff0c;其实&#xff0c;我们公众号运营也需要掌握留白的艺术&#xff0c;来将文章排版得更符合读者的阅读习惯&#xff0c;从而提高文章阅读量和公众号关注量。什么是留白留白是设计中常见的一种构图形式&#xff0…

PHP实例:用PHP简单实现多条件查询

在我们的网站设计过程中&#xff0c;经常会用到多条件查询&#xff0c;本文的源码是一个二手房屋查询的例子。在本例中&#xff0c;我们要实现能够通过地理位置&#xff0c;物业类型&#xff0c;房屋价格&#xff0c;房屋面积及信息发布日期等多个条件查询到客户所需的资料。查…