前端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

CSS文字超出隐藏添加省略号及失效处理

在前端页面中文字超出隐藏并添加省略号是比较常见的样式处理,实际CSS样式中单行省略和多行省略的样式有所差异,在某些特殊场景下多行超出的样式会不生效,本文给出相关解决方案

CSS3通过Gradients实现渐变背景色

使用背景色渐变可以使得页面质感得到大幅度提升,CSS样式中通过gradients属性指定两个或多个颜色之间平滑过渡,由于颜色的渐变是由浏览器生成,因此不会出现不同分辨率下失真的情况。

侧边栏下滑即将越过时动态固顶与上滑恢复

对于很多二栏布局的网站而言,正文部分过长时,侧边栏区域下拉过程中出现大片空白,因此我们可以实现当屏幕下滑达到指定元素位置(如即将越过)后对元素固顶来解决侧边栏区域的空旷感

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

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

Vue3中无需引入Vuex的替代方案

Vue3 中所提供组合 API、ref、reactive、provide、inject几大特性,可以支持完成全局状态管理能力,Vuex 是为 Vue 单独提供的状态管理插件,相对比较笨重,如果项目简单可以尝试替代

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

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

选择个人头像

昵称

邮箱

QQ

网址

评论提示

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