This is a migrated thread and some comments may be shown as answers.

Problems with editor showing html tags

7 Answers 975 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 19 Apr 2013, 11:01 AM
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:

&lt;p&gt;Bacon ipsum dolor sit amet shoulder tenderloin corned beef, hamburger chicken ham hock strip steak.&lt;/p&gt;

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:

&lt;p&gt;Bacon ipsum dolor sit amet shoulder tenderloin corned beef, hamburger chicken ham hock strip steak. More text.&lt;br /&gt;&lt;/p&gt;

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?

7 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 23 Apr 2013, 10:00 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ryan
Top achievements
Rank 1
answered on 23 Apr 2013, 11:03 AM
Thanks Dimo.

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

Cheers,

Ryan
0
Joe
Top achievements
Rank 2
answered on 04 Aug 2014, 03:29 PM
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
0
Dimo
Telerik team
answered on 06 Aug 2014, 09:00 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Max
Top achievements
Rank 1
answered on 21 Mar 2018, 02:05 PM

This fixed my issue thanks!

 

Set Encode(false)

0
Mark
Top achievements
Rank 1
answered on 05 Jul 2018, 09:15 AM

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));
0
Dimitar
Telerik team
answered on 06 Jul 2018, 12:20 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Editor
Asked by
Ryan
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Ryan
Top achievements
Rank 1
Joe
Top achievements
Rank 2
Max
Top achievements
Rank 1
Mark
Top achievements
Rank 1
Dimitar
Telerik team
Share this question
or