HTML5全屏API之网络钓鱼

全屏API

全屏API（请参考 W3C docs和 MDN docs）允许web开发工程师使浏览器的可视区与用户屏幕区域大小一致。像youtube上全屏观看视频的效果；或者在facebook上全屏观看图片。

其实现在大多数浏览器都有全屏功能，允许用户来设置或操作。但HTML5的全屏API与之不同，HTML5的全屏API允许web开发工程师在程序中调用。这样，web开发工程师就可以再网站中设计一个按钮，当该按钮被点击时就让浏览器进入全屏模式。（就像youtube和facebook那样）

全屏代码如下：

	elementToMakeFullscreen.requestFullScreen();

HTML5的全屏api也有限制–必须有触发全屏的行为，而且必须是click或keypress事件。这一限制可能是为了防止用户在进入网站时就进入全屏模式。

	// Assuming jQuery is available

	// Fullscreen the HTML document on click
	$('#fullscreen-button').on('click', function() {
		var doc = document.documentElement;
		if (doc.requestFullscreen) {
			doc.requestFullscreen();
		}
	});

当然这个api还只是草案，所以在应用中，需要加上前缀（ mozRequestFullScreen() 和 webkitRequestFullScreen()）

怎么实现网络钓鱼攻击

首先，创建一个链接：

	访问  美国银行

注意，当用户鼠标滑过该连接时，浏览器状态栏显示的是正常的链接地址。但是当用户点击时，程序中会调用event.preventDefault()来阻止浏览器默认跳转事件。取而代之的是触发全屏，进入全屏模式，展现一个仿制的带有相应的操作系统和浏览器ui界面的假冒网站。

另外：该连接只有正常点击才会生效，如果右键“在新窗口打开”或鼠标中建点击是会正常跳转的。

	$('html').on('click keypress', 'a', function(event) {

	// Prevent navigation to legit link
	event.preventDefault();
	event.stopPropagation();

	// Trigger fullscreen
	if (elementPrototype.requestFullscreen) {
		document.documentElement.requestFullscreen();
	} else if (elementPrototype.webkitRequestFullScreen) {
		document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
	} else if (elementPrototype.mozRequestFullScreen) {
		document.documentElement.mozRequestFullScreen();
	} else {
		// fail silently
	}

	// Show fake OS and browser UI
	$('#menu, #browser').show();

	// Show fake target site
	$('#target-site').show();
});

其中匹配用户的操作系统和浏览器的ui很重要。

简单demo

查看demo源代码

该demo可以运行在不同操作系统下的不同浏览器，demo中图片包括各种操作系统和各种浏览器的UI。这里请注意，这些图片应该在进入全屏模式前并且用户不知情的情况下就要先下载好。当然该demo在全屏模式下也能正常的运行。

这种钓鱼方法真的有效吗？

通常，很多用户会自定义操作系统或浏览器的UI。而且或许很多用户会注意到仿的这些ui像假的。

比如，用户浏览器的书签栏或运行的一些app和截图不一致。操作系统的时间栏也可能是有问题的。

而且，在一些操作系统下，chrome会用1秒钟的动画来过渡到全屏（当然这个过渡动画用户是可以设置跳过的）。

以上这些可能存在的不足之处都是可以被忽视的。“变化盲区”现象可以解释，即便是存在以上缺陷，还是有很多用户受骗。

变化盲区–是一种在变化很大的情况下，会忽略细微变化的现象

阅读参考 变化盲区

人类在这一现象上表现的特别明显。

一般情况下，至少有10%的用户会受骗。

链接在网页上普遍存在，人们每天都会去点击，而且通常都认为点击一个链接是很安全的。很少有用户会通过浏览器状态栏来查看链接地址是否正常。即便是要查看，这种钓鱼方式的链接显示也是正常的。

许多浏览器在进入全屏模式不会有明确的提示。Safari会有一个简短的过渡动画，但在进入全屏模式后就没有任何提示说明了，这也很容易使用户受骗。Chrome和firefox（新版本）在进入全局模式后会在显示器顶部提示用户进入了全屏模式，但是提示也很容易让人忽略，尤其是chrome的提示。

关于软件功能和安全方面的一些记录

软件工程师在处理功能和安全上往往都需要做些取舍。当给一个复杂的系统添加一个新功能时，必须要去考虑新功能是否会影响到已有诸多功能，和新功能将会带来什么样的安全问题。全屏api是mozilla首先开发出来的，当时他们已经预计到了这样类似的攻击方式：

浏览器厂商已经预测到了全屏功能所带来的安全问题。比如，恶意网站全屏显示windows或mac登录窗口，然后盗取密码。这就是为什么在全屏模式下，输入的默认状态是禁用键盘，除非手动去设置修改。– John Dyer

然而，浏览器厂商觉得对于web开发工程师来说，全屏模式下支持键盘输入是必要的。

10月9号更新：Mozilla开发者文档中指出

在全屏模式下，任何字母、数字键盘输入会出现警告提示信息，从而防止这种网络钓鱼攻击。以下是一些输入不会引起警告出现的键……– MDN

但是，该文档已过时了。在chrome和firefox全屏模式下，键盘输入字母、数字不会引起警告提示。在facebook全屏模式下查看图片，输入留言时不会有任何提示。在safari中，会阻止键盘输入

10月12号更新：在黑客新闻上曾有人指出，曾经IE允许创建无边框的弹出窗口，这一功能很容易模拟操作系统和浏览器ui来实现网络钓鱼。IE在2004年去掉了这个功能。

文章翻译自 Using the HTML5 Fullscreen API for Phishing Attacks