这篇文章主要介绍界面操作劫持与HTML5安全的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

网站建设哪家好，找成都创新互联！专注于网页设计、网站建设、微信开发、小程序制作、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了喀左免费建站欢迎大家使用！

一、界面操作劫持

1）ClickJacking

ClickJacking点击劫持，这是一种视觉上的欺骗。

攻击者使用一个透明的、不可见的iframe，覆盖在网页的某个位置上，诱使用户点击iframe。

2）TapJacking

现在移动设备的使用率越来越高，针对移动设备的特点，衍生出了TapJacking（触屏劫持）。

手机上的屏幕范围有限，手机浏览器为了节约空间，可以隐藏地址栏，手机上的视觉欺骗会更加容易实施。

1. 第一张中最上方显示了浏览器地址栏，同时攻击者在页面中画出了一个假的地址栏；

2. 第二张中真实的浏览器地址栏已经自动隐藏了，此时页面中只剩下假的地址栏；

3. 第三张中是浏览器地址栏被正常隐藏的情况。

这种针对视觉效果的攻击可以被利用进行钓鱼和欺诈。

3）X-Frame-Options

针对传统的界面劫持，通过禁止iframe来防范。

HTTP头中有一个响应头X-Frame-Options，有三个值可以选择：

1. DENY：该页面不允许加载任何 iframe页面。

2. SAMEORIGIN：该页面可以加载相同域名的 iframe页面。

3. ALLOW-FROM uri：该页面可以加载指定来源的 iframe页面。

二、HTML5安全

HTML5中新增的一些标签和属性，使得XSS等Web攻击产生了新的变化，在HTML5 Security Cheatsheet中总结了这些变化。

1）隐藏URL恶意代码

反射型XSS中，会将恶意代码写在URL参数中，这样的话，用户也能看到恶意代码，例如下面的链接：

http://www.csrf.net/csrf.html?id=

可以通过window.history来操作浏览器的历史记录。

pushState()有三个参数：状态对象、标题，可选的URL地址。

history.pushState({},"", location.href.split('?').shift());

执行上面那段代码后就会将参数隐藏。

新的URL地址就是下面这个：

“pushState”还可以伪造浏览器历史记录。

for(i=0; i<10; i++)
    history.pushState({},"", "/"+i+".html");

2）HTML5下的僵尸网络

僵尸网络（Botnet）是指在大量的计算机中植入特定的恶意程序，使控制者能够通过若干计算机直接向其他计算机发送指令，进行网络攻击。

基于Web前端的僵尸网络可以用作DDOS攻击，这里涉及Web Worker技术和CORS处理机制，再通过Web蠕虫传播。

Web Worker是一种多线程机制，可以异步执行恶意JS代码，而不影响用户在浏览器中的正常操作。

CORS处理机制工作在浏览器层面，如果服务器不允许跨站，浏览器将拦截服务器返回的结果，也就是说跨域请求，服务器也会正常响应。

那么就可以事先写好一段异步请求的脚本（worker.js），然后通过Web Worker来执行这段脚本，不断的向目标服务器发起请求。

var worker_loc = 'worker.js';//封装了ajax请求的脚本
var target = ' 
//可实例化多个
Web Workervar workers = [];for (i = 0; i < 1; i++) {
      workers[i] = new Worker(worker_loc);
      workers[i].postMessage(target);//跨域消息传递}

以上是“界面操作劫持与HTML5安全的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前文章：界面操作劫持与HTML5安全的示例分析-创新互联
网站链接：http://chengdu.cdxwcx.cn/article/diosoo.html