The July 2011 release of the
Ajax Control Toolkit includes a new, lightweight, HTML5 compatible HTML Editor extender. In this blog entry, I explain how you can take advantage of NuGet to quickly add the new HTML Editor
control extender to a new or existing ASP.NET Web Forms application. Installing the Latest Version of the
Ajax Control Toolkit with NuGet NuGet is a package manager. It enables you to quickly install new software directly from within Visual Studio 2010. You can use NuGet to install additional software when building any type of .NET application including ASP.NET Web Forms and ASP.NET MVC applications. If you have not already installed NuGet then you can install NuGet by navigating to the following address and clicking the giant install button: http://nuget.org/ After you install NuGet, you can add the
Ajax Control Toolkit to a new or existing ASP.NET Web Forms application by selecting the Visual Studio menu option Tools, Library Package Manager, Package Manager Console: Selecting this menu option opens the Package Manager Console. You can enter the command Install-Package AjaxControlToolkit in the console to install the
Ajax Control Toolkit: After you install the
Ajax Control Toolkit with NuGet, your application will include an assembly reference to the AjaxControlToolkit.dll and SanitizerProviders.dll assemblies: Furthermore, your Web.config file will be updated to contain a new tag prefix for the
Ajax Control Toolkit controls: <configuration>
<system.web>
<compilation debug="true" targetFramework="4.0" />
<pages>
<controls>
<add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" />
</controls>
</pages>
</system.web>
</configuration>
The configuration file installed by NuGet adds the prefix ajaxToolkit for all of the
Ajax Control Toolkit controls. You can type ajaxToolkit: in source view to get auto-complete in Source view. You can, of course, change this prefix to anything you want.
Using the HTML Editor Extender
After you install the
Ajax Control Toolkit, you can use the HTML Editor Extender with the standard ASP.NET TextBox
control to enable users to enter rich formatting such as bold, underline, italic, different fonts, and different background and foreground colors.
For example, the following page can be used for entering comments. The page contains a standard ASP.NET TextBox, Button, and Label
control. When you click the button, any text entered into the TextBox is displayed in the Label
control. It is a pretty boring page:
Let’s make this page fancier by extending the standard ASP.NET TextBox with the HTML Editor extender control:
Notice that the ASP.NET TextBox now has a toolbar which includes buttons for performing various kinds of formatting. For example, you can change the size and font used for the text. You also can change the foreground and background color – and make many other formatting changes.
You can customize the toolbar buttons which the HTML Editor extender displays. To learn how to customize the toolbar, see the HTML Editor Extender sample page here:
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/HTMLEditorExtender/HTMLEditorExtender.aspx
Here’s the source code for the ASP.NET page:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>
<!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 runat="server">
<title>Add Comments</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ajaxToolkit:ToolkitScriptManager
ID="TSM1"
runat="server" />
<asp:TextBox
ID="txtComments"
TextMode="MultiLine"
Columns="50"
Rows="8"
Runat="server" />
<ajaxToolkit:HtmlEditorExtender
ID="hee"
TargetControlID="txtComments"
Runat="server" />
<br /><br />
<asp:Button
ID="btnSubmit"
Text="Add Comment"
Runat="server" onclick="btnSubmit_Click" />
<hr />
<asp:Label
ID="lblComment"
Runat="server" />
</div>
</form>
</body>
</html>
Notice that the page above contains 5 controls. The page contains a standard ASP.NET TextBox, Button, and Label
control. However, the page also contains an
Ajax Control Toolkit ToolkitScriptManager
control and HtmlEditorExtender
control.
The HTML Editor extender
control extends the standard ASP.NET TextBox
control. The HTML Editor TargetID attribute points at the TextBox
control.
Here’s the code-behind for the page above:
using System;
namespace WebApplication1 {
public partial class Default : System.Web.UI.Page {
protected void btnSubmit_Click(object sender, EventArgs e) {
lblComment.Text = txtComments.Text;
}
}
}
Preventing XSS/JavaScript Injection Attacks
If you use an HTML Editor -- any HTML Editor -- in a public facing web page then you are opening your website up to Cross-Site Scripting (XSS) attacks. An evil hacker could submit HTML using the HTML Editor which contains JavaScript that steals private information such as other user’s passwords.
Imagine, for example, that you create a web page which enables your customers to post comments about your website. Furthermore, imagine that you decide to redisplay the comments so every user can see them. In that case, a malicious user could submit JavaScript which displays a dialog asking for a user name and password. When an unsuspecting customer enters their secret password, the script could transfer the password to the hacker’s website.
So how do you accept HTML content without opening your website up to JavaScript injection attacks? The
Ajax Control Toolkit HTML Editor supports the Anti-XSS library. You can use the Anti-XSS library to sanitize any HTML content. The Anti-XSS library, for example, strips away all JavaScript automatically.
You can download the Anti-XSS library from NuGet. Open the Package Manager Console and execute the command Install-Package AntiXSS:
Adding the Anti-XSS library to your application adds two assemblies to your application named AntiXssLibrary.dll and HtmlSanitizationLibrary.dll.
After you install the Anti-XSS library, you can configure the HTML Editor extender to use the Anti-XSS library your application’s web.config file:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<configSections>
<sectionGroup name="system.web">
<section name="sanitizer" requirePermission="false" type="AjaxControlToolkit.Sanitizer.ProviderSanitizerSection, AjaxControlToolkit"/>
</sectionGroup>
</configSections>
<system.web>
<sanitizer defaultProvider="AntiXssSanitizerProvider">
<providers>
<add name="AntiXssSanitizerProvider"
type="AjaxControlToolkit.Sanitizer.AntiXssSanitizerProvider"></add>
</providers>
</sanitizer>
<compilation debug="true" targetFramework="4.0" />
<pages>
<controls>
<add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" />
</controls>
</pages>
</system.web>
</configuration>
Summary
In this blog entry, I described how you can quickly get started using the new HTML Editor extender – included with the July 2011 release of the
Ajax Control Toolkit – by installing the
Ajax Control Toolkit with NuGet. If you want to learn more about the HTML Editor then please take a look at the
Ajax Control Toolkit sample site:
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/HTMLEditorExtender/HTMLEditorExtender.aspx
