Traduction▲
Cet article est la traduction la plus fidèle possible de l'article original : How do I use the HTML Editor Control?
Inroduction▲
Le but de ce tutoriel est de vous fournir un aperçu du contrôle HTML Editor inclus dans AJAX Control Toolkit. Le contrôle HTML Editor comprend des options pour changer la taille de la police, sélectionner une police de caractères, changer la couleur de fond, modifier la couleur de premier plan, ajouter des liens, ajouter des images, changer l'alignement du texte, ainsi que pour effectuer des couper, copier et coller (voir Figure 1).
L'éditeur HTML vous permet de saisir du contenu en mode design, ou d'entrer directement du code HTML. Vous obtenez également une option pour prévisualiser votre contenu HTML (voir Figure 2).
Dans ce tutoriel, vous apprendrez comment afficher le HTMLEditor, comment personnaliser la barre de boutons qui apparaît dans l'éditeur, et comment éviter les attaques Cross-Site Scripting.
Affichage de l'éditeur HTML ▲
Avant de pouvoir utiliser l'éditeur HTML dans une page ASP.NET, vous devez d'abord ajouter un contrôle ScriptManager à la page. Le contrôle ScriptManager est situé sous l'onglet Extensions AJAX dans la boîte à outils de Visual Studio/Visual Web Developer Express.
Vous devez placer le contrôle ScriptManager en haut de la page, avant les contrôles de la page. Par exemple, vous pouvez le placer immédiatement au-dessous de la balise <form>.
Le contrôle HTML Editor est situé dans la boîte à outils avec le reste des contrôles d'AJAX Control Toolkit. Il est nommé Editor (voir Figure 3).
Après avoir fait glisser l'éditeur HTML sur une page, vous pouvez définir ses propriétés dans la feuille de propriétés. Par exemple, vous voulez normalement renseigner les propriétés Largeur et Hauteur. Le Listing 1 contient la source d'une page ASP.NET qui contient un éditeur HTML.
<%@ 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 page du Listing 1 contient un contrôle HTML Editor, un contrôle Button et un contrôle Literal. Lorsque vous cliquez sur le bouton, le contenu de l'éditeur HTML apparaît dans le contrôle Literal (voir Figure 4).
La propriété Content du HTML Editor est utilisée pour récupérer le contenu HTML entré dans le HTML Editor. Soyez conscient que ce contenu HTML peut contenir JavaScript. Dans la prochaine section, nous discutons de la façon dont vous pouvez empêcher les attaques par injection JavaScript.
Personnalisation de la barre d'outils du HTML Editor ▲
Vous pouvez personnaliser exactement quels boutons apparaissent dans l'éditeur. Par exemple, vous pourriez souhaiter supprimer l'onglet HTML, pour empêcher les utilisateurs de passer de l'éditeur HTML au mode HTML. Ou encore, vous voudriez peut-être supprimer la liste déroulante de sélection de taille de la police afin d'empêcher les utilisateurs de créer un texte trop grand dans un message pour un forum (voir Figure 5).
Vous pouvez personnaliser les boutons de la barre d'outils en faisant hériter un nouveau HTML Editor de la classe de base Editor. Par exemple, l'éditeur décrit dans le Listing 2 ne contient des boutons de barre d'outils que pour la gestion des caractères gras et italiques. Tous les autres boutons de barre d'outils ont été supprimés. En outre, l'onglet HTML a été retiré du bas de l'éditeur (mais les onglets Conception et Aperçu sont toujours là).
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());
}
}
}Vous devez ajouter la classe du Listing 2 à votre dossier App_Code, afin que la classe soit compilée automatiquement. Si le dossier App_Code n'existe pas dans votre site web, vous pouvez simplement ajouter le dossier.
Après avoir créé un éditeur personnalisé, vous pouvez l'ajouter à une page ASP.NET de la même manière que vous ajouteriez un HTML Editor normal (voir la liste 3).
<%@ 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>Eviter les attaques de type Cross-Site Scripting (XSS) Attaques ▲
Chaque fois que vous acceptez une entrée d'un utilisateur, et que vous réaffichez cette entrée sur votre site web, vous ouvrez potentiellement votre site Web aux attaques Cross-Site Scripting (XSS). En théorie, un utilisateur malveillant pourrait envoyer du code JavaScript, qui serait exécuté quand l'entrée est à nouveau affichée. Ce JavaScript pourrait être utilisé pour voler des mots de passe ou d'autres informations sensibles.
Normalement, on peut vaincre les attaques XSS en encodant au format HTML toutes les entrées que vous récupérez à partir d'un utilisateur avant de l'afficher dans une page Web. Toutefois, l'encodage HTML du contenu de l'éditeur HTML n'encoderait pas seulement les balises <script>, mais aussi toutes les balises HTML. En d'autres termes, vous perdriez toutes les mise en forme telles que le type de police, la taille de la police et la couleur de fond.
Si vous collectez des données sensibles de vos utilisateurs (tels que les mots de passe, numéros de carte de crédit, et les numéros de sécurité sociale), alors il ne faut pas afficher un contenu non encodé que vous récupérez à partir d'un utilisateur avec l'éditeur HTML. Vous ne devriez utiliser l'éditeur HTML que dans des situations dans lesquelles vous ne réaffichez pas le contenu HTML, ou dans lequelles le contenu HTML est soumis à votre site Web par un tiers de confiance.
Imaginez, par exemple, que vous créez une application de blog. Dans cette situation, il est sensé d'utiliser l'éditeur HTML pour composer les posts du blog. Comme vous êtes la seule personne qui soumet des posts dans le blog, vous pouvez probablement avoir confiance en vous pour de ne pas soumettre JavaScript malveillant. Toutefois, il ne fait pas de sens d'utiliser le HTML Editor lorsque l'on permet aux utilisateurs anonymes de poster des commentaires. Vous devriez être particulièrement prudent dans les situations où les utilisateurs soumettent des informations sensibles telles que des mots de passe. Potentiellement, un utilisateur malveillant pourrait envoyer un commentaire qui contient juste le Javascript lui permettant de voler un mot de passe.
Résumé▲
Dans ce tutoriel, vous avez eu un bref aperçu du contrôle HTML Editor inclus dans le AJAX Control Toolkit. Vous avez appris à utiliser l'éditeur HTML pour accepter du contenu d'un utilisateur, et à de soumettre ce contenu sur le serveur. Nous avons également discuté de la façon dont vous pouvez personnaliser les boutons de barre d'outils qui sont affichés par l'éditeur HTML. Finally, you learned how to avoid Cross-Site Scripting Attacks when using the HTML Editor to accept potentially malicious input. Enfin, vous avez appris comment éviter les attaques de type Cross-Site Scripting lorsque vous utilisez l'éditeur HTML dans une situation ou vous pouvez potentiellement recevoir des entrées dangereuses.
