ASP.NET MVC - A potentially dangerous Request.Form value was detected from the client

Question

Am trying to click save button to update what I have in text editor using ckeditor but I got this error A potentially dangerous Request.Form value was detected from the client (OPTION_VALUE="

Welcome to the Na...").

The controller is shown below

Controller

        public ActionResult EditRegistrationGuideline(long id)
    {
        OPTIONS options = _optionsService.GetOption(id);
        return View(options);
    }

    //
    // POST: /Product/Edit/5

    [HttpPost]
    public ActionResult EditRegistrationGuideline(long id, OPTIONS options)
    {
        try
        {
            // TODO: Add update logic here
            if (ModelState.IsValid)
            {
                options.OPTION_ID = id;
                options.ACTION_STATUS = 0;
                options.CREATED_DATE = DateTime.Now;
                _optionsService.AddOption(options);
                return RedirectToAction("Index");
            }
        }
        catch
        {
            //return View();
            ModelState.AddModelError("", "We cannot edit this Option. Verify your data entries !");
        }

        return View();
    }

and the view is here

View

@{

//ViewBag.Title = "CreateRegistrationGuideline";

  }

<div class="content-header clearfix">
   <h1 class="pull-left">
    <i class="fa fa-plus"> </i> Edit Registration Guideline
   </h1>

<div class="col-xs-3 pull-right">
    <input type="button" class="btn btn-block btn-warning" value="Back" onclick="location.href='@Url.Action("IndexRegistrationGuideline", "Options")'" />
</div>

  <div class=" box box-body box-primary">
   @using (Html.BeginForm("EditRegistrationGuideline", "Options", FormMethod.Post, new { @class = "form-horizontal", @enctype = "multipart/form-data" }))
   {
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        @*<h4>OPTIONS</h4>
            <hr />*@
        @*@Html.ValidationSummary(true)*@
        @Html.ValidationSummary(false, null, new { @class = "text-danger" })
        <div class="row .col">
            <div style="margin-top:20px" class="mainbox col-md-12 col-md-offset-0 col-sm-8 col-sm-offset-2">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <div class="panel-title">Edit Option</div>
                    </div>
                    <div class="panel-body">
                        @*<div class="form-group">

                            @Html.LabelFor(model => model.OPTION_NAME, new { @class = "control-label col-md-2" })
                            <div class="col-md-10">*@

                        @*@Html.LabelFor(model => model.OPTION_NAME, new { @class = "control-label col-md-2" })
                            <div class="col-md-10">*@

                        @*@Html.EditorFor(model => model.OPTION_NAME)*@
                        @*@Html.HiddenFor(model => model.faculty_activation_date, new { @Value = System.DateTime.Now })*@
                        @Html.HiddenFor(model => model.OPTION_NAME)
                        @Html.ValidationMessageFor(model => model.OPTION_NAME)



                        <div class="form-group">
                            @*@Html.LabelFor(model => model.OPTION_VALUE, new { @class = "control-label col-md-2" })*@
                            <div class="col-md-10">
                                @Html.LabelFor(model => model.OPTION_VALUE, "Option Value")
                                @*<textarea class="form-control" placeholder="Enter Option Value" name="OPTION_VALUE" id="editor1"></textarea>*@
                                @Html.TextAreaFor(model => model.OPTION_VALUE, new { @class = "form-control", @id = "editor1" })
                                @Html.ValidationMessageFor(model => model.OPTION_VALUE, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        @*<div>

                                @Html.LabelFor(model => model.OPTION_VALUE, "Option Value")
                                @Html.TextAreaFor(model => model.OPTION_VALUE, new { @type = "textarea", @id="editor1", @class = "form-control", @placeholder = "Enter Option Value", @autocomplete = "on" })
                                @Html.ValidationMessageFor(model => model.OPTION_VALUE, null, new { @class = "text-danger" })
                            </div>*@

                        @*<div class="form-group">
                                @Html.LabelFor(model => model.ACTION_STATUS, new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.ACTION_STATUS)
                                    @Html.ValidationMessageFor(model => model.ACTION_STATUS)
                                </div>
                            </div>*@

                    </div>

                    <div class="panel-footer">
                        <div class="panel-title">
                            <div class="form-actions no-color">
                                <input type="submit" value="Save" class="btn btn-success" />
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

}

@*<div>
        @Html.ActionLink("Back to List", "Index")
    </div>*@

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="https://cdn.ckeditor.com/4.5.7/standard/ckeditor.js"></script>
<script>
    $(function () {

        CKEDITOR.replace('editor1');
    });
</script>
}

Please what do I do.

I use CKEDITOR

Answer 1

XSS error ("A potentially dangerous Request.Form value was detected from the client(...)"). Solution:

[ValidateInput(false)]

Differnce b/w them

AllowHtml:

The AllowHtml attribute can be applied to a Model property and it will disable the validation by ASP.Net MVC only for that particular property

Advantages The AllowHtml attribute is developed for Model class. The Scope is limited to specific property of the Model class. It is the safe and recommended solution.

ValidateInput

The ValidateInput attribute can be applied to a Controller’s Action method and it will disable the validation by ASP.Net MVC only for that particular Action method.

Advantages

The Scope is limited to specific Action method of the Controller class. If you have multiple properties accepting HTML content, then this method will reduce redundancy. When Model class is not used for designing Form elements then this attribute is needed.For complete details Link

Answer 2

Just place ValidateInput(false) attribute on controller's action.

[HttpPost]
[ValidateInput(false)]
public ActionResult EditRegistrationGuideline(long id, OPTIONS options)

The other option is to place [AllowHtml] attribute on Model Property, have a look on SO post to get difference between them

ValidateInput(false) vs AllowHtml