#n3ur0n4 c0rp

silicon cell into your mind




---------------------------------------------------------
-- File : web shell desde cero.js
-- Date: June 22nd, 2011
-- Author : MCrow
-- Reply to : z3r0@n3ur0n4.org
-- Tags : , , , , ,
-- Write comment
---------------------------------------------------------

Introducción

La idea del n3ur0n4 File System es mostrar un blog bajo la apariencia de una Shell (línea de comandos). Sin embargo algunos usuarios no están familiarizados con el concepto. Así que por eso se ha creado la parte publica de la Web. Pero para el panel administrativo de la misma he decidido hacerlo elite, l33t, o para que se entienda “fuera de lo normal y atractivo”.

Para los usuarios que tengan alguna idea de que es una Shell, me encantaría proponerles hacer nuestra propia consola de comandos para su uso en la WWW.

Conocimientos previos

  • HTML.
  • Javascript nivel básico.
  • JQuery.
  • PHP básico.
  • CSS

Problemática

Siempre que programas paginas dinámicas del lado del cliente (Javascript) pueden surgir problemas de la incompatibilidad entre navegadores. Es por eso del uso del Framework JQuery. No necesitas conocimientos previos más que una noción de Javascript.

Bosquejo del problema

  • Crearemos la pantalla del terminal de forma dinámica.
  • Programaremos un Keylogger para poder interpretar el teclado, ya que para la Shell no haremos uso de formularios. Todo se escribirá dinámicamente en la pantalla de la consola de comandos.
  • Utilizaremos Ajax para interactuar con el servidor.
    • Cada comando insertado en la consola, se copiara en paralelo a un DIV ajeno a nuestra interfaz, para posteriormente enviarlo al servidor.
    • La respuesta del servidor se imprimirá en la misma consola.
    • En un futuro si deseamos ver contenido HTML podríamos crear una nueva ventana para no saturar nuestra consola.

Creando la interfaz del terminal.

a) Plantilla inicial.

Lo primero que tenemos que hacer es cargar JQuery colocando la siguiente línea en nuestra página principal entre las etiquetas <head>:

<script src=”jquery.js” type=”text/javascript”></script>

NOTA: la página tiene que estar en la misma carpeta que jquery.js

Hasta ahora la pagina a la que he llamado Shell.html queda de la siguiente manera:

<html>

<head>

<title>SHELL</title>

<link rel=”stylesheet” href=”style.css” type=”text/css”>

<script src=”jquery.js” type=”text/javascript”></script>

</head>

<body>

</body>

</html>

Nuestro DIV de estado o auxiliar quedaría de la siguiente manera:

<div id=”status”>

<div id=”command”></div>

</div>

Ver el código complete y ejecutarlo aca: http://n3ur0n4.org/_codex/shell/1.html

b) Generar la ventana del terminal.

La función $(document).ready(): Esta sentencia JQuery ejecuta código al cargar el DOM. Pero antes necesitamos crear nuestra function createTerm () que se encargara de crear nuestra interfas del terminal.

function createTerm (id) {
	var termWindow = $('<div id="' + id + '" class="term"><span style="color: #E10A0A;">lestat</span> <span style="color: #0066FF;"># ~ $ </span></div>');
	termWindow.id = id;
	termWindow.css("left", 0);
	termWindow.css("top", 0);
	termWindow.css("width", $(window).width());
	termWindow.css("height", $(window).height());
	termWindow.css("display", "block");
	$(document.body).append(termWindow);
}

var termWindow = $(‘<div id=”‘ + id + ‘” class=”term”><span style=”color: #E10A0A;”>lestat</span> <span style=”color: #0066FF;”># ~ $ </span></div>’);

En esta línea creamos un nuevo elemento DIV que será nuestra terminal. Es el equivalente a document.createElement (‘div’); solo que más fácil ya que en este caso tendríamos que asignar la los atributos class, id de manera manual, es decir otras dos líneas de código.

Las siguientes dos líneas se encargan de alinearlo en los limites de la pantalla.

Estas dos líneas se encargan de expandirlo a lo largo y ancho de toda la pantalla.

termWindow.css(“width”, $(window).width());

termWindow.css(“height”, $(window).height());

Y aquí es donde el nuevo elemento es añadido al documento

$(document.body).append(termWindow);

Ahora lo único que falta es llamar la función después de que cargue la pagina.

$(document).ready(function(){

createTerm(‘term1′);

});

NOTA: Desde ahora la terminal será identificada por el ID “term1” así que cuando veas un ‘term1’ es que estoy trabajando sobre el DIV de la terminal.

Veamos el ejemplo funcional en este lado http://n3ur0n4.org/_codex/shell/2.html

c) Creando el cursor

Esto es solo apariencia. La forma de darle un focus a nuestra terminal es con la ayuda de un cursor. Es decir para saber si podernos escribir en la Shell, para hacerle saber al usuario “oye estoy esperando a que escribas”.

function xtermCursor () {
	var contentx = $("#term1").html();
	if (contentx.substr(contentx.length - 1, 1) == '|') {
		contentx = contentx.substr(0, contentx.length - 1);
	} else {
		contentx += '|';
	}
	$("#term1").html( contentx );
	setTimeout ("xtermCursor()", 300);
}

El truco de crear un cursor es imprimir y borrar el carácter “|” cada cierto tiempo. Asi que a grandes rasgos la función obtiene el contenido de la consola, si no existe un carácter “|” lo imprime, y si existe lo borra.

El código funcional esta aca: http://n3ur0n4.org/_codex/shell/3.html

