¿Cómo se usa el control HTML Editor? (VB)

  • Artículo

por Microsoft

HTMLEditor es un control de ASP.NET AJAX que permite crear y editar fácilmente contenido HTML mediante botones de una barra de herramientas.

El objetivo de este tutorial es ofrecer información general sobre el control HTML Editor incluido con el Kit de herramientas de control de AJAX. HTML Editor incluye opciones para cambiar el tamaño de la 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 operaciones de cortar, copiar y pegar (vea la figura 1).

The HTML Editor

Figura 01: HTML Editor (haga clic para ver la imagen a tamaño completo)

HTML Editor 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 (vea la figura 2).

Design, HTML, and Preview buttons

Figura 02: Botones Design, HTML y Preview (haga clic para ver la imagen a tamaño completo)

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

Visualización de HTML Editor

Para poder usar HTML Editor en una página ASP.NET, primero debe agregar a la página un control ScriptManager. El control ScriptManager se encuentra debajo de la pestaña 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. Por ejemplo, puede colocarlo inmediatamente debajo de la etiqueta <form> de apertura del lado servidor.

El control HTML Editor se encuentra en el cuadro de herramientas con el resto de los controles del Kit de herramientas de control de AJAX. Se llama HTML Editor (vea la figura 3).

The HTML Editor control

Figura 03: El control HTML Editor (haga clic para ver la imagen a tamaño completo)

Después de arrastrar el control HTML Editor a una página, puede establecer sus propiedades en la hoja de propiedades. Por ejemplo, normalmente es conveniente establecer el valor de las propiedades de ancho y de alto. La lista 1 contiene el origen de una página ASP.NET que contiene un control HTML Editor.

Lista 1: SimpleEditor.aspx

<%@ Page Language="VB" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc2" %>
<%@ 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 Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ltlResult.Text = Editor1.Content
    End Sub
</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 HTML Editor, un control Button y un control Literal. Al hacer clic en el botón, el contenido del control HTML Editor aparece en el control Literal (vea la figura 4).

Submitting a form with an HTML Editor

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

La propiedad Content de HTML Editor se usa para recuperar el contenido HTML escrito en HTML Editor. Tenga en cuenta que este contenido HTML puede contener JavaScript. En la sección siguiente, se describe cómo puede evitar ataques por inyección de JavaScript.

Personalización de la barra de herramientas de HTML Editor

Puede personalizar qué botones aparecen exactamente en el editor. Por ejemplo, podría ser conveniente quitar la pestaña HTML para evitar que los usuarios pasen HTML Editor al modo HTML. O bien, podría ser conveniente quitar la lista desplegable de tamaño de fuente para evitar que los usuarios creen texto demasiado grande en una publicación de mensajes de un foro (vea la figura 5).

A customized HTML Editor

Figura 05: Un control HTML Editor personalizado (haga clic para ver la imagen a tamaño completo)

Puede personalizar los botones de la barra de herramientas derivando un nuevo control HTML Editor de la clase base Editor. Por ejemplo, el editor personalizado de la lista 2 solo contiene botones de barra de herramientas para negrita y cursiva. Todos los demás botones de la barra de herramientas se han quitado. Además, la pestaña HTML se ha quitado de la parte inferior del editor (pero las pestañas Design y Preview siguen estando ahí).

Lista 2: App_Code\CustomEditor.cs

Imports AjaxControlToolkit.HTMLEditor

Namespace MyControls

    Public Class CustomEditor
        Inherits Editor
        Protected Overrides Sub FillTopToolbar()
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.Bold())
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.Italic())
        End Sub

        Protected Overrides Sub FillBottomToolbar()
            BottomToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.DesignMode())
            BottomToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.PreviewMode())
        End Sub
    End Class

End Namespace

Debe agregar la clase de la lista 2 a la carpeta App_Code para que la clase se compile automáticamente. Si la carpeta App_Code no existe en su sitio web, simplemente puede agregar la carpeta.

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

Lista 3: ShowCustomEditor.aspx

<%@ Page Language="VB" %>
<%@ 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 ID="CustomEditor1" 
        Width="450px"  
        Height="200px"
        runat="server" />
    
    </div>
    </form>
</body>
</html>

Cómo evitar ataques de scripting entre sitios (XSS)

Siempre que acepte la entrada de un usuario y vuelva a reproducir esa entrada en su sitio web, puede abrir su sitio web a ataques de scripting entre sitios (XSS). En teoría, un hacker malintencionado podría enviar código JavaScript que se ejecuta cuando se vuelve a reproducir la entrada. 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 de HTML Editor no solo codificaría las etiquetas <script>, sino todas las etiquetas HTML. En otras palabras, perdería todo el formato, como el tipo de fuente, 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 HTML Editor. Solo debe usar HTML Editor en situaciones en las que no reproduzca el contenido HTML o este se reciba en su sitio web desde una entidad de confianza.

Imagine, por ejemplo, que crea una aplicación de blog. En esta situación, tiene sentido usar HTML Editor 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 HTML Editor al permitir 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 ha facilitado una breve introducción al control HTML Editor incluido en el Kit de herramientas de control de AJAX. Ha aprendido a usar HTML Editor 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 muestra el control HTML Editor. Por último, ha aprendido a evitar ataques de scripting entre sitios al usar HTML Editor para aceptar entradas potencialmente malintencionadas.

Anterior