Rich text validator for ASP.Net

Question

So I have a question that is pretty similar to this one : Input Validation When Using a Rich Text Editor

But this is not related to XSS scripting. We have an internal tools developped on ASP.Net that is using the Telerik Rich Text Editor. Users are supposed to be able to use only some of the formating available (such as Bold, Italic, List, special characters).

My problem is that sometimes users copy/paste text from unknown sources (Word, RTF, web pages) and it happens that all that raw data pasted is not correct (missing the last closing tags for a list etc.). It results a lot of issues when I try to use those data.

I would like to be able to validate that the data are corrects. I want to be sure that only the tags we have allowed can be used and that we don't have any missing closing tags.

XSS is not an issue as we are working on an internal application available to trusted users.

I thought of Dtd but I'm not sure this can work with Rich Text format as it not pure XML...

Does anyone already used something and figured this out ?

Have you played with the RadEditor.StripFormattingOptions Property already? — Alex Filipovici
Yes, unfortunately we need to keep some home of the html tags, so the stripping option is not really a solution for us... — Guigui

Guigui Guigui · Accepted Answer · 2013-02-19T13:44:28

So I finally find a way to do that !

You can do this with a mix of Telerik stripping using : StripFormattingOptions="Css, Font, Span, ConvertWordLists"

and using some javascript on HTML pasting OnClientPasteHtml="onClientPasteHtml".

Here is the code that will strip the unwanted tags

function onClientPasteHtml(editor, args) {
        var commandName = args.get_commandName();
        var value = args.get_value();

        if (commandName == "Paste") {
            //create a div, set the html content to it,
            // remove style attribute, remove non pertinent tags.
            var div = document.createElement("DIV");
            Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div, value);

            var nostyle = $(div)[0];

            // replace unwanted tags
            var strippedHtml = $(nostyle).html().replace(/<\/?([a-z]+)[^>]*>/gi, function (match, tag) {

                // any of these is valid
                tag = tag.toLowerCase();
                return (tag === "em" || tag === "ol" ||
                        tag === "sub" || tag === "sup" || tag === "ul" || tag === "li"|| tag === "br" || tag === "i") ? match : "";
            });

            // attributes gone
            Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div, strippedHtml);
            removeAttributes($(div)[0]);

            strippedHtml = $(div).html();

            args.set_value(strippedHtml);
        }

    }

    function removeAttributes(el) {

        while (el.attributes.length > 0) {
            el.removeAttribute(el.attributes[0].name);
        }

        if (el.childNodes.length > 0) {
            for (var child in el.childNodes) {
                if (el.childNodes[child].nodeType == 1)
                    removeAttributes(el.childNodes[child]);
            }
        }
    }

Also we added a validator base on dtd XHTML validation that will tell us if the copy cut did not forget any tags (such as the opening and closing tag for a list). For that we used the xhtml1-transitional.dtd :

protected bool ValidateMaisRespProjectText()
    {
        string html = txtJobMainResp.GetHtml(EditorStripHtmlOptions.None);


        XHtmlErrors = new List<string>();

        XmlReaderSettings settings = new XmlReaderSettings();
        settings.ProhibitDtd = false;
        settings.ValidationType = ValidationType.DTD;
        settings.ValidationEventHandler += new ValidationEventHandler(ValidationEventHandler);

        // Create a local reference for validation11.            
        string xhtmlDtdFile = HttpContext.Current.Server.MapPath("DTD/xhtml1-transitional.dtd");
        string newDoctype = string.Format("<!DOCTYPE html SYSTEM \"file://{0}\">", xhtmlDtdFile);

        // add doc type validation + root element to make it valid.
        html = newDoctype + Environment.NewLine + "<html><head><title>title</title></head><body><div>" + html + "</div></body></html>";

        XmlReader reader = XmlReader.Create(new System.IO.StringReader(html), settings);
        try
        {
            while (reader.Read())
            {
            }
        }
        catch (Exception ex)
        {
            XHtmlErrors.Add(ex.Message);
            txtJobMainRespValidator1.IsValid = false;
            txtJobMainRespValidator1.Text = "* The information entered has invalid HTML content. (DEBUG: " + XHtmlErrors.FirstOrDefault() + ")";
        }
        finally
        {
            if (reader != null)
                reader.Close();

        }
        if (XHtmlErrors.Count != 0)
        {
            txtJobMainRespValidator1.IsValid = false;
            txtJobMainRespValidator1.Text = "* The information entered has invalid HTML content. (DEBUG: " + XHtmlErrors.FirstOrDefault() + ")";
        }
        return XHtmlErrors.Count == 0;
    }

private void ValidationEventHandler(object sender, ValidationEventArgs e)
    {
        XHtmlErrors.Add(string.Format("({0}) {1} - [Line: {2}, Char: {3}]", e.Severity, e.Message, e.Exception.LineNumber, e.Exception.LinePosition));
    }

The validation adds the formatting errors to a list. Then you just have to display the messages you want in your page.

Hope this will help (And if you find some enhancement to that solution don't hesitate to tell me :) )

Rich text validator for ASP.Net

1 Answers