博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5 中fullscreen 中的几个API和fullscreen欺骗(转载)
阅读量:4625 次
发布时间:2019-06-09

本文共 2217 字,大约阅读时间需要 7 分钟。

 HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做 

全屏API,游戏呀,等都很有用。先看常见的API 
1 element.requestFullScreen() 
    作用:请求某个元素element全屏 
Document.getElementById(“myCanvas”).requestFullScreen() 
  这里是将其中的元素ID去请求fullscreen 
退出全屏 
  document.cancelFullScreen() 
Document.fullScreen 
  如果用户在全屏模式下,则返回true 
5 document.fullScreenElement 
  返回当前处于全屏模式下的元素 
   下面的代码是开启全屏模式: 

Java代码  
  1. function fullScreen(element) {  
  2.   if(element.requestFullScreen) {  
  3.     element.requestFullScreen();  
  4.   } else if(element.webkitRequestFullScreen ) {  
  5.     element.webkitRequestFullScreen();  
  6.   } else if(element.mozRequestFullScreen) {  
  7.     element.mozRequestFullScreen();  
  8.   }  
  9. }  

    下面的代码就是整个页面调用全屏模式 
  var html = document.documentElement; 
fullScreen(html); 
   下面的则是对指定元素,比如 
  var canvas = document.getElementById('mycanvas'); 
fullScreen(canvas); 
   如果要取消,同样: 
  

JS代码  
  1. // the helper function  
  2. function fullScreenCancel() {  
  3.   if(document.requestFullScreen) {  
  4.     document.requestFullScreen();  
  5.   } else if(document .webkitRequestFullScreen ) {  
  6.     document.webkitRequestFullScreen();  
  7.   } else if(document .mozRequestFullScreen) {  
  8.     document.mozRequestFullScreen();  
  9.   }  
  10. }  
  11.   
  12.   
  13. fullScreenCancel();  

    不过老实说,FULL SCREEN有个问题,容易造成欺骗,比如在 
http://feross.org/html5-fullscreen-api-attack/中,其中就有一个很好的DEMO, 
去欺骗了,比如某个链结写的是http://www.bankofamerica.com,大家以为是美国银行, 
一点进去,因为使用了全屏幕API,就会欺骗到人 
 

JS代码  
  1. $('html').on('click keypress', 'a', function(event) {  
  2.   
  3.   // 不响应真正的A HREF点击事件  
  4.   event.preventDefault();  
  5.   event.stopPropagation();  
  6.   
  7.   // Trigger fullscreen  
  8.   if (elementPrototype.requestFullscreen) {  
  9.     document.documentElement.requestFullscreen();  
  10.   } else if (elementPrototype.webkitRequestFullScreen) {  
  11.     document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);  
  12.   } else if (elementPrototype.mozRequestFullScreen) {  
  13.     document.documentElement.mozRequestFullScreen();  
  14.   } else {  
  15.     //  
  16.   }  
  17.   
  18.   //显示假的UI  
  19.   $('#menu, #browser').show();  
  20.   
  21.     
  22.   $('#target-site').show();  
  23. });  

  详细代码在https://github.com/feross/fullscreen-api-attack可以下载 
老外也提到了: 
   Browser vendors are well aware of the potential security issues with fullscreen. For example, a malicious site could show a full screen Windows or Mac login window and steal a password. That’s why they are disabling keyboard support by default and only enabling by explicitly asking. — John Dyer 

转载于:https://www.cnblogs.com/chenchuzi/p/7359527.html

你可能感兴趣的文章
网络编程之进程3
查看>>
Visual Studio Code 工具使用教程
查看>>
linux下shellcode编写入门
查看>>
selenium入门环境之浏览器问题
查看>>
BA--三相异步电机_星三角降压启动
查看>>
VM虚拟机安装后的网络设置
查看>>
jQuery Alert Dialogs (Alert, Confirm, & Prompt代替方案)
查看>>
牛客 109 C 操作数 (组合数学)
查看>>
Linux下通过 rm -f 删除大量文件时报错:Argument list too long
查看>>
【2019/2/1】安卓应用——记账本,学习记录【1】
查看>>
记因PHP的内存溢出导致的事故之解决
查看>>
[转]Apache commons 工具包应用
查看>>
Bridge模式——设计模式学习笔记
查看>>
【python】统一转换日期格式dateutil.parser.parse
查看>>
spring的依赖注入
查看>>
CF 576A 猜数
查看>>
『重构--改善既有代码的设计』读书笔记----代码坏味道【3】
查看>>
ABAP 中JSON格式的转换与解析
查看>>
使用oschina的gitserver
查看>>
嵌入式课程学习大纲分享,零基础入门嵌入式技术
查看>>