Web 前端攻防(2014版)-baidu ux前端研发部

http://fex.baidu.com/articles/page2/

Web 前端攻防(2014版)

zjcqoo | 20 Jun 2014

禁止一切外链资源

外链会产生站外请求,因此可以被利用实施 CSRF 攻击。

目前国内有大量路由器存在 CSRF 漏洞,其中相当部分用户使用默认的管理账号。通过外链图片,即可发起对路由器 DNS 配置的修改,这将成为国内互联网最大的安全隐患。

案例演示

百度旅游在富文本过滤时,未考虑标签的 style 属性,导致允许用户自定义的 CSS。因此可以插入站外资源:

所有浏览该页面的用户,都能发起任意 URL 的请求:

由于站外服务器完全不受控制,攻击者可以控制返回内容:

  • 如果检测到是管理员,或者外链检查服务器,可以返回正常图片;
  • 如果是普通用户,可以返回 302 重定向到其他 URL,发起 CSRF 攻击。例如修改路由器 DNS:
http://admin:[email protected]/userRpm/PPPoECfgAdvRpm.htm?wan=0&lcpMru=1480&ServiceName=&AcName=&EchoReq=0&manual=2&dnsserver=黑客服务器&dnsserver2=4.4.4.4&downBandwidth=0&upBandwidth=0&Save=%B1%A3+%B4%E6&Advanced=Advanced

演示中,随机测试了几个帖子,在两天时间里收到图片请求 500 多次,已有近 10 个不同的 IP 开始向我们发起 DNS 查询。

通过中间人代理,用户的所有隐私都能被捕捉到。还有更严重的后果,查考流量劫持危害探讨

要是在热帖里『火前留名』,那么数量远不止这些。

如果使用发帖脚本批量回复,将有数以万计的用户网络被劫持。

防范措施

杜绝用户的一切外链资源。需要站外图片,可以抓回后保存在站内服务器里。

对于富文本内容,使用白名单策略,只允许特定的 CSS 属性。

尽可能开启 Content Security Policy 配置,让浏览器底层来实现站外资源的拦截。

富文本前端扫描

富文本是 XSS 的重灾区。

富文本的实质是一段 HTML 字符。由于历史原因,HTML 兼容众多不规范的用法,导致过滤起来较复杂。几乎所有使用富文本的产品,都曾出现过 XSS 注入。

案例演示

旅游发帖支持富文本,我们继续刚才的演示。

由于之前已修复过几次,目前只能注入 embed 标签和 src 属性。

但即使这样,仍然可以嵌入一个框架页面:

因为是非同源执行的 XSS,所以无法获取主页面的信息。但是可以修改 top.location,将页面跳转到第三方站点。

将原页面嵌入到全屏的 iframe 里,伪造出相同的界面。然后通过浮层登录框,进行钓鱼。

总之,富文本中出现可执行的元素,页面安全性就大打折扣了。

防范措施

这里不考虑后端的过滤方法,讲解使用前端预防方案:

无论攻击者使用各种取巧的手段,绕过后端过滤,但这些 HTML 字符最终都要在前端构造成元素,并渲染出来。

因此可以在 DOM 构造之后、渲染之前,对离屏的元素进行风险扫描。将可执行的元素(script,iframe,frame,object,embed,applet)从缓存中移除。

或者给存在风险的元素,加上沙箱隔离属性。

  • 例如 iframe 加上 sandbox 属性,即可只显示框架内容而不运行脚本
  • 例如 Flash 加上 allowScriptAccess 及 allowNetworking,也能起到一定的隔离作用。

DOM 仅仅被构造是不会执行的,只有添加到主节点被渲染时才会执行。所以这个过程中间,可以实施安全扫描。

实现细节可以参考:http://www.etherdream.com/FunnyScript/richtextsaferender.html

如果富文本是直接输入到静态页面里的,可以考虑使用 MutationEvent 进行防御。详细参考:http://fex.baidu.com/blog/2014/06/xss-frontend-firewall-2/

但推荐使用动态方式进行渲染,可扩展性更强,并且性能消耗最小。

跳转 opener 钓鱼

浏览器提供了一个 opener 属性,供弹出的窗口访问来源页。但该规范设计的并不合理,导致通过超链接打开的页面,也能使用 opener。

因此,用户点了网站里的超链接,导致原页面被打开的第三方页面控制。

虽然两者受到同源策略的限制,第三方无法访问原页面内容,但可以跳转原页面。

由于用户的焦点在新打开的页面上,所以原页面被悄悄跳转,用户难以觉察到。当用户切回原页面时,其实已经在另一个钓鱼网站上了。

案例演示

百度贴吧目前使用的超链接,就是在新窗口中弹出,因此同样存在该缺陷。

攻击者发一个吸引用户的帖子。当用户进来时,引诱他们点击超链接。

通常故意放少部分的图片,或者是不会动的动画,先让用户预览一下。要是用户想看完整的,就得点下面的超链接:

由于扩展名是 gif 等图片格式,大多用户就毫无顾虑的点了。

