4

Quisiera agregar una validación adicional a mi contador de caracteres, esto con el fin de evitar que se inserte en mi campo un ataque de cross site scripting. Actualmente cuento con un limite de caracteres de 200 y una función realizada con la ayuda de JQuery.

Aquí el código HTML con el cual genero mi textarea

<div class="form-group">
                    <label for="exampleInputEmail1" style="font-size: 15px;">Mensaje</label>
                    <textarea type="text" maxlength="200" class="form-control" id="txtMessage" placeholder="Escribe tu mensaje" rows="4" cols="50"></textarea>
                    <span class="pull-right label label-default" id="count_message"></span>
                </div>

La siguiente es la función que utilizo con la ayuda de JQuery

var text_max = 200;
        $('#count_message').html('0 / ' + text_max);

        $('#txtMessage').keyup(function () {
            var text_length = $('#txtMessage').val().length;
            var text_remaining = text_max - text_length;

            $('#count_message').html(text_length + ' / ' + text_max);
        });

La función como tal me evita insertar mas de 200 caracteres sin problema

introducir la descripción de la imagen aquí

Pero lo que quisiera evitar y por lo que estoy buscando una validación adicional es que lleguen a cambiar el código HTML de esta manera desde el DevTools de mi navegador.

introducir la descripción de la imagen aquí

Si se fijan en el maxlength le quite su atributo de 200 lo cual me va a permitir seguir insertando caracteres de esta forma

introducir la descripción de la imagen aquí

Lo cual se puede llegar a insertar un código cross site scripting y quiero evitar esto.

Ademas de esto cuento con una función hecha en un Servicio Web ASP.NET .asmx con la ayuda de C# el cual enviara este mensaje que se introduce en dicho campo a un correo utilizando un Store Procedure en el cual lo uso con la ayuda de la función de envió de correos sp_send_dbmail de SQLServer.

La función que utilizo de C# es la siguiente:

public object Contactar(string Message)
        {
            List<ResultadoServ> ResultadoServ = new List<ResultadoServ>();
            string cs = ConfigurationManager.ConnectionStrings["BDTest"].ConnectionString;
            using (SqlConnection con = new SqlConnection(cs))
            {
                SqlCommand cmd = new SqlCommand("SP_Contactar", con);
                cmd.CommandType = CommandType.StoredProcedure;              
                cmd.Parameters.AddWithValue("@Message", Message);


                con.Open();
                bool proc = Convert.ToBoolean(cmd.ExecuteNonQuery());
                if (proc)
                {
                    ResultadoServ Validar = new ResultadoServ();
                    Validar.Resultado = "true";
                    ResultadoServ.Add(Validar);
                }
                else
                {
                    ResultadoServ Validar = new ResultadoServ();
                    Validar.Resultado = "false";
                    ResultadoServ.Add(Validar);
                }


            }
            JavaScriptSerializer js = new JavaScriptSerializer();        
            var data = js.Serialize(ResultadoServ);
            return data;

        }

Desconozco que se pueda hacer una validación adicional desde esta función, adicional a esto estoy controlando la cantidad de caracteres desde el Store Procedure limitando a 200 caracteres la cadena de tipo Varchar

Actualización:

Siguiendo alguna de las respuestas que me comentaron aquí, aun sigo con el dilema de que me puedan realizar un ataque de cross site scripting, la validación JQuery que se encuentra en la respuesta me funciona de momento bien hasta el HTML, me explico de la siguiente manera así:

Puedo cambiar en el Devtools el maxlenght de mi textarea y no me va a permitir escribir mas caracteres, que era lo que estaba presentando en mi problema inicial.

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Lo anterior se controla por la validación del JQuery.

Aquí viene lo bueno.

Ahora vamos a buscar dicha validación en mi archivo .js tambien por el Devtools y le vamos a asignar un valor diferente a la variable text_max por medio de la consola. Así de la siguiente manera:

introducir la descripción de la imagen aquí

Volviendo nuevamente a HTML y cambiando el valor de maxlenght.

introducir la descripción de la imagen aquí

Intentamos escribir en el campo texto para ver lo que sucede:

introducir la descripción de la imagen aquí

Como ven al cambiar el valor de la variable text_max y maxlenght vamos a seguir siendo vulnerable a un ataque cross site scripting. Quisiera controlar por todos los medios que se pueda acceder insertar caracteres adicionales en dicho campo.

7
  • Hola, eso está hecho en asp.net o asp mvc?
    – Japv
    el 19 mar. 2021 a las 16:53
  • 8
    Todas las validaciones y mensajes de error que implementes en el font-end solo sirven para mejorar la experiencia del usuario (UX). Si lo que realmentes estas buscando es dar seguridad, lo tenes que hacer en tu back-end. Con programas como Postman podes simular solicitudes (GET, POST, etc.) a cualquier endpoint y las validaciones en Javascript no jugarían en lo absoluto.
    – Marcos
    el 19 mar. 2021 a las 16:57
  • @Japv Hola, esta hecho en ASP.NET
    – John Doe
    el 19 mar. 2021 a las 17:59
  • @Marcos algún ejemplo para realizar la validación en el back, con respecto a mi función que tengo en mi pregunta ?
    – John Doe
    el 19 mar. 2021 a las 18:00
  • 1
    Creo que no tienes muy claro lo que es XSS, te recomiendo leer: cross site scripting (en inglés), o cross site scripting (en español)
    – jachguate
    el 19 mar. 2021 a las 19:08

