Share via

HTML 편집기 컨트롤을 사용할 어떻게 할까요? 있나요? (VB)

  • 아티클

작성자: Microsoft

HTMLEditor는 도구 모음의 단추를 통해 HTML 콘텐츠를 쉽게 만들고 편집할 수 있는 ASP.NET AJAX 컨트롤입니다.

이 자습서의 목표는 AJAX 컨트롤 도구 키트에 포함된 HTML 편집기 컨트롤의 개요를 제공하는 것입니다. HTML 편집기에서는 글꼴 크기 변경, 글꼴 선택, 배경색 변경, 전경색 수정, 링크 추가, 이미지 추가, 텍스트 맞춤 변경, 잘라내기, 복사 및 붙여넣기 작업 수행 옵션을 포함합니다(그림 1 참조).

HTML 편집기

그림 01: HTML 편집기(전체 크기 이미지를 보려면 클릭)

HTML 편집기를 사용하면 디자인 모드를 사용하여 콘텐츠를 입력하거나 HTML을 직접 입력할 수 있습니다. HTML 콘텐츠를 미리 보는 옵션도 제공됩니다(그림 2 참조).

디자인, HTML 및 미리 보기 단추

그림 02: 디자인, HTML 및 미리 보기 단추(전체 크기 이미지를 보려면 클릭)

이 자습서에서는 HTML 편집기를 표시하는 방법, HTML 편집기에서 표시되는 도구 모음 단추를 사용자 지정하는 방법 및 사이트 간 스크립팅 공격을 방지하는 방법을 알아봅니다.

HTML 편집기 표시

ASP.NET 페이지에서 HTML 편집기를 사용하려면 먼저 ScriptManager 컨트롤을 페이지에 추가해야 합니다. ScriptManager 컨트롤은 Visual Studio/Visual Web Developer Express 도구 상자의 AJAX 확장 탭 아래에 있습니다.

페이지의 다른 컨트롤 앞에 ScriptManager 컨트롤을 페이지 맨 위에 배치해야 합니다. 예를 들어 여는 서버 쪽 <양식> 태그 바로 아래에 배치할 수 있습니다.

HTML 편집기 컨트롤은 나머지 AJAX 컨트롤 도구 키트 컨트롤과 함께 도구 상자에 있습니다. 편집기 컨트롤의 이름이 지정됩니다(그림 3 참조).

HTML 편집기 컨트롤

그림 03: HTML 편집기 컨트롤(전체 크기 이미지를 보려면 클릭)

HTML 편집기를 페이지로 끌어온 후 속성 시트에서 해당 속성을 설정할 수 있습니다. 예를 들어 일반적으로 Width 및 Height 속성을 설정하려고 합니다. 목록 1에는 HTML 편집기가 포함된 ASP.NET 페이지의 원본이 포함되어 있습니다.

목록 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 편집기를 파생시켜 도구 모음 단추를 사용자 지정합니다. 예를 들어 목록 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 폴더가 없으면 폴더를 추가하기만 하면 됩니다.

사용자 지정 편집기를 만든 후 일반 HTML 편집기를 추가하는 것과 같은 방식으로 ASP.NET 페이지에 추가할 수 있습니다(목록 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를 사용하여 사용자 암호 또는 기타 중요한 정보를 도용할 수 있습니다.

일반적으로 웹 페이지에 표시하기 전에 사용자로부터 검색한 입력을 HTML 인코딩하여 XSS 공격을 무산할 수 있습니다. 그러나 HTML 편집기의 출력을 인코딩하는 HTML은 스크립트> 태그를 인코딩<할 뿐만 아니라 모든 HTML 태그도 인코딩합니다. 즉, 글꼴 유형, 글꼴 크기 및 배경색과 같은 모든 서식이 손실됩니다.

암호, 신용 카드 번호 및 사회 보장 번호와 같은 사용자로부터 중요한 정보를 수집하는 경우 HTML 편집기를 사용하여 사용자로부터 검색한 인코딩되지 않은 콘텐츠를 표시해서는 안 됩니다. HTML 콘텐츠를 다시 표시하지 않거나 신뢰할 수 있는 당사자가 HTML 콘텐츠를 웹 사이트에 제출하는 경우에만 HTML 편집기를 사용해야 합니다.

예를 들어 블로그 애플리케이션을 만들고 있다고 상상해 보세요. 이 경우 블로그 게시물을 작성할 때 HTML 편집기를 사용하는 것이 좋습니다. 당신은 블로그 게시물을 제출하는 유일한 사람이며, 아마도, 당신은 악성 JavaScript를 제출하지 자신을 신뢰할 수 있습니다. 그러나 익명 사용자가 댓글을 게시할 수 있도록 허용하는 경우 HTML 편집기를 사용하는 것은 의미가 없습니다. 사용자가 암호와 같은 중요한 정보를 제출하는 경우 특히 주의해야 합니다. 악의적인 사용자가 암호를 도용하기 위한 올바른 JavaScript가 포함된 댓글을 게시할 수 있습니다.

요약

이 자습서에서는 AJAX 컨트롤 도구 키트에 포함된 HTML 편집기 컨트롤에 대한 간략한 개요를 제공했습니다. HTML 편집기를 사용하여 사용자의 풍부한 콘텐츠를 수락하고 서버에 콘텐츠를 제출하는 방법을 알아보았습니다. HTML 편집기에서 표시하는 도구 모음 단추를 사용자 지정하는 방법도 설명했습니다. 마지막으로 HTML 편집기를 사용하여 잠재적으로 악의적인 입력을 수락할 때 사이트 간 스크립팅 공격을 방지하는 방법을 알아보았습니다.

이전