[Resuelto] ¿Es posible validar una página web con javascript?

Iniciado por zellion, 26 Agosto 2019, 21:31 PM

0 Miembros y 1 Visitante están viendo este tema.

zellion

Buenas noches:

Os explico un poco para poneros en contexto porque la pregunta del título es un poco general. El tema que voy a acceder a una web que no he creado yo, por ejemplo la web "www.midominio.html".

Esta página web tiene un formulario con una serie de campos que para guardar en base de datos se tiene que pulsar un botón de html. Mi idea es crear un complemento con javascript para que al pulsar un botón, realice unas serie de validaciones en los campos del formulario para identificar cuales no están correctamente rellenados.

El tema es que estado mirando por Internet sobre como leer el código fuente del html y los valores insertados por los usuarios, pero no he encontrado algo que me ayudara o no he sabido buscar bien.

¿Sabéis de alguna referencia dónde se explique lo que necesito o documentación con las cosas que debería de aprender para hacer el script? Ya que seguramente me falten conocimientos técnicos básico de javascript y de páginas web.

Muchas gracias por adelantado.

Un saludo.

@XSStringManolo

#1
Si la página no es tuya, en principio no puedes hacer nada con javascript. Esto tiene muchos matices.
Puedes hacer HTMLi XSS o SQLi. Crear una extensión para el navegador(es esto lo que quieres?) O un bot con node.js.

Para la extensión puedes usar la api webextensions de mozilla. Para modificar el contenido del sitio, puedes comprobar la url de la tab para saber que estás en el sitio indicado, obtener la web en un <iframe> y modificarla a tu gusto antes de mostrársela al usuario que está utilizando la extensión.


Si lo que buscas es validar TÚ página puedes hacerlo de muchas formas en front-end. Aquí parte de una página que estoy haciendo como reto de ciberseguridad.

Código (javascript) [Seleccionar]
<html>
<head>

(SCRIPT)
var username ="";
var userpassword ="";
var username_size = 0;
var userpassword_size = 0;
var username_parsed = "";
var userpassword_parsed = "";
(/SCRIPT)

</head>
<body>
<form action="#">
   <label>User:</label>
   <input type="text" id="username" name="user" placeholder="USER" style="width:200px">
   <label>Password:</label>
   <input type="text" id="userpassword" name="password" placeholder="PASSWORD" style="width:200px">
   <input type="submit" value="Submit" onclick="ObtenerInput();">
</form>

(SCRIPT)
function ObtenerInput()
{
username = document.getElementById("username");
userpassword = document.getElementById("userpassword");
username = username.value;
userpassword = userpassword.value;

alert("Obtenido Usuario " + username);

Parsear();
}

function Parsear()
{
alert ("Iniciada funcion de parseo");
username_size = username.length;
userpassword_size = username.length;
  for(var i = 0; i < username_size; ++i)
  {
alert ("Vuelta numero " + i + " de parseo");
     if (username[i] == "a" || username[i] == "b" || username[i] == "c" || username[i] == "d" || username[i] == "e" ||  username[i] == "f" || username[i] == "g" || username[i] == "h" || username[i] == "i" || username[i] == "j" ||   username[i] == "k" || username[i] == "l" || username[i] == "m" || username[i] == "n" || username[i] == "ñ" || username[i] == "o" || username[i] == "p" || username[i] == "q" || username[i] == "r" || username[i] == "s" ||  username[i] == "t" || username[i] == "u" || username[i] == "v" || username[i] == "w" || username[i] == "x" ||   username[i] == "y" || username[i] == "z" || username[i] == "A" || username[i] == "B" || username[i] == "C" || username[i] == "D" || username[i] == "E" || username[i] == "F" || username[i] == "G" || username[i] == "H" ||  username[i] == "I" || username[i] == "J" || username[i] == "K" || username[i] == "L" || username[i] == "M" ||   username[i] == "N" || username[i] == "Ñ" || username[i] == "O" || username[i] == "P" || username[i] == "Q" ||  username[i] == "R" || username[i] == "S" || username[i] == "T" || username[i] == "U" || username[i] == "V" ||  username[i] == "W" || username[i] == "X" || username[i] == "Y" || username[i] == "Z" || username[i] == "0" ||   username[i] == "1" || username[i] == "2" || username[i] == "3" || username[i] == "4" || username[i] == "5" || username[i] == "6" || username[i] == "7" || username[i] == "8" || username[i] == "9" || username[i] == "_" ||  username[i] == "#" || username[i] == "@" || username[i] == "$" || username[i] == "^" || username[i] == "&" ||   username[i] == "." || username[i] == " " || username[i] == "*" || username[i] == "," || username[i] == "×" || username[i] == "÷" || username[i] == "[" || username[i] == "]" || username[i] == "€" || username[i] == "£" ||  username[i] == "¥" || username[i] == "♡" || username[i] == "☆")
     {
      username_parsed+=username[i];
     }
     
     else
     {
     alert("Has introducido un caracter invalido: " + username[i]);
     }

  }
   alert("Usuario: " + username_parsed);
}
(SCRIPT)

