¿Cómo se usa el control de editor HTML? (C#)

  • Artículo

de Microsoft

HTMLEditor es un control AJAX de ASP.NET que permite crear y editar fácilmente contenidos HTML a través de los botones de una barra de herramientas.

El objetivo de este tutorial es ofrecer información general sobre el control de editor HTML incluido con el kit de herramientas de control de AJAX. El editor HTML incluye opciones para cambiar el tamaño de fuente, seleccionar una fuente, cambiar el color de fondo, modificar el color de primer plano, agregar vínculos, agregar imágenes, cambiar la alineación del texto y ejecutar las funciones de cortar, copiar y pegar (véase la figura 1).

The HTML Editor

Figura 01: El editor HTML (haga clic para ver la imagen en tamaño completo)

El editor HTML permite introducir contenidos mediante un modo de diseño o mediante escritura directa de código HTML. También se ofrece la opción de obtener una vista previa del contenido HTML (véase la figura 2).

Design, HTML, and Preview buttons

Figura 02: Botones de diseño, HTML y vista previa (haga clic para ver la imagen en tamaño completo)

En este tutorial, aprenderá a mostrar el editor HTML, a personalizar los botones de la barra de herramientas que aparecen en el editor HTML y a evitar ataques de scripting entre sitios.

Visualización del editor HTML

Para poder usar el editor HTML en una página de ASP.NET, primero debe agregar un control ScriptManager a la página. El control ScriptManager se encuentra debajo de la pestaña de extensiones de AJAX en el cuadro de herramientas de Visual Studio/Visual Web Developer Express.

Debe colocar el control ScriptManager en la parte superior de la página antes de cualquier otro control de la misma. Por ejemplo, puede colocarlo inmediatamente debajo de la etiqueta de <formulario> del servidor de apertura.

El control del editor HTML se encuentra en el cuadro de herramientas con el resto de los controles del kit de herramientas de control de AJAX. Se denomina «control del editor» (véase la figura 3).

The HTML Editor control

Figura 03: El control del editor HTML (haga clic para ver la imagen en tamaño completo)

Una vez que haya arrastrado el editor HTML a una página, puede establecer sus propiedades en la hoja de propiedades. Por ejemplo, es habitual querer establecer el valor de las propiedades de ancho y de alto. La lista 1 contiene el origen de una página de ASP.NET que contiene un editor HTML.

Lista 1: SimpleEditor.aspx

<%@ Page Language="C#" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit.HTMLEditor" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        ltlResult.Text = Editor1.Content;
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        
        <cc1:Editor 
            ID="Editor1" 
            Width="450px"  
            Height="200px"
            runat="server"/>
        <br />
        <asp:Button
            id="btnSubmit"
            Text="Submit"
            Runat="server" onclick="btnSubmit_Click" />
    
        <hr />
        <h1>You Entered:</h1>
        
        <asp:Literal
            id="ltlResult"
            Runat="server" />
    
    </div>
    </form>
</body>
</html>

La página de la lista 1 contiene un control de editor HTML, un control de botón y un control literal. Al hacer clic en el botón, el contenido del Editor HTML aparece en el control literal (véase la figura 4).

Submitting a form with an HTML Editor

Figura 04: Envío de un formulario con un editor HTML (haga clic para ver la imagen en tamaño completo)

La propiedad de contenido del editor HTML se usa para recuperar el contenido HTML escrito en el editor HTML. Tenga en cuenta que este contenido HTML puede contener JavaScript. En la sección siguiente, explicamos cómo se evitan los ataques por inyección de JavaScript.

Personalización de la barra de herramientas del editor HTML

Puede personalizar exactamente qué botones aparecen en el editor. Por ejemplo, puede ocurrir que desee quitar la pestaña HTML para evitar que los usuarios cambien el editor HTML al modo HTML. También es posible que quiera quitar la lista desplegable tamaño de fuente para evitar que los usuarios creen textos demasiados grandes en una publicación de mensajes de foro (véase la figura 5).

A customized HTML Editor

Figura 05: El editor HTML (haga clic para ver la imagen en tamaño completo)

Puede personalizar los botones de la barra de herramientas derivando un nuevo editor HTML de la clase básica del editor. Por ejemplo, el editor personalizado de la lista 2 solo contiene botones de barra de herramientas para las opciones de negrita y cursiva. Se han eliminado todos los demás botones de la barra de herramientas. Además, se ha retirado la pestaña HTML de la parte inferior del editor (pero las pestañas de diseño y vista previa permanecen).

Lista 2 - App_Code\CustomEditor.cs

using AjaxControlToolkit.HTMLEditor;

namespace MyControls
{
    public class CustomEditor : Editor
    {
        protected override void FillTopToolbar()
        {
            TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Bold());
            TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Italic());
        }

        protected override void FillBottomToolbar()
        {
            BottomToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.DesignMode());
            BottomToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.PreviewMode());        
        }
    }
}

