前端JS对字段编码预防XSS攻击

跨站脚本攻击是比较严重的一种攻击行为,恶意脚本注入到相关页面字段中轻易获取敏感信息和向后端发起请求,前端应用应当对请求数据进行编码

所属分类 WEB

相关标签 攻击XSS编码

XSS

XSS(Cross Site Scripting)攻击全称跨站脚本攻击。

它与 CSS(Cascading Style Sheets)没什么关系,避免缩写混淆。

XSS 是一种在 web 应用中的常见的安全漏洞,恶意将代码植入到提供给其它用户使用的页面。

XSS 漏洞和著名的 SQL 注入漏洞一样,都是利用了 Web 页面的编写不完善,向后端发起了脚本请求。

XSS 攻击在前端部分只能预防,实际需要后端同步配合处理。

不能以单一特征来概括所有XSS攻击。

常见的防御 XSS 攻击是通过前后台校验的方式禁止不合法的攻击脚本传入产生攻击行为。

前端界面一般通过字段校验来限制用户输入特殊符号。

但实际上我们有些字段是支持特殊符号的传入,那么单纯通过校验规则无法避免这类攻击。

如何判定你的界面是会受到XSS攻击呢?

当你定义某个字段值为一段JS脚本的时候,当这个字段在界面上展示的时候,如果能够被触发则说明你的界面能够被 XSS 攻击。

界面有个用户名选择按钮,点击后在弹出层选择一条用户记录。

该记录的用户名为:

<script>alert('XSS');</script>

选择确认后,用户名被展示在用户名字段后面(不可编辑)。

但此时你点击这用户名的时候,发现会触发弹窗 "XSS" ,由于这个字段的 script 脚本生效了。

如果用户通过注入其他的 script 脚本,比如 ajax 请求向服务端发数据。

XSS前端防御

前端防御XSS攻击只需要关注一个点。

  1. 禁止脚本直接输出到界面。

所以我们需要定义公共的字段编解码方法。

// 编码,用于展示界面或编码向后端传递
function htmlEncode(HtmlString)
{
    var str = HtmlString;
    if(HtmlString != null && typeof (HtmlString) === "string")
    {
        HtmlString.replace(/&/g,"&amp;");
        str = str.replace(/</g,"&lt;");
        str = str.replace(/>/g,"&gt;");
        str = str.replace(/"/g,"&quot;");
        str = str.replace(/'/g,"&#39;");
        str = str.replace(/(/g,"&#40;");
        str = str.replace(/)/g,"&#41;");
        str = str.replace(/%/g,"&#37;");
        str = str.replace(/+/g,"&#43;");
        str = str.replace(/,/g,"&#44;");
    }
    return str;
}
// 解码,用于获取字段真实值放入input框等
function htmlDecode(HtmlString)
{
    var str = HtmlString;
    if(HtmlString != null && typeof (HtmlString) === "string")
    {
        str = HtmlString.replace(/&amp;/g,"&");
        str = str.replace(/&lt;/g,"<");
        str = str.replace(/&gt;/g,">");
        str = str.replace(/&quot/g,""");
        str = str.replace(/&#39;/g,"'");
        str = str.replace(/&#40;/g,"(");
        str = str.replace(/&#41;/g,")");
        str = str.replace(/&#37;/g,"%");
        str = str.replace(/&#43;/g,"+");
        str = str.replace(/&#44;/g,",");
    }
    return str;
}
//实际使用直接调用即可
//如上文攻击实例过程中,我们可以对用户名进行编码展示htmlEncode(userName)

小结

实际上,防御 XSS 最好的方式是后端处理。

  1. 返回数据的时候直接进行HTML编码。
  2. 收到数据时也进行HTML编码,避免后期返回时直接被抛出来。

米虫

做一个有理想的米虫,伪全栈程序猿,乐观主义者,坚信一切都是最好的安排!

本站由个人原创、收集或整理,如涉及侵权请联系删除

本站内容支持转发,希望贵方携带转载信息和原文链接

本站具有时效性,不提供有效、可用和准确等相关保证

本站不提供免费技术支持,暂不推荐您使用案例商业化

发表观点

提示

昵称

邮箱

QQ

网址

当前还没有观点发布,欢迎您留下足迹!

同类其他

WEB

nvm管理node.js和npm多版本切换

在业务中我们会出现不同的项目依赖与不同版本的 node.js,总不能每次跑项目的时候都去重新安装对应版本的 node.js 和依赖,使用 nvm 可以让多个版本的 node.js 共存,并提供管理和切换

Jquery中bind()、live()、delegate()和on()的区别

自Jquery1.7起,on()方法是 bind()、live()、delegate() 方法的新的替代品,我们推荐使用on()来处理业务中的事件绑定,通过理解这些方法的差异能够更加清晰明白使用on()方法的优势所在

Jquery.bind()实现前端字段公共校验器

严谨的页面开发需要着重关注前台校验相关的内容,确保请求参数的合法以保证服务器安全,界面参数众多需要建立一个公共方法,公共校验器的核心方法是Jquery.bind()

Jquery+CSS轻松实现导航动态显示隐藏

绝大多数网站都会有个顶部导航,对于手机端而言为了便于访问导航常常会做固顶操作,通过CSS样式配合Jquery的scroll()方法或原生JS监听滑动事件方法,可以轻松实现下滑隐藏,上滑显示的效果

SVGInject插件动态加载SVG并自定义样式

HTML 中加载 SVG 有很多种方式,但如果需要在 HTML 中通过 CSS 样式自由控制 SVG 样式就必须将 svg 标签插入网页找那个成为 DOM 的一部分,本文借助 SVGInject 插件可以快速完成这一操作

通过Vuex实现全局状态管理

Vuex 是一个专为 Vue 应用程序开发的状态管理模式,通过集中式存储应用所有组件的状态,依照规则确保状态可以进行标准方式变化,比较适合应用在公共基础数据存放,如:用户信息

选择个人头像

昵称

邮箱

QQ

网址

评论提示

  • 头像:系统为您提供了12个头像自由选择,初次打开随机为你选择一个
  • 邮箱:可选提交邮箱,该信息不会外泄,或将上线管理员回复邮件通知
  • 网址:可选提交网址,评论区该地址将以外链的形式展示在您的昵称上
  • 记忆:浏览器将记忆您已选择或填写过得信息,下次评论无需重复输入
  • 审核:提供一个和谐友善的评论环境,本站所有评论需要经过人工审核