</body>
</html>


Creo que buscas algo así. Cambia las etiquetas (SCRIPT) y (/SCRIPT) Por las originales que me salta la protección del foro.

En el form, en el botón submit añadí onclick="ObtenerInput();"

Al apretar el botón se llama a la función javascript. Se ejecutará lo que haya dentro de la función. Aquí la declaro:
Citarfunction ObtenerInput()
{
username = document.getElementById("username");
userpassword = document.getElementById("userpassword");
username = username.value;
userpassword = userpassword.value;

alert("Obtenido Usuario " + username);

Parsear();
}

Con username = document.GetElementById("");
Obtengo el objeto del campo del formulario USUARIO. Y este objeto lo guardo en una variable de javascript.

Con username = username.value; Accedo al nuevo contenido guardado para obtener el valor, es decir, lo que introduce el usuario en campo USUARIO del formulario.

Al final llamo a otra función Parse(); que se asegura que no se reflejen caracteres peligrosos en la web a través de introducirlos directamente en el formulario. Sigue habiendo más vulnerabilidades que se pueden explotar y desde otros sitios.

En las multiples comprobaciones se comprueba que el caracter introducido sea uno de los que yo considero que no son peligrosos. Y en caso de ser un caracter no peligroso se añade a la variable final que almacenará el USUARIO.

Aquí puedes probar el el login live por si es eso lo que buscas. http://stringmanolo.byethost12.com/RetoA.html

zellion

Buenas String Manolo:

Claro, el problema es que no es mi página web. La idea es hacer algo parecido a lo que hacen en el siguiente link: https://developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions/Tu_primera_WebExtension

En el link anterior se crea una extensión para firefox que hace un borde rojo en la ventana cuando se visita la página web de "mozilla.org". El tema es que había pensado, en crear un botón en la barra de herramientas, como hacen en adblock, y que se ejecute código javascript para verificar, por ejempo, que un campo "textbox" este vacío.

Creo que el código que me has facilitado podría ayudarme, le voy a echar un vistazo para coger ideas.

Muchas gracias.

Un saludo.

@XSStringManolo

Es exactamente algo como addblock lo que necesitas. Es exactamente lo que tenía en mente cuando te comenté lo de la extensión. Igual este artículo te es útil de alguna manera puedes hablarme por privado si no das resuelto alguna parte del proceso. Me encontré varias protecciones. En la cloud de mozilla para hostear la extensión, en Androids con apps ya firmadas, el propio android con fuentes de origen desconocido, etc. Pero puedes correrlo como "dev" si es para uso personal y sin más. Si es para distribuir es más complejo. https://foro.elhacker.net/foro_libre/74_millones_de_usuarios_infectados_con_bundled_software_parte_del_proceso-t498471.0.html

Héchale un ojo al último source de add block plus. Te sirve ya sea para usar ya esa extensiòn o para ejemplo de una nueva. El código es algo pesado para comértelo de golpe, pero está bien comentado y organizado. Si no entiendes algo importante del código pregúntame que lo tengo chapado de memoria xD

zellion

Perfecto, es justo lo que buscaba. Le he echado un vistazo al otro post y está muy bien, voy a descargar el código de adblock para revisar su código.

Gracias  ;-) ;-).