Как использовать элемент управления редактора HTML? (VB)

От Майкрософт

HTMLEditor — это элемент управления AJAX ASP.NET, позволяющий легко создавать и изменять HTML-содержимое с помощью кнопок на панели инструментов.

Цель этого руководства — предоставить обзор элемента управления редактора HTML, включенного в набор средств управления AJAX. Редактор HTML включает параметры изменения размера шрифта, выбора шрифта, изменения цвета фона, изменения цвета переднего плана, добавления ссылок, добавления изображений, изменения выравнивания текста и выполнения операций вырезания, копирования и вставки (см. рис. 1).

Рис. 01. Редактор HTML (щелкните, чтобы просмотреть изображение полного размера)

Редактор HTML позволяет вводить содержимое с помощью режима конструктора или вводить HTML напрямую. Вам также предоставляется возможность предварительного просмотра HTML-содержимого (см. рис. 2).

Рис. 02. Кнопки конструктора, HTML и предварительного просмотра (щелкните, чтобы просмотреть изображение полного размера)

В этом руководстве вы узнаете, как отобразить html-редактор, настроить кнопки панели инструментов, отображаемые в редакторе HTML, и как избежать атак между сайтами.

Отображение редактора HTML

Прежде чем использовать редактор HTML на странице ASP.NET, необходимо сначала добавить элемент управления ScriptManager на страницу. Элемент управления ScriptManager находится под вкладкой "Расширения AJAX" на панели элементов Visual Studio/Visual Web Developer Express.

Элемент управления ScriptManager следует разместить в верхней части страницы перед любыми другими элементами управления на странице. Например, его можно поместить непосредственно под открывающим тегом формы< на стороне >сервера.

Элемент управления редактора HTML находится на панели элементов с остальными элементами управления AJAX Control Toolkit. Он называется элементом управления "Редактор" (см. рис. 3).

Рис. 03. Элемент управления редактора HTML (щелкните, чтобы просмотреть изображение полного размера)

После перетаскивания редактора HTML на страницу можно задать его свойства на листе свойств. Например, обычно требуется задать свойства Width и Height. В списке 1 содержится источник страницы ASP.NET, содержащей редактор HTML.

Листинг 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>

Страница в Листинге 1 содержит элемент управления HTML-редактором, элемент управления Button и литерал. При нажатии кнопки содержимое редактора HTML отображается в элементе управления Литерал (см. рисунок 4).

Рис. 04. Отправка формы с помощью редактора HTML (щелкните, чтобы просмотреть изображение полного размера)

Свойство "Содержимое редактора HTML" используется для извлечения HTML-содержимого, введенного в редактор HTML. Помните, что это html-содержимое может содержать JavaScript. В следующем разделе мы обсудим, как предотвратить атаки инъекции JavaScript.

Вы можете точно настроить, какие кнопки отображаются в редакторе. Например, может потребоваться удалить вкладку HTML, чтобы запретить пользователям переключение редактора HTML в режим HTML. Кроме того, может потребоваться удалить раскрывающийся список размера шрифта, чтобы запретить пользователям создавать слишком большой текст в сообщении на форуме (см. рисунок 5).

Рис. 05. Настраиваемый редактор HTML (щелкните, чтобы просмотреть изображение полного размера)

Вы настраиваете кнопки панели инструментов путем получения нового HTML-редактора из базового класса Редактора. Например, настраиваемый редактор в списке 2 содержит только кнопки панели инструментов для жирного шрифта и курсивного. Все остальные кнопки панели инструментов были удалены. Кроме того, вкладка HTML была удалена из нижней части редактора (но вкладки конструктора и предварительного просмотра по-прежнему существуют).

Описание 2 — App_Code\CustomEditor.vb

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

Класс в списке 2 необходимо добавить в папку App_Code, чтобы класс скомпилировался автоматически. Если папка App_Code не существует на веб-сайте, можно просто добавить папку.

После создания пользовательского редактора его можно добавить на страницу ASP.NET так же, как и при добавлении обычного HTML-редактора (см. описание 3).

Листинг 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>

Предотвращение атак межсайтового скриптинга (XSS)

Всякий раз, когда вы принимаете входные данные от пользователя и повторно воспроизводите входные данные на веб-сайте, вы потенциально открываете свой веб-сайт для атак на межсайтовые скрипты (XSS). В теории злоумышленник может отправить код JavaScript, который выполняется при повторном воспроизведении входных данных. JavaScript можно использовать для кражи паролей пользователей или других конфиденциальных данных.

Как правило, вы можете победить атаки XSS путем кодировки HTML независимо от того, какие входные данные вы извлекаете от пользователя, прежде чем отображать его на веб-странице. Однако кодирование HTML выходных данных редактора HTML не только кодирует <теги скриптов> , но и кодирует все теги HTML. Другими словами, вы потеряете все форматирование, например тип шрифта, размер шрифта и цвет фона.

Если вы собираете конфиденциальную информацию от пользователей, таких как пароли, номера кредитной карты и номера социального страхования, то не следует отображать незакодированное содержимое, полученное пользователем с помощью редактора HTML. Редактор HTML следует использовать только в ситуациях, когда вы не редизируете HTML-содержимое, или HTML-содержимое отправляется на веб-сайт доверенным лицом.

Представьте себе, например, что вы создаете приложение блога. В этой ситуации при создании записей блога имеет смысл использовать редактор HTML. Вы единственный, кто отправляет запись блога и, по всей вероятности, вы можете доверять себе, что не отправите вредоносный JavaScript. Однако, когда анонимным пользователям разрешено оставлять комментарии, использование HTML-редактора не имеет смысла. В ситуациях, когда пользователи могут отправлять конфиденциальную информацию, например пароли, следует быть особенно осторожным. Возможно, злоумышленник может опубликовать комментарий, содержащий правильный JavaScript для кражи пароля.

Сводка

В этом руководстве вы получили краткий обзор элемента управления редактора HTML, включенного в набор средств управления AJAX. Вы узнали, как использовать редактор HTML для приема содержимого из пользователя и отправки содержимого на сервер. Мы также обсудили, как настроить кнопки панели инструментов, отображаемые редактором HTML. Наконец, вы узнали, как избежать атак межсайтовых сценариев при использовании редактора HTML для принятия потенциально вредоносных входных данных.

Предыдущее

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2026-03-27