teclado virtual para evitar los keyloggers

tecasoft · 5 Marzo 2013, 19:59 PM

estoy haciendo un teclado virtual para evitar los keyloggers, y necesito saber komo dirigir las teclas hacia los campos usuario y contraseña, es decir, un poco de javascript para calentar motores, ya que estoy un poco atascado a la hora de EJEMPLO: seleccionar el campo "usuario" y luego elcampo "contraseña", es decir seleccionarlos con el raton y que se pueda escribir desde el teclado virtual, que hasta ahora escribo pero nose cambiar del campo "text" al campo "password", eso es....

Código [Seleccionar]


<?php
session_start();

session_destroy();

$_SESSION['usuario1'] = "";
$_SESSION['contrasena'] = "";

?>

<html>
<head>
<meta http-equiv='last-modified' content='0'>
<meta http-equiv='cache-Control' content='no-cache, mustrevalidate'>
<meta http-equiv='pragma' content='no-cache'>
<meta http-equiv='expires' content='-1'>

<meta charset="utf-8">
 <title>Tecasoft.com | Area de clientes</title>
<link href="css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery-ui-1.9.2.custom.js"></script>

<link rel="shortcut icon" type="image/x-icon" href="http://www.tecasoft.com/imagenes/favicon.ico" />

<link rel="StyleSheet" type="text/css" href="http://www.tecasoft.com/css/estilos.css">

</head>
<body>

<div id="contenedor">
 <center>

  <div id="cabecera">
  
   <div id="logo">
   
   <a href="http://www.tecasoft.com"><img src="http://www.tecasoft.com/imagenes/logotipo.png" border="0" width="270" height="90" alt="Tecasoft.com, servicio informatico"></a>
   
   </div>
  
   <div id="anexo">
   
   <a href="http://www.tecasoft.com/clientes/anexo.php" class="anexo" title="Cambiar idioma">Español (Cambiar ▼)</a>   
   
   </div>
    
  </div>

<!-- Menu navegador -->

  <div id="navegador">
  
  
  
  
  
  
  </div>

<!-- El contenido central -->

 <div id="contenido">
 
  <h1 class="naranja">Inicie Sesión</h1>

  <form action="login.php" method="post" name="form1">
  
  <label for="usuario">Usuario:</label>
  <input type="text" name="usuario" id="usuario" class="text ui-widget-content ui-corner-all" readonly>
  &nbsp;&nbsp;&nbsp;
  <label for="contrasena">Contraseña:</label>
  <input type="password" name="contrasena" id="contrasena" class="text ui-widget-content ui-corner-all"><br><br>



  <input type="button" class="boton" id="1" value="1">
  <input type="button" class="boton" id="2" value="2">
  <input type="button" class="boton" id="3" value="3">
  <input type="button" class="boton" id="4" value="4">
  <input type="button" class="boton" id="5" value="5">
  <input type="button" class="boton" id="6" value="6">
  <input type="button" class="boton" id="7" value="7">
  <input type="button" class="boton" id="8" value="8">
  <input type="button" class="boton" id="9" value="9">
  <input type="button" class="boton" id="0" value="0">
  <br>

<!-- Cambia a mayusculas y minusculas -->
  <input type="button" class="boton" value="Bloq.Mayus">
<!-- End -->

  <input type="button" class="boton" value="Q">
  <input type="button" class="boton" value="W">
  <input type="button" class="boton" value="E">
  <input type="button" class="boton" value="R">
  <input type="button" class="boton" value="T">
  <input type="button" class="boton" value="Y">
  <input type="button" class="boton" value="U">
  <input type="button" class="boton" value="I">
  <input type="button" class="boton" value="O">
  <input type="button" class="boton" value="P">
  <br>
  <input type="button" class="boton" value="A">
  <input type="button" class="boton" value="S">
  <input type="button" class="boton" value="D">
  <input type="button" class="boton" value="F">
  <input type="button" class="boton" value="G">
  <input type="button" class="boton" value="H">
  <input type="button" class="boton" value="J">
  <input type="button" class="boton" value="K">
  <input type="button" class="boton" value="L">
  <input type="button" class="boton" value="Ñ">
  <br>
  <input type="button" class="boton" value="Z">
  <input type="button" class="boton" value="X">
  <input type="button" class="boton" value="C">
  <input type="button" class="boton" value="V">
  <input type="button" class="boton" value="B">
  <input type="button" class="boton" value="N">
  <input type="button" class="boton" value="M">
  <input type="button" class="boton" value="-">
  <input type="button" class="boton" value="_">
  <input type="button" class="boton" value="@">
  <input type="button" class="boton" value="#">

  <br><br>
  <a href="" class="anexo">¿Has olvidado tu contraseña?</a>
  &nbsp;&nbsp;&nbsp;  
  <input type="submit" class="boton" value="Iniciar sesión">
  </form>
 </div>
  
