Pass HTML code trough Ajax Asp.Net MVC

Question

I'm trying pass a html code trough Ajax like this:

Using plugin 'summernote' (WYSIWYG Editor)

var description = $('#ticketDescription').code();

This give me for example:

<span style="font-weight: bold;">asdasdasd<span>sadasd

and when Ajax process this give an 500 internal error

$.ajax({
                url: '/Ticket/NewTicket',
                type: 'POST',
                data: {
                    companyId: companyId,
                    subject: subject,
                    ticketDescription: description
                },

                success: function(result) {
                    ....
                },
                error: function(result) {

                }
            });

The problem is solved by removing the '<' character from string. Any solution to this? Thanks

Edit: The only way I found so far is: In javascript:

description = escape(description);

and in the controller:

ticketDescription = HttpUtility.UrlDecode(ticketDescription);

Is it correct?

Answer 1

ValidateInput and AllowHtml attribute is what you need to set in the property

By default Asp.Net MVC doesn't allow a user to submit html for avoiding Cross Site Scripting attack to your application.

ValidateInput Attribute

This is the simple way to allow the submission of HTML. This attribute can enable or disable input validation at the controller level or at any action method. ValidateInput at Controller Level

[ValidateInput(false)]
public class HomeController : Controller
{
 public ActionResult AddArticle()
 {
 return View();
 }

 [HttpPost]
 public ActionResult AddArticle(BlogModel blog)
 {
 if (ModelState.IsValid)
 {

 }
 return View();
 }
}

Now, the user can submit Html for this Controller successfully. ValidateInput at Action Method Level

public class HomeController : Controller
{
 public ActionResult AddArticle()
 {
 return View();
 }

 [ValidateInput(false)]
 [HttpPost]
 public ActionResult AddArticle(BlogModel blog)
 {
 if (ModelState.IsValid)
 {

 }
 return View();
 }
}

Now, the user can submit Html for this action method successfully.

Limitation of ValidateInput attribute This attribute also has the issue since this allow the Html input for all the properties and that is unsafe. Since you have enable Html input for only one-two properties then how to do this. To allow Html input for a single property, you should use AllowHtml attribute.

AllowHtml Attribute

This is the best way to allow the submission of HTML for a particular property. This attribute will be added to the property of a model to bypass input validation for that property only. This explicit declaration is more secure than the ValidateInput attribute.

using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

public class BlogModel
{
 [Required]
 [Display(Name = "Title")]
 public string Title { get; set; }

 [AllowHtml]
 [Required]
 [Display(Name = "Description")]
 public string Description{ get; set; }
} 

Make sure, you have removed the ValidateInput attribute from Conroller or Action method. Now, the user can submit Html only for the Description property successfully.