Adding the New HTML Editor Extender to a Web Forms Application using NuGet

Posted by Stephen Walther on Stephen Walter See other posts from Stephen Walter or by Stephen Walther
Published on Wed, 17 Aug 2011 22:29:19 GMT Indexed on 2011/11/11 18:20 UTC
Read the original article Hit count: 1489

Filed under:

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

Developer IT