Problems with editor showing html tags

5 posts, 1 answers
  1. Ryan
    Ryan avatar
    12 posts
    Member since:
    Jan 2013

    Posted 19 Apr 2013 Link to this post

    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?

  2. Answer
    Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 23 Apr 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Ryan
    Ryan avatar
    12 posts
    Member since:
    Jan 2013

    Posted 23 Apr 2013 Link to this post

    Thanks Dimo.

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

    Cheers,

    Ryan
  5. Joe Hakooz
    Joe Hakooz avatar
    65 posts
    Member since:
    Dec 2007

    Posted 04 Aug 2014 Link to this post

    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
  6. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 06 Aug 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready