HTML5另类入门教程
◆ ◆ ◆
这期《黑客养成计划》的协议基础系列会持续发布
希望能够对准入门的盆友们起到一定帮助
HTML5 作为新一代网站开发技术，无论是一个 Web 开发人员或者想探索新的平台的游戏开发者，都值得去研究。借助尖端功能，技术和 API，HTML5 允许开发者创建响应性、创新性、互动性以及令人惊叹的漂亮网站。更进一步，开发者也可以使用 HTML5 创建原来只能用于桌面平台上的复杂应用程序，而这些复杂的功能同样带来了更多可能被利用的机会，因此了解HTML5对于我们也是必不可少的基础知识。
首先我们要知道HTML是什么？想必很多人都有耳闻。举个例子吧，比方说一个网页摆在你的面前，那么HTML就是一个骨架，而上面的文字、图片、视频、音频则作为附属在这个骨架上的皮肉，来给我们带来丰富的视听体验。如果没有这些皮肉，那么网页显然就是一句空谈，但如果没有HTML，我们也就不知道该如何将这些多媒体信息组合到一起。
1999年，HTML 4.01正式为W3C（万维网联盟）所推荐，于是这款全新的WEB标准开始了它长达十数年的互联网统治时代。随着带宽发展及电脑性能的提升，音频和视频开始被越来越多地用户推崇，而这两种资源恰恰是HTML 4.01所无法解释的。于是当时便有一家公司独辟蹊径，推出一款专门用于解释和播放影音文件的WEB标准，而这就是现在家喻户晓的Flash。
虽然Flash对于当时的WEB产业有着不可磨灭的贡献，但随着该技术在全球应用，一些弊端也开始明显地显露出现，比如安全性不高、资源消耗过大等等，最关键的是它很难适应日渐普及的移动WEB，程序员往往需要同时为PC版用户和移动版用户编写两套网站页面。
也就是在这个大背景下，HTML5风声水起，和之前的HTML4相比，新版本最大的亮点便是增加了<video>和<audio>两个标签，使得浏览器能够在不装任何插件的情况下直接播放影音资源。而且它还有很多更新的体验，比如直接在浏览器上绘制矢量图形、内嵌本地SQL数据库使交互加速、提供API实现从桌面拖拽文件到浏览器执行上传、自动获取用户地理信息、允许用户在离线状态下使用GMail，以及更利于搜索引擎索引整理的网站导航块等等。
https://www.runoob.com/html/html5-intro.html这里我们简单入门一下HTML5：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>文档标题</title></head><body>文档内容......</body></html>
注：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。
<!DOCTYPE html>是声明，必须位于HTML5文档中的第一行，记住就行，十分简单
类似<html></html>这种一对一对的标签就是HTML5这种通用标记性语言的特色了，他们由一对一对标签构成，组成了整个HTML5文档，你甚至都不易判断它是否可以纳入编程语言之列。
这里我列出常用标签和描述如下：
<header></header>文档头部<footer></footer>文档/节页脚<details></details>文档描述或文档细节<nav></nav>导航<section></section>内容区块<article></article>文章区块<aside></aside>article之外的信息<hgroup></hgroup>标题组<figure></figure>数据组<figcaption></figcaption>数据组标题
0x03 我们能怎样利用HTML5
在这篇13年的文章中给我们带来了很多思路：
https://www.freebuf.com/articles/web/11779.html一：CORS(Cross-Origin Resource Sharing) 跨域资源共享
为了构建高品质的网站，以及满足日益增长的用户需求，HTML5针对SOP（同源策略）放宽了一些限制，简单的说，同源策略允许来自同一站点的页面访问其页面的方法和属性等，但限制了跨域调用其他页面的方法和属性。现在HTML5放宽了这些限制，XMLHttpRequest Level 2新增了功能CORS协议，允许Ajax发起跨域的请求，浏览器是可以发起跨域请求的，比如你可以外链一个外域的图片或者脚本。但是Javascript脚本是不能获取这些资源的内容的，它只能被浏览器执行或渲染。
COR是页面层次的控制模式。每一个页面需要返回一个名为‘Access-Control-Allow-Origin’的HTTP头来允许外域的站点访问。你可以仅仅暴露有限的资源和有限的外域站点访问。在COR模式中，访问控制的职责可以放到页面开发者的手中，而不是服务器管理员。当然页面开发者需要写专门的处理代码来允许被外域访问。
所以只要b.com允许，a.com可以使用ajax获取A上任意数据，国外安全研究者Lava Kumar开发了一款工具“Shell of the future”。
二：窃取CSRF令牌（token）
目前很多互联网站点都在使用token来防御CSRF攻击，但是随着HTML5技术的普及，攻击者很有可能窃取到CSRF的token，如果CSRF token的请求URL(GET请求)，利用前面提到的CORS协议，攻击者可以注入一个CSRF payload跨域请求到目标站点上。当然，利用的话需要服务端添加一个HTTP 头字段“origin”，并且需要设置该属性withCredentials为true。
三：访问内部服务器：
很多互联网公司除了有ONLINE对外的业务之外，在内部也用着很多的应用，如财务管理系统、员工管理系统以及其他的一些内部社区等，很多开发者为了各个应用之间调用简洁方便，在很多应用中都添加了以下头：
Control-Allow-Origin: *
攻击者可以利用社会工程学，让内部用户点击一个链接，然后攻击者就可以访问到内部的一些资源。
四：HTML5新的XSS攻击载体
直到现在，还有很多开发者总喜欢开发自己定义的XSS黑名单过滤器，以阻止XSS攻击，包含了大多网络上常见的XSS利用的代码，如<img、<script等，HTML5中引入了很多新的标签属性，如audio和vedio标签，新的标签带来了新的事件，会绕过现有的过滤器。
五：离线Web应用缓存中毒
大部分浏览器都支持HTML离线缓存技术，如Google Chrome, Mozilla, Opera以及Safari，在给用户带来便捷的同时，也引发了一些列的安全威胁，如很有可能遭受“缓存中毒”的攻击。如果攻击者在网站上嵌入特定的JS文件，能够控制用户的账户。
注：具体实现方法在上面链接中，至今依旧十分推荐学习，受于篇幅有限，在此不提供具体实现
https://www.runoob.com/html/html5-intro.htmlhttps://www.freebuf.com/articles/web/11779.html
■ Over ■