HTML Düzenleyici Denetimini nasıl kullanırım? (C#)

Microsoft tarafından

HTMLEditor, bir araç çubuğundaki düğmeler aracılığıyla HTML içeriğini kolayca oluşturmanıza ve düzenlemenize olanak tanıyan ASP.NET bir AJAX Control'dür.

Bu öğreticinin amacı, AJAX Control Toolkit ile birlikte verilen HTML Düzenleyici denetimine genel bir bakış sağlamaktır. HTML Düzenleyicisi yazı tipi boyutunu değiştirme, yazı tipi seçme, arka plan rengini değiştirme, ön plan rengini değiştirme, bağlantılar ekleme, resim ekleme, metin hizalamasını değiştirme ve kesme, kopyalama ve yapıştırma işlemlerini gerçekleştirme seçeneklerini içerir (Bkz. Şekil 1).

HTML Düzenleyicisi

Şekil 01: HTML Düzenleyicisi(Tam boyutlu görüntüyü görüntülemek için tıklayınız)

HTML düzenleyicisi bir tasarım modu kullanarak içerik girmenizi sağlar veya doğrudan HTML girebilirsiniz. Ayrıca HTML içeriğinizi önizleme seçeneği de size verilir (Bkz. Şekil 2).

Tasarım, HTML ve Önizleme düğmeleri

Şekil 02: Tasarım, HTML ve Önizleme düğmeleri(Tam boyutlu görüntüyü görüntülemek için tıklayınız)

Bu eğitimde, HTML Düzenleyicisi'ni nasıl görüntüleyesiniz, HTML Düzenleyicisi'nde görünen araç çubuğu düğmelerini nasıl özelleştirdiğinizi ve Siteler Arası Komut Dosyası Saldırılarından nasıl kaçınabileceğinizi öğrenirsiniz.

HTML Düzenleyicisini Görüntüleme

HTML Düzenleyicisini ASP.NET bir sayfada kullanabilmek için önce sayfaya bir ScriptManager denetimi eklemeniz gerekir. ScriptManager denetimi, Visual Studio/Visual Web Developer Express araç kutusundaki AJAX Uzantıları sekmesinin altında yer alır.

Sayfadaki diğer denetimlerden önce ScriptManager denetimini sayfanın en üstüne yerleştirmelisiniz. Örneğin, bunu sunucu tarafındaki <açılış form> etiketinin hemen altına yerleştirebilirsiniz.

HTML Düzenleyici denetimi, AJAX Control Toolkit denetimlerinin geri kalanıyla birlikte araç kutusunda bulunur. Editör denetimi olarak adlandırılır (bkz. Şekil 3).

HTML Düzenleyici denetimi

Şekil 03: HTML Düzenleyici kontrolü(Tam boyutlu görüntüyü görüntülemek için tıklayınız)

HTML Düzenleyicisini bir sayfaya sürükledikten sonra, özelliklerini özellik sayfasında ayarlayabilirsiniz. Örneğin, normalde Genişlik ve Yükseklik özelliklerini ayarlamak istiyorsunuz. Listeleme 1, HTML düzenleyicisi içeren bir ASP.NET sayfasının kaynağını içerir.

Listeleme 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>

Listeleme 1'deki sayfa bir HTML Düzenleyici denetimi, düğme denetimi ve Bir Literal denetim içerir. Düğmeyi tıklattığınızda, HTML Düzenleyicisi'nin içeriği Literal denetiminde görünür (Bkz. Şekil 4).

HTML Düzenleyicisi ile form gönderme

Şekil 04: HTML Düzenleyicisi ile form gönderme (tam boyutlu görüntüyü görüntülemek için tıklayınız)

HTML Düzenleyici İçeriği özelliği, HTML Düzenleyicisi'ne girilen HTML içeriğini almak için kullanılır. Bu HTML içeriğinin JavaScript içerebileceğini unutmayın. Sonraki bölümde, JavaScript Enjeksiyon Saldırılarını nasıl önleyebileceğinizi tartışıyoruz.

HTML Düzenleyici araç çubuğunu özelleştirme

Editörde tam olarak hangi düğmelerin görünebileceğini özelleştirebilirsiniz. Örneğin, kullanıcıların HTML Düzenleyicisi'ni HTML moduna dönüştürmesini önlemek için HTML sekmesini kaldırmak isteyebilirsiniz. Veya, kullanıcıların bir forum ileti gönderisinde aşırı büyük metin oluşturmalarını önlemek için yazı tipi boyutu açılır listesini kaldırmak isteyebilirsiniz (Bkz. Şekil 5).

Özelleştirilmiş BIR HTML Düzenleyicisi

Şekil 05: Özelleştirilmiş bir HTML Düzenleyicisi(Tam boyutlu görüntüyü görüntülemek için tıklayınız)

Temel Düzenleyici sınıfından yeni bir HTML Düzenleyicisi türeterek araç çubuğu düğmelerini özelleştirebilirsiniz. Örneğin, Listeleme 2'deki özel düzenleyici yalnızca kalın ve italik için araç çubuğu düğmeleri içerir. Diğer tüm araç çubuğu düğmeleri kaldırıldı. Ayrıca, HTML sekmesi editörün alt kısmından kaldırıldı (ancak Tasarım ve Önizleme sekmeleri hala orada).

Listeleme 2_- Uygulama Kodu\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());        
        }
    }
}

Sınıfın otomatik olarak derlenmesi için_Listeleme 2'deki sınıfı Uygulama Kodu klasörünüze eklemeniz gerekir. Uygulama_Kodu klasörü web sitenizde yoksa, klasörü ekleyebilirsiniz.

Özel bir düzenleyici oluşturduktan sonra, normal HTML Düzenleyicisini eklediğiniz gibi ASP.NET bir sayfaya ekleyebilirsiniz (bkz.

Listeleme 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>

Siteler Arası Komut Dosyası (XSS) Saldırılarından Kaçınma

Bir kullanıcının girdisini kabul ettiğinizde ve web sitenizdeki bu girişi yeniden görüntülediğinizde, web sitenizi Siteler Arası Komut Dosyası (XSS) Saldırılarına açma potansiyeliniz. Teorik olarak, kötü niyetli bir bilgisayar korsanı giriş yeniden görüntülendiğinde çalıştırılan JavaScript kodu gönderebilir. JavaScript kullanıcı parolalarını veya diğer hassas bilgileri çalmak için kullanılabilir.

Normalde, xss saldırılarını, bir web sayfasında görüntülemeden önce bir kullanıcıdan aldığınız girişi kodlayarak HTML kodlayarak yenebilirsiniz. Ancak, HTML Düzenleyicisi çıktıkodlama HTML sadece <komut> dosyası etiketleri kodlamak olmaz, aynı zamanda tüm HTML etiketleri kodlamak istiyorsunuz. Başka bir deyişle, yazı tipi türü, yazı tipi boyutu ve arka plan rengi gibi biçimlendirmenin tümlerini kaybedersiniz.

Parolalar, kredi kartı numaraları ve sosyal güvenlik numaraları gibi kullanıcılarınızdan hassas bilgiler topluyorsanız, HTML Düzenleyicisi olan bir kullanıcıdan aldığınız kodlanmamış içeriği görüntülememelisiniz. HTML Düzenleyicisini yalnızca HTML içeriğini yeniden görüntülemediğiniz veya HTML içeriğinin güvenilir bir taraf tarafından web sitenize gönderildiği durumlarda kullanmalısınız.

Örneğin, bir blog uygulaması oluşturduğunuzu düşünün. Bu durumda, blog gönderileri oluştururken HTML Düzenleyicisi'ni kullanmak mantıklıdır. Bir blog yazısı gönderen tek kişi sizsiniz ve muhtemelen kötü amaçlı JavaScript göndermemek için kendinize güvenebilirsiniz. Ancak, anonim kullanıcıların yorum yayınlamasına izin verirken HTML Düzenleyicisi'ni kullanmak mantıklı değildir. Özellikle kullanıcıların parolalar gibi hassas bilgileri gönderdiği durumlarda dikkatli olmalısınız. Kötü amaçlı bir kullanıcı, parola çalmak için doğru JavaScript'i içeren bir yorum yayınlayabilir.

Özet

Bu eğitimde, AJAX Control Toolkit'te yer alan HTML Düzenleyici denetimine kısa bir genel bakış sunulmuştur. HTML Düzenleyicisi'ni kullanarak bir kullanıcıdan zengin içeriği kabul etmeyi ve içeriği sunucuya göndermeyi öğrendiniz. Ayrıca HTML Düzenleyicisi tarafından görüntülenen araç çubuğu düğmelerini nasıl özelleştirebileceğinizi de tartıştık. Son olarak, olası kötü amaçlı girişi kabul etmek için HTML Düzenleyicisi'ni kullanırken Siteler Arası Komut Dosyası Saldırılarından kaçınmayı öğrendiniz.