事实上,真正的类型是由服务器返回的 MIME 决定的。所以这个站外资源完全有可能是一个网页:

当用户停留在新页面里看动画时,隐匿其中的脚本已悄悄跳转原页面了。

用户切回原页面时,其实已在一个钓鱼网站上:

在此之上,加些浮层登录框等特效,很有可能钓到用户的一些账号信息。

防范措施

该缺陷是因为 opener 这个属性引起的,所以得屏蔽掉新页面的这个属性。

但通过超链接打开的网页,无法被脚本访问到。只有通过 window.open 弹出的窗口,才能获得其对象。

所以,对页面中的用户发布的超链接,监听其点击事件,阻止默认的弹窗行为,而是用 window.open 代替,并将返回窗体的 opener 设置为 null,即可避免第三方页面篡改了。

详细实现参考:http://www.etherdream.com/FunnyScript/opener_protect.html

当然,实现中无需上述 Demo 那样复杂。根据实际产品线,只要监听用户区域的超链接就可以。

用户内容权限

支持自定义装扮的场合,往往是钓鱼的高发区。

一些别有用心者,利用装扮来模仿系统界面,引诱用户上钩。

案例演示 - 空间越界

百度空间允许用户撰写自定格式的内容。

其本质是一个富文本编辑器,这里不演示 XSS 漏洞,而是利用样式装扮,伪装一个钓鱼界面。

百度空间富文本过滤元素、部分属性及 CSS 样式,但未对 class 属性启用白名单,因此可以将页面上所有的 CSS 类样式,应用到自己的内容上来。

防范措施

规定用户内容尺寸限制,可以在提交时由用户自己确定。

不应该为用户的内容分配无限的尺寸空间,以免恶意用户设置超大字体,破坏整个页面的浏览。

最好将用户自定义的内容嵌套在 iframe 里,以免影响到页面其他部位。

如果必须在同页面,应将用户内容所在的容器,设置超过部分不可见。以免因不可预测的 BUG,导致用户能将内容越界到产品界面上。

案例演示 - 功能越界

自定义装扮通常支持站外超链接。

相比贴吧这类简单纯文字,富文本可以将超链接设置在其他元素上,例如图片。

因此这类链接非常具有迷惑性,用户不经意间就点击到。很容易触发之前提到的修改 opener 钓鱼。

如果在图片内容上进行伪装,更容易让用户触发一些危险操作。

要是和之前的区域越界配合使用,迷惑性则更强:

防范措施

和之前一样,对于用户提供的超链接,在点击时进行扫描。如果是站外地址,则通过后台跳转进入,以便后端对 URL 进行安全性扫描。

如果服务器检测到是一个恶意网站,或者目标资源是可执行文件,应给予用户强烈的警告,告知其风险。

点击劫持检测

点击劫持算是比较老的攻击方式了,基本原理大家也都听说过。就是在用户不知情的前提下,点击隐藏框架页面里的按钮,触发一些重要操作。

但目前在点击劫持上做防御的并不多,包括百度绝大多数产品线目前都未考虑。

案例演示

能直接通过点击完成的操作,比较有意义的就是关注某用户。例如百度贴吧加关注的按钮:

攻击者事先算出目标按钮的尺寸和坐标,将页面嵌套在自己框架里,并设置框架的偏移,最终只显示按钮:

接着通过 CSS 样式,将目标按钮放大,占据整个页面空间,并设置全透明。

这时虽看不到按钮,但点击页面任意位置,都能触发框架页中加关注按钮的点击:

防范措施

事实上,点击劫持是很好防御的。

因为自身页面被嵌套在第三方页面里,只需判断 self == top 即可获知是否被嵌套。

对一些重要的操作,例如加关注、删帖等,应先验证是否被嵌套。如果处于第三方页面的框架里,应弹出确认框提醒用户。

确认框的坐标位置最好有一定的随机偏移,从而使攻击者构造的点击区域失效。

