Use jQuery to serialize a form but remove HTML

Question

I have a form on a webpage and I am doing something like this in JavaScript with jQuery:

function submitForm() {
    var action = $form.attr("action");
    var formData = $form.serialize();

    $.ajax({
        type: "POST",
        url: action,
        data: formData,
        success: successfulSubmission,
        error: failedSubmission
    });
}

My server side technology is ASP.NET. Whenever a user puts HTML into a field on the form, ASP.NET throws the standard HttpRequestValidationException: A potentially dangerous value was detected from the client.

Is it safe to cleanse the HTML from the user's input on the client side, and if it is, is there a simple way to do it (preferably with jquery)?

Keep in mind that I do NOT want to allow the user to POST HTML to my server, unless allowing them to do so and then cleansing it is the correct approach.

score 0 · Answer 1 · edited May 23 '17 at 11:59

I'll tackle two ways of handling this: if you actually want to keep the HTML content or if you want to strip it off entirely.

If you want to remove the HTML...

If you want to strip out any HTML tags prior to serializing the code, you could probably use a Regular Expression to replace all of the HTML content (e.g. tags, etc.) :

function submitForm() {
    var action = $form.attr("action");
    // Strip your HTML content here (this may vary)
    $('#yourField').val($('#your-field').val().replace(/(<([^>]+)>)/ig,'');
    // Now serialize your content
    var formData = $form.serialize();

    $.ajax({
        type: "POST",
        url: action,
        data: formData,
        success: successfulSubmission,
        error: failedSubmission
    });
}

You can see an example of this here and seen below :

If you want to avoid a Regular Expression, you can let jQuery do some work for you as well by using the approach mentioned in this discussion that involves creating a new element, storing the HTML content in it and simply pulling out the text as mentioned by dman2603 in the comments:

$("#html").val($("<div/>").html($("#html").val()).text());

If you want to keep it... (ASP.NET MVC)

If you are using ASP.NET MVC, you can use the [AllowHtml] attribute on the property that you are serializing to let ASP.NET take care of this on it's own :

[AllowHtml]
public string YourHtmlProperty { get; set; }

Likewise, the [ValidateInput(false)] attribute will also do the same basic thing for the action that you are posting to :

[HttpPost]
[ValidateInput(false)]
public ActionResult YourActionName(...)
{
     // Omitted for brevity
}

And IIRC, you can also specify a specific property to ignore as well :

[HttpPost]
[ValidateInput(true, Exclude = "YourHtmlField")]
public ActionResult YourActionName(...)
{
     // Omitted for brevity
}

If you want to keep it... (Web Forms)

ASP.NET Web Forms provide a few ways of handling this same behavior (i.e. ignoring requests with HTML content), however the smallest scope would be to disable this valiation on the current page you are using via the ValidateRequest attribute on the Page directive :

<%@ Page ... ValidateRequest="false" %>

If you want to keep it... (jQuery)

The serialize() function should automatically encode the values as expected as per the documentation :

The .serialize() method creates a text string in standard URL-encoded notation.

If this still isn't working, you might consider updating your form values prior to calling serialize() using the Javascript encodeURI() or escape() functions that will handle encoding all of the potentially dangerous values that might be passed in through serializing your HTML content. Or you could use one of the many techniques detailed in this related thread.

I hadn't realized that. I've updated the code with a section involving stripping the tags out prior to serializing. — Rion Williams, Apr 13 '16 at 14:36
Personally I find the most accurate way to strip the HTML is to do something like insert the HTML into a hidden div, then get the inner text. With jQuery something like `$("
").html(theHtml).text()` — dmeglio, Apr 13 '16 at 15:01
Right, that totally works as is mentioned in the thread that I referenced in my post. There are tons of different ways to handle it, it's just a matter of preference. — Rion Williams, Apr 13 '16 at 15:16

score 0 · Answer 2 · answered Apr 13 '16 at 14:38

0

you have to put following attribute at your method

[HttpPost, ValidateInput(false)]

It will allows you the html content from your view.

Hope it helps to you. :)

answered Apr 13 '16 at 14:38

Sunil Kumar

3,142
1
19
33

Use jQuery to serialize a form but remove HTML

2 Answers2