Problems with editor showing html tags

[Ryan]

I'm having a problem after server side validation fails and the model is returned to the editor.

Here is the code for the model field that needs to be edited using the kendo editor:

[Required]
[MaxLength(120, ErrorMessage = "You must enter less than 120 characters.")]
public string HelpContent { get; set; }

At the moment the HelpText filed has the following data in the database:

<p>Bacon ipsum dolor sit amet shoulder tenderloin corned beef, hamburger chicken ham hock strip steak.</p>

When the page is initially displayed the text above is rendered in the kendo editor as expected (with styles instead of html tags - see goodeditor image). Inspecting Model.HelpContent within the razor code shows that the field contains the above code.

When the form is submitted with the above content, the content is encoded so that it looks like:

<p>Bacon ipsum dolor sit amet shoulder tenderloin corned beef, hamburger chicken ham hock strip steak.</p>

The ActionResult that is handling the post:

public ActionResult EditRepositoryHelp(RepositoryHelpEditModel repositoryHelpEditModel)
{
    if (ModelState.IsValid)
    {
        repositoryHelpEditModel.HelpContent = HttpUtility.HtmlDecode(repositoryHelpEditModel.HelpContent);
        Repository.UpdateRepositoryHelpText(repositoryHelpEditModel);
        return RedirectToAction("Index", "Admin");
    }

    repositoryHelpEditModel.HelpContent = HttpUtility.HtmlDecode(repositoryHelpEditModel.HelpContent);
    return View(repositoryHelpEditModel);
}

Inspecting the repositoryHelpEditModel.HelpContent field shows the encoded content, which is under 120 characters so it is decoded and saved to the database.

However, when the text is updated so that there are more than 120 characters and then the form submitted,  the validation fails (since the length of repositoryHelpEditModel.HelpContent is > 120). For example if I add the text "More text." to the editor and submit then the value of repositoryHelpEditModel.HelpContent will be:

<p>Bacon ipsum dolor sit amet shoulder tenderloin corned beef, hamburger chicken ham hock strip steak. More text.<br /></p>

Since the validation fails, HelpContent is decoded again and the model is returned to the view to be displayed in the editor.

This time the text is rendered with html tags (see badeditor image) instead of showing marked up content.

Here is the code for the editor:

@( Html.Kendo().EditorFor(model => model.HelpContent)
                .Encode(true)
                .HtmlAttributes(new { style = "width:100%;height:440px" })
                .Tools(tools => tools.Clear()
                    .Bold().Italic().Underline().FontSize().FontColor().JustifyLeft()
                    .JustifyCenter().JustifyRight().JustifyFull().InsertUnorderedList()
                    .InsertOrderedList().Indent().CreateLink().ViewHtml()))

Is this a bug with the editor or am I doing something wrong here?

[Dimo]

Hello Ryan,

After validation the Editor displays the posted encoded value from the ModelState, not the modified decoded value. Here is why:

http://blogs.msdn.com/b/simonince/archive/2010/05/05/asp-net-mvc-s-html-helpers-render-the-wrong-value.aspx

There are two options:

1) Clear the ModelState in the controller's action method after the POST
2) Set Encode(false) for the Editor and set a [AllowHtml] attribute to the model property, so that the Editor's value is submitted non-encoded and you don't have to decode server-side.

All the best,
Dimo
the Telerik team

[Ryan]

Thanks Dimo.

I used the second approach and it's working now.

Cheers,

Ryan

[Joe]

The second approach also worked for me. However, aren't there SQL or JS injection concerns with this approach?

If so, is there any good documentation for using the Telerik MVC Editor and protecting from dangerous user input?

Thanks

[Dimo]

Hello Joe,

Non-encoded submitted content should always be validated server-side in order to prevent SQL injection.

With regard to JS injection, it doesn't matter whether the content is submitted encoded or non-encoded. If a <script> tag is included inside the Editor content, it will be executed no matter how it has been submitted previously. If <script> tags should not belong to the Editor content (which would normally be the case), then simply strip them from the submitted data. The same applies for any other unwanted markup or styling.

We have no special documentation related to Editor security, as one should follow the existing general web development best practices.

Regards,
Dimo
Telerik

 

 

[Max]

This fixed my issue thanks!

 

Set Encode(false)

[Mark]

Is there any reason why we cant just manually decode the the value in the model state on a validation fail? This cures the problem for me.

ModelState.SetModelValue("content", new ValueProviderResult(HttpUtility.HtmlDecode(model.content), "", System.Globalization.CultureInfo.InvariantCulture));

[Dimitar]

Hello Mark,

The Kendo UI Editor exposes the encoded option which can be used to specify if the submitted content of the widget will be with  encoded HTML tags or not. This way, the user has the ability to configure the desired behavior depending on the project requirements. 

Regards,
Dimitar
Progress Telerik