网页前端也同样要注意Web安全

此文刊登在《程序员》三月期,有删改

提到安全问题,首先想到应付这些问题的应该是系统管理员以及后台开发工程师们,而前端开发工程师似乎离这些问题很遥远。然而,在 2008 年发生在安全领域的一系列 Web 安全事件,改变了人们对于传统安全的观念。让我们在这里简要回顾下:

IE7 的 0day 漏洞以及 Chrome 崩溃事件

2008 年的年底,IE7 爆出了个很严重的安全漏洞。与往期微软的漏洞不同,这次的漏洞是从 IE7 发布时起就存在(这也是称之为 0day 漏洞的原因)。

该漏洞的原理,就是通过解析某段精心构造的 XML 造成 IE7 内存溢出,进而可执行任意的代码。虽然官方很快发布了此漏洞的补丁,但此漏洞仍然影响至今。

另个类似的浏览器风波,就是 Google 在 08 年 Q3 发布 Chrome 浏览器。在 Chrome 发布当天,黑客们就发现只要在地址栏中输入构造好的字符就能导致浏览器崩溃。此后即便 Google 迅速的修复了该漏洞,但已经对用户造成了非常糟糕的印象。

感叹:浏览器平台的安全问题,直接影响着该浏览器日后的市场份额。好比当年 Firefox 起家时也正因着重打安全这张重牌,才有今日的收获。即将推出的 IE8 浏览器,微软已经在各种场合大肆宣扬该新浏览器的安全性能。由此,正说明各浏览器厂商对安全这块的重视程度。相信目前正酣的浏览器战场,对于安全这块必然 是兵家必争之地。

各微博客的 CSRF 和 Clickjacking 漏洞

微博客的流行是 Web2.0 大潮中的奇葩,然而近期爆发的 饭否、叽歪、Twitter 等的安全漏洞,着实让前端开发工程师大开眼界。饭否 和 叽歪 的 CSRF 漏洞,使得攻击者能通过段 Javascript 代码在用户不知情的情况下,向微博客服务器发布相应的消息,从而造成攻击。

感叹:客户端的 Javascript 脚本早已经摆脱仅仅是显示页面效果的“玩具”,它已经变成一把利刀。这把刀能帮前端解决问题的同时,也能伤害到用户。

同比,年初爆发的 Twitter Clickjacking 漏洞,它将 Twitter 的发布页面通过 iframe 嵌入到第三方页面,然后通过 CSS 使得并将 Twitter 的发布按钮与第三方页面的按钮重合。这样,当用户本意点击第三方页面的按钮时,实际上点击的是 Twitter 页面的发布按钮,进而造成攻击。

感叹:前端攻击方式也正逐渐的升级,防范前端代码的攻击不仅仅就是防范 Javascript 等前端脚本,CSS 甚至 HTML 也能构成攻击。

“精武门”安全峰会

“精武门”安全峰会是阿里巴巴集团组织的针对 Web 应用安全的研讨会。和往年讨论后台安全不同,今年重点着重讨论 Web 攻击的方式和防范。众多国内著名的安全小组集聚一堂,讨论目前国内 Web 应用的前端安全问题。

感叹:在见识了琳琅满目的攻击方式的同时,也引发了对于未来国内 Web 应用安全的思考。

后记

Web 2.0 以降,前端这个职位已从传统“美工”,蜕变成用户体验的实现者。然而随着浏览器提供的功能日益强大、各种 Web 应用的日趋复杂,安全这块被传统笼罩的“灰色地带”,也正进入每个前端开发工程师的视线。相信在不久的将来,前端开发工程师作为新生的安全力量,必占有十 分重要的一席。

时间: 2024-10-28 09:05:52

网页前端也同样要注意Web安全的相关文章

网页前端开发,对于图片慢加载简介

技术背景       现在的网页系统,对于一些对图片资源比较多,并且一次性无法浏览完整个网页的情况下,图片慢加载可以提高客户端的体验,如IT大头:淘宝,网易,新浪等等...   技术原理   技术说穿了其实也就那么回事,懂了就简单了,呵呵~      1.   预设图片的属性,"src"指向一个小图,"_src"指向真是的图片地址:      2.   获取浏览器滚动事件:      3.   计算当前浏览器下拉的位置,通过高度判断是否需要加载图片:      4.

网页前端开发优化的参考List

网页制作Webjx文章简介:一些前端开发优化的经验总结. 发现的一篇关于前端优化的文章,总结的很全面,要做到面面俱到很难,往往是想优化而没有时间去优化,就像我们公司,一个项目连着一个项目~新员工的培训都省了,还想优化前端啊,不过我真的想有机会和老大好好的整合下公司网站的前端代码~不过要把前端优化的工作放在平时的写代码中去,就不需要刻意的后期优化了.在项目开发中,后台需要搭建好框架,前端更是需要搭建好框架,并且在页面实现中得到实现,只有这样才能事半功倍. 前段时间简单的研究了下前端优化相关的知识,