<!-- Pie Pagina --> 
  
  <div id="pie">

  <hr>

  <div id="pie-izq">
  
  <a href="http://www.tecasoft.com/legal.html" class="pie-izq" title="Condiciones Generales de Contratación">Legal &nbsp;|&nbsp;</a> 
  <a href="http://www.tecasoft.com/proteccion-de-datos.html" class="pie-izq" title="Protección de datos personales">Proteccion de datos &nbsp;|&nbsp;</a>
  <a href="http://www.tecasoft.com/central-de-soporte.html" class="pie-izq" title="Documentación de ayuda">Central de soporte &nbsp;|&nbsp;</a>
  <a href="http://www.tecasoft.com/sitemap.html" class="pie-izq" title="Todos los enlaces web">Mapa web &nbsp;|&nbsp;</a>
  <span class="pie-izq">Rotacion soporte:  &nbsp;|&nbsp;</span>
  <span class="pie-izq">Hora: </span>
   
  
  </div>

  <div id="pie-der">

  <a href="http://www.tecasoft.com/empresas-grupo.html" class="pie-der" title="Nuestro grupo empresarial">Empresas del grupo: anonimo S.L</a>
  
  
  </div>
 
 <br><br> 
 
 </div>
  
  
  
  
  
 </center>

</div>

<script type="text/javascript" >
$(".boton").button();
</script>

<script type="text/javascript" >

$("input#1").click(function(){
 document.form1.usuario.value=document.form1.usuario.value+1;
});

$("input#2").click(function(){
 document.form1.usuario.value=document.form1.usuario.value+2;
});

</script>

</body>
</html>

x cierto me faltan las minusculas pero no me importa de momento*, muchas gracias x contestar

Ori-chan · 5 Marzo 2013, 22:03 PM

Interesante. Cuando haga mi pagina web pondré esto seguro.

MCKSys Argentina · 5 Marzo 2013, 22:26 PM

Porque no examinas el teclado que ofrecen los bancos?

Te dejo un link que tiene teclado virtual implementado con JS: https://www.accessbanking.com.ar/RetailHomeBankingWeb/access.do

Hay varios .js que estan trabajando, pero parece estar bastante modularizado.

Saludos!

tecasoft · 5 Marzo 2013, 22:59 PM

estoy buscando en la web y no encuentro nada, es mucho codigo, hecharme una mano por favor

MCKSys Argentina · 5 Marzo 2013, 23:14 PM

Fijate teclado.js (https://www.accessbanking.com.ar/bkb/js/teclado.js)

Luego es custeion de seguir analizando el codigo...

Saludos!

PD: Opera trae incorporado un analizador de los elemtnos de la pagina. Seguro que hay algo parecido para otros navegadores, pero uso Opera solamente.

tecasoft · 5 Marzo 2013, 23:26 PM

ya lo examine y no encuentro nada para que me bloquee el teclado fisico

MCKSys Argentina · 5 Marzo 2013, 23:37 PM

Creo que la idea no es bloquear el teclado fisico (no creo que desde un navegador lo puedas hacer) sino permitirle al usuario ingresar texto sin usar el mismo.

No se mucho JS, pero se me ocurre que cada vez que un texto sea modificado usando el teclado, se podria borrar el mismo, con lo que obtendria una especie de "bloqueo".

tecasoft · 5 Marzo 2013, 23:39 PM

y como hago eso, es decir para bloquearlo, afectaria algo al usuario¿?

encontre esta chapucilla que no me soluciona nada

Código [Seleccionar]


<script language="javascript">function tecla(){alert('EL TECLADO BLOQUEADO')}; document.onkeydown=tecla;</script>

daryo · 5 Marzo 2013, 23:43 PM

si que tal si no es un input type=text sino simplemente un cuadrado que se le van dibujando letras con el teclado virtual, y la info la almacene en una variable en js o en un input hidden

solo es una idea

MCKSys Argentina · 5 Marzo 2013, 23:45 PM

Cita de: tecasoft en 5 Marzo 2013, 23:39 PM
y como hago eso, es decir para bloquearlo, afectaria algo al usuario¿?

Afectaria en que no podria ingresar texto usando el teclado normal.

Fijate este link: http://stackoverflow.com/questions/1948332/detect-all-changes-to-a-input-type-text-immediately-using-jquery

Cita de: daryo en 5 Marzo 2013, 23:43 PM
si que tal si no es un input type=text sino simplemente un cuadrado que se le van dibujando letras con el teclado virtual, y la info la almacene en una variable en js o en un input hidden

solo es una idea

Y muy buena, por cierto!

Como te dije antes, mis conocimientos son en programacion general, no en JS. Hay mucho que no conozco sobre el tema...

Saludos!