5 respuestas 5

10
+100

Siempre tenes que validar los inputs desde el backend, no podes confiar en lo que el frontend te manda porque al estar al alcance del usuario puede estar manipulado. Dicho esto podes hookear el evento keydown del input y controlar la cantidad de caracteres ahí (es importante que sea el keydown y no el keyup para prevenir que el caracter se escriba).

$('#txtMessage').keydown(function (e) {
    var text_length = $('#txtMessage').val().length;
    var limit_reached = text_length >= text_max;
    var is_not_backspace = e.which !== 8;

    /* agregue la condición del backspace para que se pueda borrar,
       sino una vez que alcanzaba el límite no te dejaba ni siquiera borrar
    */
    if (limit_reached && is_not_backspace) {
        return false;
    }
});

Pd: todavía se puede copiar y pegar en el input y saltarse la restricción, te dejo de tarea hookear el evento de paste y hacer lo mismo.

Actualización: Del lado del backend en tu función es tan fácil como truncar el mensaje.

public object Contactar(string Message)
    {
        List<ResultadoServ> ResultadoServ = new List<ResultadoServ>();
        string cs = ConfigurationManager.ConnectionStrings["BDTest"].ConnectionString;
        using (SqlConnection con = new SqlConnection(cs))
        {
            SqlCommand cmd = new SqlCommand("SP_Contactar", con);
            cmd.CommandType = CommandType.StoredProcedure;
            
            /* acá antes de guardar el string lo truncas y listo,
               por más que te manden 800 caracteres sólo guardas los primeros 200
            */
            string truncatedMessage = Message.Substring(0, 200);
            cmd.Parameters.AddWithValue("@Message", truncatedMessage);
9
  • Probando tu posible solución ya no me muestra el contador de caracteres ubicado en la parte inferior del textarea.
    – John Doe
    el 11 mar. 2021 a las 18:27
  • Esta respuesta solo es una función de JQuery para permitir cierto limite de caracteres, en mi pregunta ya hago uso de una función.
    – John Doe
    el 11 mar. 2021 a las 18:47
  • no la tenes que reemplazar por la tuya, la tenes que poner abajo de la tuya en tu código. Con la tuya contas los carateres, con esta prevenís que puedan escribir más de X caracteres sin importar el atributo maxlength. Tenes que usar ambas porque hookean eventos distintos para distinto fin el 11 mar. 2021 a las 20:13
  • Cumplí con tu tarea de hookear el evento, revisa mi ultima actualización
    – John Doe
    el 13 mar. 2021 a las 21:39
  • Podrías ofuscar y minificar el código para que no sea legible con algo como obfuscator.io pero la mayoría de esas técnicas son reversibles, como te comente al principio lo mejor es validar siempre desde el servidor porque el cliente es manipulable y su data nunca debe ser confiable. el 14 mar. 2021 a las 0:36
0

Puedes agregar una validación adicional en la función de jQuery, en donde utilizas el valor que tiene text_max y no el del textArea.

HTML

<div class="form-group">
    <label for="exampleInputEmail1" style="font-size: 15px;">Mensaje</label>
    <textarea type="text" maxlength="200" class="form-control" id="txtMessage" placeholder="Escribe tu mensaje" rows="4" cols="50"></textarea>
    <span class="pull-right label label-default" id="count_message"></span>
</div>

jQuery

var text_max = 100;//Trabajas la validación con este valor
    $('#count_message').html('0 / ' + text_max);

    $('#txtMessage').keypress(function () {
        var text_length = $('#txtMessage').val().length;
        var text_remaining = text_max - text_length;
        
        if(text_length >= text_max) {//Validad si es mayor ya no permite escribir.
            event.preventDefault();
        }
        

        $('#count_message').html(text_length + ' / ' + text_max);
    });

$('#txtMessage').keyup(function () {//Si presionas el backspace se actualiza el contador
        var text_length = $('#txtMessage').val().length;
        var text_remaining = text_max - text_length;            

        $('#count_message').html(text_length + ' / ' + text_max);
    });

El ejemplo :JSFiddle

8
  • Con esta validación al momento de eliminar caracteres del campo el contador se queda estático y se vuelve a actualizar hasta el momento que se vuelve a escribir, ademas que al llegar al carácter 100 se queda bloqueado y no deja eliminar
    – John Doe
    el 11 mar. 2021 a las 19:47
  • El problema creo que debe estar en la validación adicional que agregaste sobre si es mayor ya no permite escribir, al llegar a su limite tampoco permite dar backspace
    – John Doe
    el 11 mar. 2021 a las 19:58
  • Está editada la respuesta; con la función keyup reconoce el backspace.
    – Bicho
    el 11 mar. 2021 a las 21:00
  • Con tu respuesta editada si funciono, ahora tengo una duda y es como puedo hacer uso de dicho JQuery en mi archivo HTML sin tenerlo que agregar en etiqueta <script> dentro del HTML ?
    – John Doe
    el 12 mar. 2021 a las 18:43
  • Puedes agregar el código en un archivo .js y agregar dentro de la etiqueta <head> la ruta a ese archivo.
    – Bicho
    el 12 mar. 2021 a las 19:26
0

El tipo de ataque que quieres prevenir, definitivamente debes hacerlo con una sanitización del request en el backend, porque si está vulnerable hay muchas formas de simular el request que envía tu formulario y saltarse todas tus validaciones en javascript. Pero de todas formas es recomendable hacer validaciones tanto en backend como en frontend.

Lo que puedes hacer es que al momento de iniciar el submit de tu formulario, capturar el evento y hacer las validaciones antes de enviarlo:

$('#myform').on('submit',function(event){
    // detienes el comportamiento por defecto del submit
    event.preventDefault();

    // hacer validaciones, como revisar el máximo del input
    // ...

    if (isEverythingOK) {

        // Continuarcon el evento
        event.currentTarget.submit();

    } else {

      // Tratamiento de los errores de validación.

    }
});
2
  • Como puedo hacer uso de este request ya sea con la función que tengo en mi pregunta de C# o con algunas de las respuestas que ya existen aquí ?
    – John Doe
    el 24 mar. 2021 a las 14:27
  • Por request, en este caso me refiero al Message que recibes en tu script C#. En general es la petición, como la de guardar ese mensaje en la BD. En la respuesta de gauchoscript te deja un ejemplo donde trunca el mensaje a 200 caracteres. Esa es una manera de "sanitizar" el request. Pero ahí debes decidir tu qué es lo que quieres lograr. En ese caso solo evitas que se supere el máximo. Si quieres hacer más validaciones, como que no esté vacío o que no contenga ciertos carateres especiales, debes trabajar cada validación antes de intentar ingresar el mensaje a la BD. el 26 mar. 2021 a las 10:54
0

Puedes realizar validaciones dentro de tu backend

  1. Crear una validación de tu txtArea, antes de llamar a tu Contactar(mensaje ) valida si tu txtArea es mayor la cantidad de caracteres que desees que sea el máximo y retornar algo negativo para que tu Front te salga una alerta que txtArea sobrepasa la cantidad de caracteres

  2. No es recomendable hacer validación en procedimientos almacenados pero puedes validar que tu campo Message si sobrepasa los caracteres realiza un RAISERROR('TU MENSAJE'), esto hará que tu método de c# te mande al catch

public object Contactar(string Message)
{
    List<ResultadoServ> ResultadoServ = new List<ResultadoServ>();
    string cs = ConfigurationManager.ConnectionStrings["BDTest"].ConnectionString;
    try
    {
        if(Message.Length > 200) { throw new Exception("El mensaje debe ser mejor a 200")}
        using (SqlConnection con = new SqlConnection(cs))
        {
            SqlCommand cmd = new SqlCommand("SP_Contactar", con);
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@Message", Message);


            con.Open();
            bool proc = Convert.ToBoolean(cmd.ExecuteNonQuery());
            if (proc)
            {
                ResultadoServ Validar = new ResultadoServ();
                Validar.Resultado = "true";
                ResultadoServ.Add(Validar);
            }
            else
            {
                ResultadoServ Validar = new ResultadoServ();
                Validar.Resultado = "false";
                ResultadoServ.Add(Validar);
            }


        }
        JavaScriptSerializer js = new JavaScriptSerializer();
        var data = js.Serialize(ResultadoServ);
        return data;
    }
    catch (Exception ex)
    {
       
        return null;
    }
}
2
  • Como puedo hacer uso de esta validación con la función que tengo en mi pregunta de C#?
    – John Doe
    el 24 mar. 2021 a las 17:06
  • actualice mi respuesta , esta la variación
    – Samuel
    el 24 mar. 2021 a las 17:23
0

Lo que yo haria es un js hagas un slice de los 200 primeros caracteres, dentro de una funcion asi no se puede cambiar con la consola, seria algo tipo:

    **

<div class="form-group">
                    <label for="exampleInputEmail1" style="font-size: 15px;">Mensaje</label>
                    <textarea type="text" maxlength="200" class="form-control" id="txtMessage"  placeholder="Escribe tu mensaje" rows="4" cols="50"></textarea>
                    <span class="pull-right label label-default" id="count_message"></span>
                </div>
<script>

    var text =document.getElementById("txtMessage")
    var text_change=()=>{
        if(text.value.length>200){
            text.value=text.value.slice(0,200)
           
        }
        var num = document.getElementById("count_message")
        num.innerHTML= text.value.length+"/200"
    }
    function load(){
        var num = document.getElementById("count_message")
        num.innerHTML= text.value.length+"/200"
        text.addEventListener("change",text_change,false)
    }
    document.addEventListener("DOMContentLoaded", load, false);
</script>

        **
   

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.