作者:zjcqoo (http://cnblogs.com/index-html) - Hello

时间: 2024-10-06 08:20:04

Web 前端攻防(2014版)-baidu ux前端研发部的相关文章

C#开发微信门户及应用(47) - 整合Web API、微信后台管理及前端微信小程序的应用方案

在微信开发中,我一直强调需要建立一个比较统一的Web API接口体系,以便实现数据的集中化,这样我们在常规的Web业务系统,Winform业务系统.微信应用.微信小程序.APP等方面,都可以直接调用基于JSON数据格式的Web API接口,在我之前的几篇随笔中,对这方面都有一定的介绍,本篇继续这个主题,细致深入的阐述如何在接口和源码的基础上整合Web API.微信后台管理及前端微信小程序的应用方案. 1.基于Web API的微信开发框架 首先我们各个业务模块,都应该围绕着Web API进行展开,

Web前端学习的路径分享,前端学习方法及途径

随着最近几年来互联网的迅猛发展和普及,HTML5前端工程师已经成为互联网时代软件产品研发中不可缺少的一种专业的研发角色.特别是电商领域的互联网项目不断兴起之后,激烈的竞争让这里面的玩家对于用户体验提出了更高的要求,极致的用户体验甚至成为了胜负的关键,也因此让前端开发走到台前,成为一个必须的开发工种. 做前端,学前端,似乎有永远学不完的新知识,以至于很多开发者都陷入了不断跟进学习新知识的焦虑.没错,技术焦虑很常见,这在前端更为常见,在新手者身上最为常见.过度的焦虑往往会使人满满的负能量,迷茫找不到

006_饿了么大前端总监sofish帮你理清前端工程师及大前端团队的成长问题!

作者|Sofish编辑|小智 & 尾尾本文是前端之巅向 sofish 的约稿<什么样的人可以称为架构师?>.采访< 饿了么大前端团队究竟是如何落地和管理的?>以及 sofish 做客大咖说直播节目的总结和整理,希望能帮助各位淀粉更清晰地理解 sofish 的观点.获取大咖说视频下载链接,请关注前端之巅并回复"鱼老板",查看饿了么大前端更多实践请回复"饿了么".视频回顾 程序员成长之:跨界.困惑与架构师1. 如何看待"大跨度入

【转】常见六大Web 安全攻防解析

原文转自:https://segmentfault.com/a/1190000018073845 作者:浪里行舟 在互联网时代,数据安全与个人隐私受到了前所未有的挑战,各种新奇的攻击技术层出不穷.如何才能更好地保护我们的数据?本文主要侧重于分析几种常见的攻击的类型以及防御的方法. 一.XSS XSS (Cross-Site Scripting),跨站脚本攻击,因为缩写和 CSS重叠,所以只能叫 XSS.跨站脚本攻击是指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或Java

【大前端之前后分离】JS前端渲染VS服务器端渲染

前言 之前看了一篇文章:@Charlie.Zheng Web系统开发构架再思考-前后端的完全分离,文中论述了为何要前后分离,站在前端的角度来看,是很有必要的:但是如何说服团队使用前端渲染方案却是一个现实问题,因为如果我是一个服务器端,我便会觉得不是很有必要,为什么要前后分离,前后分离后遗留了什么问题,如何解决,都得说清楚,这样才能说服团队使用前端渲染的方案,而最近我刚好遇到了框架选型的抉择. 来到新公司开始新项目了,需要做前端框架选型,因为之前内部同事采用的fis框架,而这边又是使用的php,这

前端搬运工:零基础的前端开发初学者应如何系统地学习?前端掌握技能的学习路线

前端小伙伴们:[刚入门,但迷茫人群],请认真读完 下面的 淘宝web 大神总结,如果你对前端是真爱的话,并且坚信可以作为职业去改变你的生活,慢慢日积月累,按这个来吧,真的! 上半部分是 技术路线, 下半部分是掌握的知识框架+面面俱到,欢迎转载,但请注明出处! JS前端实用开发QQ群 :147250970  欢迎加入~! 张帅,大前端 (前端变化太快,以下内容我会不定期更新,第三方网站请不要转载,如果实在想转载,请只转载摘要,并保留原文链接,谢谢) 网站开发开发大致分为前端和后端,前端主要负责实现

1006.Web安全攻防靶场之WebGoat – 2

概述 由于上一篇文章 Web安全攻防靶场之WebGoat - 1 过长,这里分开写后面内容 使用 Cross-Site Scripting (XSS) 跨站脚本攻击,跨站脚本分为三类 1. Reflected XSS Injection 反射型xss 通过一个链接产生的xss叫做反射型xss,所有恶意内容都在url中. 2. Stored XSS Injection 存储型xss 所有的恶意内容都在网页中,是攻击者通过漏洞将恶意内容写在数据库中,然后当其他用户访问含有这些恶意数据的网页时,就遭受

移动互联网APP测试流程及测试点(2014版)【转】

移动互联网APP测试流程及测试点(2014版) 来自:http://wenku.baidu.com/link?url=uFn09W0tDsdSqpRw3mQflsASTf-5XK7ccCn0bVBwMqWUpOgI7YkzFh0DnpYlgXnJ2lyiddsUrIDH9qMmi1hE00a24oTz4uQj9M-lSZ_-wRK 1 .APP测试基本流程 1.1流程图 1.2测试周期 测试周期可按项目的开发周期来确定测试时间,一般测试时间为两三周(即15个工作日),根据项目情况以及版本质量可适

前端工程师必须了解的主流前端框架

现在前端工程师的工作已经不想几年前那样,仅仅写一些页面调整一下样式就可以拿到高薪了.由于前端技术的发展,以及企业对前端工程师的要求越来越高,现在前端工作也越来越复杂.不过只要掌握目前比较流行的主流框架,完全可以轻松应对老板提出的各种需求.今天就和大家聊聊前端工程师必须了解的主流前端框架. 已经从事前端工作,或者正在学习前端开发的朋友们都知道.HTML/CSS/JS是前端开发的基本功.其中HTML负责结构,网页想要表达的内容由html书写.CSS负责样式,网页的美与丑由它来控制,JS负责交互,用户