Debe agregar la clase en la lista 2 a la carpeta App_Code para que la clase se compile automáticamente. Si no existe la carpeta App_Code en su sitio web, basta con que la añada.

Después de crear un editor personalizado, puede agregarlo a una página de ASP.NET de la misma manera que incorpora el editor HTML normal (véase la lista 3).

Lista 3 - ShowCustomEditor.aspx

<%@ Page Language="C#" %>
<%@ Register namespace="MyControls" tagprefix="custom" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Show Custom Editor</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    
    <custom:CustomEditor 
        Width="450px"  
        Height="200px"
        runat="server" />
    
    </div>
    </form>
</body>
</html>

Cómo evitar los ataques de scripts de sitios (XSS)

Siempre que acepta la entrada de un usuario y vuelve a mostrar lo introducido en su sitio web, este puede quedar expuesto a ataques de scripting entre sitios (XSS). En teoría, un hacker con intenciones aviesas podría enviar código JavaScript que se ejecuta al volver a mostrar lo introducido. Este código JavaScript podría usarse para robar contraseñas de usuario u otra información confidencial.

Normalmente, puede neutralizar los ataques XSS mediante la codificación HTML de toda entrada recuperada de un usuario antes de mostrarla en una página web. Sin embargo, la codificación HTML de salida del editor HTML no solo codificaría las <etiquetas de script>, sino todas las etiquetas HTML; esto supondría la pérdida de todo el formato, como el tipo y el tamaño de fuente y el color de fondo.

Si recopila información confidencial de los usuarios (como contraseñas, números de tarjeta de crédito y números de seguridad social), no debe mostrar contenido sin codificar que recupere de un usuario con el editor HTML. Solo debe usar el editor HTML en situaciones en las que no reproduzca el contenido HTML o este se reciba en su sitio web desde una entidad de confianza.

Por ejemplo, suponga que está compilando una aplicación de blog. En esta situación, tiene sentido usar el editor HTML al redactar entradas de blog, ya que solo usted envía entradas de blog y cabe suponer con relativa seguridad que usted no va a enviar código JavaScript malicioso. Sin embargo, no tiene sentido usar el editor HTML si permite que los usuarios anónimos publiquen comentarios. Debe tener especial cuidado en situaciones en las que los usuarios envíen información confidencial como contraseñas. Un usuario con intenciones aviesas podría publicar un comentario que contenga el código JavaScript necesario para robar una contraseña.

Resumen

En este tutorial, se le facilitado una breve introducción al control del editor HTML incluido en el kit de herramientas de control de AJAX. Ha aprendido a utilizar el Editor HTML para aceptar contenido enriquecido de un usuario y enviar el contenido al servidor. También se ha explicado cómo puede personalizar los botones de la barra de herramientas que se muestran en el editor de HTML. Por último, ha aprendido a evitar ataques de scripting entre sitios al usar el editor HTML para aceptar entradas potencialmente malintencionadas.

Siguiente