d) keylogger

Para saber que tecla presiona el usuario tenemos que crear la función keylogger().

function keylogger (e) {
	var asciiCode = new Array('a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i',
							  'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r',
							  's', 't', 'u', 'v', 'w', 'x', 'y', 'z');

	var content = $("#term1").html();
	var command = $("#command").html();
	if (content.substr(content.length - 1, 1) == '|') content = content.substr(0, content.length - 1);
	if (e.keyCode >= 65 && e.keyCode <= 90) {
		$("#term1").html( content + (asciiCode[e.keyCode-65]) );
		$("#command").html( command + (asciiCode[e.keyCode-65]) );
	} else if (e.keyCode == 8) {
		var backContent = content.substr(0, content.length - 1);
		$("#term1").html( backContent );
		$("#command").html( command.substr(0, command.length - 1) );
	} else if (e.keyCode == 32) {
		content += ' ';
		$("#term1").html( content );
		$("#command").html( command + ' ' );
	} else if (e.keyCode == 13) {
		$.ajax({
            type: 'POST',
            url: 'sh.php',
            data: {command: $("#command").html() },
            success: function(data) {
				var c = $("#term1").html();
				c += data + '<br /><span style="color: #E10A0A;">lestat</span> <span style="color: #0066FF;"># ~ $ </span>';
				$("#term1").html(c);
				var responseDiv = document.getElementById('term1');
				responseDiv.scrollTop = responseDiv.scrollHeight;
            }
        });
		$("#command").html('');
	}
}

El evento keydown devuelve un objeto (e) para manipular los códigos de las teclas.

Así que comenzamos con un Array con las letras del alfabeto, sin contar la “ñ”.

var asciiCode = new Array(‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’, ‘g’, ‘h’, ‘i’,

‘j’, ‘k’, ‘l’, ‘m’, ‘n’, ‘o’, ‘p’, ‘q’, ‘r’,

‘s’, ‘t’, ‘u’, ‘v’, ‘w’, ‘x’, ‘y’, ‘z’);
Seguidamente cargamos el contenido de nuestra terminal, así como el contenido de nuestro DIV auxiliar con la id “command”. Esto nos servirá para poder añadir, borrar contenido de la consola, o en su defecto al presionar un [enter] enviar el comando al servidor para obtener algún resultado específico.

var content = $(“#term1″).html();

var command = $(“#command”).html();

La siguiente línea nos ayuda a quitar el carácter “|” (cursor) en dado caso que lo haya, ya que no le podemos atinar cada 300 milisegundos que es el tiempo en que el cursor no está presente en la terminal.

if (content.substr(content.length – 1, 1) == ‘|’) content = content.substr(0, content.length – 1);

Después tenemos el código para imprimir las letras de la [a-z]. Y en efecto espejo también lo insertamos en nuestro auxiliar “command”.

if (e.keyCode >= 65 && e.keyCode <= 90) {

$(“#term1″).html( content + (asciiCode[e.keyCode-65]) );

$(“#command”).html( command + (asciiCode[e.keyCode-65]) );

}

El código de tecla “8” pertenece al botón de [borra a la izquierda].

if (e.keyCode == 8) {

var backContent = content.substr(0, content.length – 1);

$(“#term1″).html( backContent );

$(“#command”).html( command.substr(0, command.length – 1) );

}

En caso de presionar la barra espaciadora también lo imprimimos en la terminal y el auxiliar “command”.

if (e.keyCode == 32) {

content += ‘ ‘;

$(“#term1″).html( content );

$(“#command”).html( command + ‘ ‘ );

}

Y para el gran final esta la interacción con el servidor.

if (e.keyCode == 13) {
	$.ajax({
           type: 'POST',
           url: 'sh.php',
           data: {command: $("#command").html() },
           success: function(data) {
				var c = $("#term1").html();
				c += data + '<br /><span style="color: #E10A0A;">lestat</span> <span style="color: #0066FF;"># ~ $ </span>';
				$("#term1").html(c);
				var responseDiv = document.getElementById('term1');
				responseDiv.scrollTop = responseDiv.scrollHeight;
            }
   });
	$("#command").html('');
}

Primero enviamos el contenido de nuestro comando al archivo del lado del servidor llamado “sh.php”. Y al recibir respuesta del servidor la imprimimos en nuestra Shell a la vez que imprimimos un nuevo prompt. Borramos el contenido de “command”.

var responseDiv = document.getElementById(‘term1′);

responseDiv.scrollTop = responseDiv.scrollHeight;

Estas dos últimas líneas posicionan el scroll del DIV hasta la parte más baja de la consola, es decir a nuestro último resultado.

El contenido de sh.php el cual solo regresa las variables que recibe por método POST en este caso solo la variable command, es el siguiente:

<?
	if ($_POST) {
		foreach ($_POST as $a) {
		echo "<br />" . $a;
	}
}
?>

Ver el código funcional aquí: http://n3ur0n4.org/codex/shell/_4.html

Agradecimientos

A mi amigo hdstryOwrld owner y rootAdmin de codebit[dot]org que como antes yo hacía, me obliga a crear excelentes códigos gracias a sus observaciones.

Al ocio, ya que sin la presencia de él los programadores no innovaríamos nada.

A mi familia por estar siempre apoyándome pase lo que pase.

Y por supuesto a ti lector que haces de esta información tuya y construyes mejores códigos, o los destruyes XD.

Y a tu mama también.

Saludos…

Lestat of Lioncourt (MCrow)

===================EOF=============================