如何?使用 HTML 編輯器控制項嗎？ (C#)

發行項
07/13/2023

HTMLEditor 是 ASP.NET AJAX 控制項，可讓您透過工具列中的按鈕輕鬆建立和編輯 HTML 內容。

本教學課程的目標是提供 AJAX 控制項工具組隨附的 HTML 編輯器控制項概觀。 HTML 編輯器包含變更字型大小、選取字型、變更背景色彩、修改前景色彩、新增連結、新增影像、變更文字對齊方式，以及執行剪下、複製和貼上作業的選項， (請參閱圖 1) 。

圖 01：HTML 編輯器 (按一下以檢視完整大小的影像)

HTML 編輯器可讓您使用設計模式輸入內容，也可以直接輸入 HTML。您也可以選擇預覽 HTML 內容， (請參閱圖 2) 。

圖 02：按一下以檢視全大小影像) ， ([設計]、[HTML] 和 [預覽] 按鈕

在本教學課程中，您將瞭解如何顯示 HTML 編輯器、如何自訂出現在 HTML 編輯器中的工具列按鈕，以及如何避免跨網站腳本攻擊。

顯示 HTML 編輯器

您必須先將 ScriptManager 控制項新增至頁面，才能在 ASP.NET 網頁中使用 HTML 編輯器。 ScriptManager 控制項位於 Visual Studio/Visual Web Developer Express 工具箱中的 [AJAX 擴充功能] 索引標籤下方。

您應該在頁面上的任何其他控制項之前，將 ScriptManager 控制項放在頁面頂端。例如，您可以將它放在開啟伺服器端 < 表單 > 標籤的正下方。

HTML 編輯器控制項位於工具箱中，其餘的 AJAX 控制項工具組控制項。其名稱為編輯器控制項 (請參閱圖 3) 。

圖 03：HTML 編輯器控制項 (按一下以檢視完整大小的影像)

將 HTML 編輯器拖曳到頁面之後，您可以在屬性工作表中設定其屬性。例如，您通常想要設定 Width 和 Height 屬性。清單 1 包含包含 HTML 編輯器之 ASP.NET 網頁的來源。

清單 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>

清單 1 中的頁面包含 HTML 編輯器控制項、按鈕控制項和常值控制項。當您按一下按鈕時，HTML 編輯器的內容會出現在常值控制項中， (請參閱圖 4) 。

圖 04：使用 HTML 編輯器提交表單， (按一下即可檢視完整大小的影像)

HTML 編輯器內容屬性可用來擷取輸入至 HTML 編輯器的 HTML 內容。請注意，此 HTML 內容可以包含 JavaScript。在下一節中，我們將討論如何防止 JavaScript 插入式攻擊。

您可以完全自訂編輯器中顯示的按鈕。例如，您可能想要移除 HTML 索引標籤，以防止使用者將 HTML 編輯器切換為 HTML 模式。或者，您可能想要移除字型大小下拉式清單，以防止使用者在論壇訊息文章中建立過大的文字， (請參閱圖 5) 。

圖 05：自訂的 HTML 編輯器 (按一下即可檢視完整大小的影像)

您可以從基底編輯器類別衍生新的 HTML 編輯器，以自訂工具列按鈕。例如，清單 2 中的自訂編輯器只包含粗體和斜體工具列按鈕。所有其他工具列按鈕都已移除。此外，已從編輯器底部移除 HTML 索引標籤 (，但 [設計] 和 [預覽] 索引標籤仍) 。

清單 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());        
        }
    }
}

您必須將清單 2 中的類別新增至您的 App_Code 資料夾，以便自動編譯類別。如果網站中沒有App_Code資料夾，您可以直接新增資料夾。

建立自訂編輯器之後，您可以使用與新增一般 HTML 編輯器相同的方式，將它新增至 ASP.NET 網頁， (請參閱清單 3) 。

清單 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>

避免跨網站腳本 (XSS) 攻擊

每當您接受來自使用者的輸入，並在網站上重新顯示該輸入時，您可能會將網站開啟至跨網站腳本 (XSS) 攻擊。理論上，惡意駭客可能會提交在重新顯示輸入時執行的 JavaScript 程式碼。 JavaScript 可用來竊取使用者密碼或其他敏感性資訊。

一般而言，您可以在網頁中顯示 XSS 攻擊之前，先透過 HTML 編碼從使用者擷取的任何輸入來破壞 XSS 攻擊。不過，HTML 編輯器輸出的 HTML 編碼不僅會編碼 < 腳本 > 標籤，也會編碼所有 HTML 標籤。換句話說，您會遺失所有格式，例如字型類型、字型大小和背景色彩。

如果您要從使用者收集敏感性資訊，例如密碼、信用卡號碼和社會安全號碼，則不應該顯示使用 HTML 編輯器從使用者擷取的非編碼內容。只有在您未重新顯示 HTML 內容，或 HTML 內容由信任方提交至您的網站時，才應該使用 HTML 編輯器。

例如，假設您正在建立部落格應用程式。在此情況下，撰寫部落格文章時，使用 HTML 編輯器會很合理。您是唯一提交部落格文章的人員，而且可以信任自己不要提交惡意 JavaScript。不過，允許匿名使用者張貼批註時，使用 HTML 編輯器並不合理。在使用者提交機密資訊，例如密碼的情況下，請特別小心。惡意使用者可能會張貼包含適當 JavaScript 的批註，以竊取密碼。

總結

在本教學課程中，您已提供 AJAX 控制項工具組中所包含 HTML 編輯器控制項的簡短概觀。您已瞭解如何使用 HTML 編輯器來接受來自使用者的豐富內容，並將內容提交至伺服器。我們也討論了如何自訂 HTML 編輯器所顯示的工具列按鈕。最後，您已瞭解如何在使用 HTML 編輯器接受潛在惡意輸入時避免跨網站腳本攻擊。

下一步

共用方式為

如何?使用 HTML 編輯器控制項嗎？ (C#)

顯示 HTML 編輯器

避免跨網站腳本 (XSS) 攻擊

總結

意見反應

意見反應

其他資源

共用方式為

如何?使用 HTML 編輯器控制項嗎？ (C#)

顯示 HTML 編輯器

自訂 HTML 編輯器工具列

避免跨網站腳本 (XSS) 攻擊

總結

意見反應

意見反應

其他資源