《白帽子讲WEB安全》学习笔记之第6章 HTML 5 安全

简介:

第6章 HTML 5 安全

6.1 HTML 5新标签

6.1.1 新标签的XSS

HTML5定义了新的标签、新的事件,这就有可能带来新的XSS攻击。所以黑白名单需要时常更新。

6.1.2 iframesandbox

iframesandbox属性,就是html5安全中很重要的组成部分部分。于此同时还带来了一个新的mime类型,text-html/sandboxed

html5页面中,可以使用iframesandbox属性,比如:<iframesrc="http://alibaba.com" sandbox>,sandbox后面如果不加任何值,就代表采用默认的安全策略,即:iframe的页面将会被当做一个独自的源,同时不能提交表单,以及执行javascript脚本,也不能让包含iframe的父页面导航到其他地方,所有的插件,如flash,applet等也全部不能起作用。简单说iframe就只剩下一个展示的功能,正如他的名字一样,所有的内容都被放入了一个单独的沙盒。

sandbox属性可以通过参数来支持更加精确的控制,有以下几个值可选择:

q  allow-same-original:允许同源访问

q  allow-top-navigation:允许访问顶层窗口

q  allow-forms:允许提交表单;

q  allow-script:允许执行脚本。

 参考:http://www.html5china.com/manual/html5/html5_iframe.htm

              http://www.cnblogs.com/yuzhongwusan/archive/2011/11/17/2252208.html

 

6.1.3 link types: noreferrer

HTML5<a><area>标签定义了一个link types: noreferrer。标签指定了noreferrer后,浏览器在请求指定的地址时将不再发送Referer

6.1.4 canvas的妙用

<canvas>这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API展现给客户端JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

可以使用<canvas>在线破解验证码。

参考:http://www.jb51.net/html5/71804.html

6.2 其他安全问题

6.2.1 cross-origin resource sharing

wKiom1f491TSAAv5AAVawz1jJQk175.png

6.2.2 postMessage——跨窗口传递消息

HTML5中新增了postMessage方法,postMessage可以实现跨文档消息传输(Cross Document Messaging),Internet Explorer 8, Firefox 3,Opera 9, Chrome 3 Safari 4都支持postMessage

该方法可以通过绑定windowmessage事件来监听发送跨文档消息传输内容。

postMessage允许每一个window(包括当前窗口,当初窗口,inframe等)对象往其他窗口发送文本消息,从而实现跨窗口的消息传递。这个功能不受同源策略的限制。

使用postMessage时,有两个问题需要注意:

q  在必要是,可以接收窗口验证Domain,设置验证url,以防止来之非法页面的消息。这实际上是在代码中实现一次同源策略的验证过程。

q  根据“secure By Default”原则,在接收窗口不应该新人接收的消息,需要对消息进行安全检测。

6.2.3 web storage

Web Storage实际上由两部分组成:sessionStoragelocalStorage sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。 localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

优势:

q  存储空间:存储空间 更大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie要大很多。

q  服务器:存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一并发送的服务器,这对于本地存储的数据是一种带宽浪费。而WebStorage中的数据则仅仅是存在本地,不会与服务器发生任何交互。

q  接口:更多丰富易用的接口:WebStorage提供了一套更为丰富的接口,使得数据操作更为简便。

q  存储空间:独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混乱。



本文转自 梦朝思夕 51CTO博客,原文链接:http://blog.51cto.com/qiangmzsx/1859550

相关文章
|
3天前
|
关系型数据库 MySQL
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
|
2天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
|
2天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项?
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项?
|
4天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
4天前
|
前端开发 JavaScript UED
【专栏:HTML 与 CSS 前端技术趋势篇】Web 性能优化:CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用,包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展,CSS模块系统、自定义属性和响应式设计将得到强化,HTML新特性也将支持复杂组件构建。同时,应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新,我们可以提升Web应用性能,创造更好的用户体验。
|
4天前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。
|
4天前
|
运维 前端开发 JavaScript
【专栏:HTML进阶篇】HTML与Web标准:构建可访问与可维护的网页
【4月更文挑战第30天】本文探讨了HTML与Web标准的关系,强调遵循标准对创建高质量、可访问、可维护网页的重要性。通过使用语义化标签、提供文本替代、合理使用表格和列表,可提升网页可访问性;通过结构化文档、添加注释、分离结构与表现,能增强网页可维护性。遵循Web标准,可确保网页在不同设备上的兼容性,并满足各类用户需求。
|
4天前
|
移动开发 JavaScript 前端开发
【专栏:HTML进阶篇】HTML模板与Web组件:可复用的网页元素
【4月更文挑战第30天】HTML模板和Web组件提升网页开发效率和可维护性。HTML模板,如&lt;template&gt;元素和服务器端模板引擎,用于创建可复用的HTML结构。Web组件是自定义的HTML元素,结合影子DOM和模板,实现封装的可重用组件。两者助力构建高效、现代的网页和网站。
|
6天前
|
XML 存储 前端开发
【Web 前端】HTML、XHTML、XML 有什么区别?
【4月更文挑战第22天】【Web 前端】HTML、XHTML、XML 有什么区别?
|
9天前
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
16 0
webgl学习笔记3_javascript的HTML DOM