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