视觉设计研究:网页前端视觉设计的内容

本文是关于视觉设计的研究类文章,说的很有深意很精彩,本站截取关于网页前端视觉设计的内容,希望大家从中找到一些设计趋势与灵感. 3D 效果的网站在浏览3D效果Flash网站时,会不自觉被惊人的效果迷住.网站的设计者和开发者为网站提供了丰富的内容,震撼的视觉体验和让用户难以置信的互动效果,令人印象深刻. 像素级完美细节文字的布局和排版网站的布局排版,是一门艺术,可以通过不同图片,文字,段落等元素的排列组合,体现想要表达的重点及细节,从而使用户自然接受信息!可用范围: 门户,活动,广告场景化运用真实场

网页前端开发工具推荐

  当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间.在这篇文章中,我编译整理了我最喜欢的 CSS样板,框架和库,帮助你在建立网站或应用程序时更加高效. Bootstrap 开发工具推荐-网页前端开发工具"> 如果你想给你的新项目的专业的外观和感觉,Boostrap 可能是你需要的工具.它拥有一个非常干净的排版,表格元素,以及设计一个现代化的网站你需要的所有东西.更多信息: twitter.github.io Foundation Foundation 来自 Zurb

推荐网页前端设计:适合JavaScript新手的书籍

文章简介:适合JavaScript新手的入门书籍. 自从学习网页前端设计以来,我一直把主要的精力和时间放在研究Photoshop.Html以及CSS上面,很少学习JavaScript,原因是之前不知道网页的构成由三个部分,内容(Html).外观(CSS)和行动(JavaScript)组成,而JavaScript作为代表行动的部分具有相当的重要性.没有JavaScript参与的网页如同是一本书,单方面的对用户灌输信息,而有了JavaScript的网页,才和用户有所互动.所以现在狠下心来恶补Java

写给IOS开发工程师的网页前端入门笔记

前言:作为IOS开发工程师,终会接触到网页前端开发,甚至可能会有 用HTML5开发IOS的app客户端的需求.比如现在上架的app就有比如理财类型的app有的就用HTML开发的,从理财类型的app需求上思考,用 HTML5确实是个不错的选择,利用了跨平台的同时,也考虑到了理财类型的app仅仅需要处理的是数据的业务逻辑,不存在较多的本地存储数据,而且涉及到 的财务信息从安全性考虑数据基本都会存储在服务器端,是不可能用于存储在本地的,再加上HTML5对各种手机屏幕的尺寸适配性非常灵活,所以这一类ap

网页开发-初学网页前端开发有很多困惑ヾ(@⌒ー⌒@)ノ

问题描述 初学网页前端开发有很多困惑ヾ(@⌒ー⌒@)ノ 网页前端开发适合用什么工具?本来打算用Dreamweaver CS6的,现在是Dreamweaver 8,可是上网一看都不支持这个,求大神支招^_^ 解决方案 初学这个,建议参考另外的开发神器,最近自己在用sublime,很不错,支持代码很强大,功能很多.自定义插件,更是了不得,多看看这个. 解决方案二: sublime,几乎专业的前端人员都用这个,主要是便捷,功能强大,你可以试试 解决方案三: hBuilder也不错

复制静态网页广告代码-在wordpress中复制后的静态网页怎么能上传到web目录中

问题描述 在wordpress中复制后的静态网页怎么能上传到web目录中 在wordpress的网页制作中,发现别的一个网站的广告很适合自己的网站,怎样把别人的广告代码给复制过来?同时这个网站也是静态网页,跟自己的网页相似就把对方的网页代码复制过来,怎样把对方的网站广告代码给弄到自己的网站上?谢谢!

网页前端获取摄像头列表

问题描述 网页前端获取摄像头列表 各位大神,小弟之前用jsp写了个摄像头调用拍照的,也是借鉴着写的,调试的时候发现如果笔记本外联一个USB摄像头的话,就算把笔记本的禁用掉也不会调用usb摄像头,把笔记本的摄像头卸载了就会调用USB摄像头,不拔出USB,再安装本地摄像头驱动扔会调用USB摄像头,拔出USB再插入就还是调用本地摄像头,这证明了他只调用了设备列表的第一个摄像头,求解怎么把摄像头列表弄出来,我记得qq视频好像就有这功能吧. 解决方案 jsp能调用摄像头?jsp跟前端搭么