[Tips] ASP.NET 4.0 ValidateRequestMode y TinyMCE

Hola que tal?, este es un tip corto, acerca de las validaciones sobre los campos de texto, específicamente este ejemplo va enfocado a las cajas que permiten el ingreso de HTML, por ejemplo:

image

En la descripción podríamos agregar un texto con HTML, en este ejemplo agregamos developer entre las etiquetas <strong>, al presionar Enviar ASP.NET detecta el posiblemente peligroso post y por seguridad nos envía la excepción:

image

Típicamente lo que hacemos es agregar en la directivas de página la opción:

ValidateRequest=”false”

que básicamente deshabilita la validación del request, pero acá está el problema, y que pasa con nombre u otros campos que si necesitan validación?, con ValidateRequest=”false” estamos diciendo “no valides ningún dato de formulario en el post”, no muy bueno verdad?

Ahora  bien, en ASP.NET 4 esto se resuelve de la siguiente manera:

<asp:TextBox ID=”txDescripcion” ValidateRequestMode=”Disabled” runat=”server” Height=”104px” TextMode=”MultiLine”  Width=”224px”></asp:TextBox>

Ahora solo en el campo que no queremos que exista una validación por un post sospechoso de XSS, agregaremos ValidateRequestMode=”Disabled” y listo! , ahora podemos setear nuevamente el ValidateRequest en true o simplemente eliminar la opción ya que es true por default.

Para hacerlo un poco más entretenido, podemos utilizar TinyMCE para agregar fácilmente un Editor Javascript WYSIWYG, para saber más sobre TinyMCE puedes ir a su website:

http://www.tinymce.com/index.php

La instalación en ASP.NET es muy sencilla, primero en el proyecto pinchas con botón derecho y vas a la opción de administrar los paquetes NuGet:

image

Luego elijes TinyMCE:

image

Vas a ver que en el archivo packages.config va a aparecer como instalado:

<packages>

  <package id=TinyMCE version=3.4.5 />

</packages>

Lo que hizo fue descargar el plugin en la carpeta Script:

image

Luego para incluirla solamente agregas los Script y en el evento Ready le asignas al textarea el plugin:

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

<script src=”Scripts/tinymce.3.4.5/tiny_mce.js” type=”text/javascript”></script>

  <script type=”text/javascript”>

        $(document).ready(function (e) {

            tinymce.init({ mode:“textareas”});

        });

</script>

image

Y listo!mucho mejor, como te dije puedes ir a la documentación de TinyMCE para ver las múltiples configuraciones que se pueden realizar con este excelente plugin

Espero que te sea de utilidad,

@chalalo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *