Ricerca per categorie usare il controllo editor HTML? (C#)
da Microsoft
HTMLEditor è un controllo AJAX ASP.NET che consente di creare e modificare facilmente il contenuto HTML tramite pulsanti in una barra degli strumenti.
L'obiettivo di questa esercitazione è fornire una panoramica del controllo Editor HTML incluso nel Toolkit di controllo AJAX. L'editor HTML include opzioni per la modifica delle dimensioni del carattere, la selezione di un carattere, la modifica del colore di sfondo, la modifica del colore di primo piano, l'aggiunta di collegamenti, l'aggiunta di immagini, la modifica dell'allineamento del testo e l'esecuzione di operazioni tagliate, copia e incolla (vedere la figura 1).
Figura 01: Editor HTML(Fare clic per visualizzare l'immagine full-size)
L'editor HTML consente di immettere il contenuto usando una modalità di progettazione oppure è possibile immettere direttamente HTML. È inoltre disponibile l'opzione per visualizzare in anteprima il contenuto HTML (vedere la figura 2).
Figura 02: Pulsanti Progettazione, HTML e Anteprima(Fare clic per visualizzare l'immagine a dimensioni complete)
In questa esercitazione viene illustrato come visualizzare l'editor HTML, come personalizzare i pulsanti della barra degli strumenti visualizzati nell'editor HTML e come evitare attacchi di scripting tra siti.
Visualizzazione dell'editor HTML
Prima di poter usare l'editor HTML in una pagina ASP.NET, è prima necessario aggiungere un controllo ScriptManager alla pagina. Il controllo ScriptManager si trova sotto la scheda Estensioni AJAX nella casella degli strumenti Visual Studio/Visual Web Developer Express.
È consigliabile posizionare il controllo ScriptManager nella parte superiore della pagina prima di qualsiasi altro controllo nella pagina. Ad esempio, è possibile posizionarla immediatamente sotto il tag di modulo> lato <server di apertura.
Il controllo Editor HTML si trova nella casella degli strumenti con il resto dei controlli AJAX Control Toolkit. Viene denominato il controllo Editor (vedere la figura 3).
Figura 03: Controllo Editor HTML (Fare clic per visualizzare l'immagine full-size)
Dopo aver trascinato l'editor HTML in una pagina, è possibile impostare le relative proprietà nel foglio delle proprietà. Ad esempio, si desidera impostare normalmente le proprietà Width e Height. L'elenco 1 contiene l'origine per una pagina ASP.NET contenente un editor HTML.
Elenco 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>
La pagina nell'elenco 1 contiene un controllo Editor HTML, un controllo Button e un controllo Letterale. Quando si fa clic sul pulsante, il contenuto dell'editor HTML viene visualizzato nel controllo Letterale (vedere la figura 4).
Figura 04: Invio di un modulo con un editor HTML(Fare clic per visualizzare l'immagine full-size)
La proprietà Contenuto editor HTML viene usata per recuperare il contenuto HTML immesso nell'editor HTML. Tenere presente che questo contenuto HTML può contenere JavaScript. Nella sezione successiva viene illustrato come prevenire attacchi JavaScript Injection.
Personalizzazione della barra degli strumenti dell'editor HTML
È possibile personalizzare esattamente i pulsanti visualizzati nell'editor. Ad esempio, è possibile rimuovere la scheda HTML per impedire agli utenti di passare l'editor HTML in modalità HTML. In alternativa, potrebbe essere necessario rimuovere l'elenco a discesa dimensioni del tipo di carattere per impedire agli utenti di creare testo eccessivamente grande in un post del messaggio del forum (vedere la figura 5).
Figura 05: Editor HTML personalizzato(Fare clic per visualizzare l'immagine full-size)
Personalizzare i pulsanti della barra degli strumenti derivando un nuovo editor HTML dalla classe Editor di base. Ad esempio, l'editor personalizzato nell'elenco 2 contiene solo pulsanti della barra degli strumenti per grassetto e corsivo. Tutti gli altri pulsanti della barra degli strumenti sono stati rimossi. Inoltre, la scheda HTML è stata rimossa dalla parte inferiore dell'editor (ma le schede Progettazione e anteprima sono ancora presenti).
Elenco 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());
}
}
}
È necessario aggiungere la classe nell'elenco 2 alla cartella App_Code in modo che la classe venga compilata automaticamente. Se la cartella App_Code non esiste nel sito Web, è sufficiente aggiungere la cartella.
Dopo aver creato un editor personalizzato, è possibile aggiungerlo a una pagina ASP.NET nello stesso modo in cui si aggiunge il normale editor HTML (vedere Elenco 3).
Elenco 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>
Evitare attacchi XSS (Cross-Site Scripting)
Ogni volta che si accetta l'input da un utente e si redisplay tale input nel sito Web, si apre potenzialmente il sito Web agli attacchi XSS (Cross-Site Scripting). In teoria, un hacker malintenzionato potrebbe inviare codice JavaScript che viene eseguito quando l'input viene redisplayed. JavaScript può essere usato per rubare password utente o altre informazioni riservate.
In genere, è possibile sconfiggere gli attacchi XSS tramite codifica HTML qualsiasi input recuperato da un utente prima di visualizzarlo in una pagina Web. Tuttavia, la codifica HTML dell'output dell'editor HTML non solo codifica i <tag di script> , codifica anche tutti i tag HTML. In altre parole, si perderebbe tutta la formattazione, ad esempio il tipo di carattere, le dimensioni del carattere e il colore di sfondo.
Se si raccolgono informazioni riservate dagli utenti, ad esempio password, numeri di carta di credito e numeri di sicurezza sociale, non è consigliabile visualizzare contenuti non codificati recuperati da un utente con l'editor HTML. È consigliabile usare l'editor HTML solo in situazioni in cui non si esegue la riproduzione del contenuto HTML o il contenuto HTML viene inviato al sito Web da una parte attendibile.
Si supponga, ad esempio, di creare un'applicazione di blog. In questa situazione, è consigliabile usare l'editor HTML durante la composizione di post di blog. Sei l'unico che invia un post di blog e, presumibilmente, puoi fidarti di non inviare JavaScript dannoso. Tuttavia, non ha senso usare l'editor HTML quando consente agli utenti anonimi di pubblicare commenti. È consigliabile prestare particolare attenzione in situazioni in cui gli utenti inviano informazioni riservate, ad esempio password. Potenzialmente, un utente malintenzionato potrebbe pubblicare un commento che contiene il codice JavaScript corretto per rubare una password.
Riepilogo
In questa esercitazione è stata fornita una breve panoramica del controllo Editor HTML incluso in AJAX Control Toolkit. Si è appreso come usare l'editor HTML per accettare contenuti avanzati da un utente e inviare il contenuto al server. È anche stato illustrato come personalizzare i pulsanti della barra degli strumenti visualizzati dall'editor HTML. Infine, si è appreso come evitare attacchi di scripting tra siti quando si usa l'editor HTML per accettare un input potenzialmente dannoso.
Commenti e suggerimenti
Presto disponibile: Nel corso del 2024 verranno gradualmente disattivati i problemi di GitHub come meccanismo di feedback per il contenuto e ciò verrà sostituito con un nuovo sistema di feedback. Per altre informazioni, vedere https://aka.ms/ContentUserFeedback.
Invia e visualizza il feedback per