Разделы справки использовать элемент управления редактора HTML? Visual Basic

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

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

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

Редактор HTML

Рис. 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. Он называется элементом управления Editor (см. рис. 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, Элемент управления Кнопка и Литерал. При нажатии кнопки содержимое редактора HTML отображается в элементе управления Литерал (см. рис. 4).

Отправка формы с помощью редактора HTML

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

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

Настройка панели инструментов редактора HTML

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

Настраиваемый редактор HTML

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

Вы настраиваете кнопки панели инструментов, наследуя новый редактор HTML из базового класса Editor. Например, пользовательский редактор в листинге 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 для принятия потенциально вредоносных входных данных.