【Web安全】HTML5安全

RexHarrr

于 2022-10-17 19:30:26 发布

阅读量1.5k

点赞数 3

分类专栏： Web安全文章标签：前端 web安全学习

本文链接：https://blog.csdn.net/m0_51683653/article/details/127372040

版权

Web安全专栏收录该内容

10 篇文章 3 订阅

订阅专栏

1、HTML5新标签

1.1 新标签的XSS

1.2　iframe的sandbox

1.3　Link　Types：noreferer

1.4 Canvas的妙用

2、其他安全问题

2.1　Cross－Origin　Resource　Sharing

2.2　postMessage——跨窗口传递消息

2.3　Web　Storage

1、HTML5新标签

1.1 新标签的XSS

HTML５定义了很多新标签、新事件，很有可能带来新的XSS攻击。

如果建立了黑名单，黑名单里如果包含了HTML５新增的标签和功能，就可以避免XSS攻击。

1.2　iframe的sandbox

在HTML５里，专门为iframe定义了一个新的属性，叫sandbox。使用sandbox之后，＜iframe＞标签加载的内容将被视为一个独立的“源”，其中的脚本将被禁止执行，表单被禁止提交，插件被禁止加载，只想其他浏览对象的链接也被禁止。

sandbox属性可以通过参数来支持更精确的控制。

（１）allow－same－origin：允许同源访问

（２）allow－top－navigation：允许访问顶层窗口

（３）allow－forms：允许提交表单

（４）allow－scripts：允许执行脚本

但是有些行为即使设置了allow－scripts，也不被允许，例如弹出窗口

1.3　Link　Types：noreferer

在HTML5中为＜ａ＞标签和＜area＞标签定义了一个新的Link　Types：noreferer。

当标签指定了noreferer之后，浏览器在请求该标签指定的地址时将不再发送Referer。

<a href="xxx" rel="noreferer">test</a>

1.4 Canvas的妙用

不同于＜img＞标签只是远程加载一个图片，＜canvas＞标签让Javascript可以在页面中直接操作图片对象，也可以直接操作像素，构造出图片区域。开发者甚至可以用Canvas在浏览器上写一个小游戏。

以下浏览器支持＜canvas＞标签

(1) IE 7+

(2) Firefox 3.0+

(3) Safari 3.0+

(4) Chrome 3.0+

(5) Oprea 10.0+

(6) iPhone 1.0+

(7) Android 1.0+

Canvas甚至可以用来破解验证码。通过Javascript操作Canvas的每个像素点，从而自动识别验证码。

2、其他安全问题

2.1　Cross－Origin　Resource　Sharing

浏览器的同源策略限制了脚本的跨域请求，但跨域访问的需求不断扩大。W３C委员会决定指定一个新的标准来解决跨域访问问题。

发起的请求必须带上一个Origin　Header，用于标记HTTP发起的“源”，服务器端通过识别浏览器自动带上的这个Origin　Header，判断请求是否合法。因此，Origin　Header可以用于防范CSRF，它不像Referer这么容易被伪造或者清空。

2.2　postMessage——跨窗口传递消息

在HTML５中，制定了一个新的API：postMessage。

postMessage允许每一个window（包括当前窗口、弹出窗口、iframe等）对象往其他的窗口发送文本消息，从而实现跨窗口的消息传递。这个功能不受同源策略的限制。

利用postMessage（）给父窗口发消息，可以突破sandbox。

在使用postMessage（）时，需要注意两个问题：
（１）在必要时，可以在接收窗口验证Domain，甚至验证URL，以防止来自非法页面的消息。实际上就是在代码中实现一次同源策略的验证过程。

（２）在接收窗口不应信任接收到的信息，需要对消息进行安全检查。

2.3　Web　Storage

Web　Storage 实现离线浏览功能。

为什么要有Web　Storage 呢？过去浏览器存储信息的方法有以下几种：

（１）Cookie

（２）Flash　Shared　Object

（３）IE　UserData

其中，Cookie主要用于保存登录凭证和少量信息，其最大长度的限制决定了不可能在Cookie中存储太多信息。而后两者只是Adobe与微软自己的功能，并未成为一个通用标准。因此，客户端出现了一个较为强大和方便的本地存储功能，这就是Web　Storage 。

Web　Storage 分为Session　Storage和Local　Storage。Session　Storage关闭浏览器就会失效，而Local　Storage会一直存在。Web　Storage 就像一个非关系型数据库，由Key－Value对组成，可以通过Javascript对其进行操作。目前Firefox３和IE８都实现了Web　Storage 。

使用方法：

设置一个值：window.sessionStorage.setItem(key,value);

读取一个值：window.sessionStorage.getItem(key);

Web　Storage 也受同源策略的约束，每个域所拥有的信息只会保存在自己的域下。

它的出现让攻击者有了可乘之机，有可能将恶意代码保存在Web　Storage中，从而实现跨页面攻击，XSS攻击也可以获取Web　Storage中的敏感信息。