Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Randy Craven
715
igHtmlEditor - need suggestions for displaying stored html content securely
posted

Hello,

This post is not a technical problem with igHtmlEditor but rather a request for best practice suggestions.

My MVC project uses igHtmlEditor to allow the user to enter content, which is then stored in a database.  Later, this content will be retrieved for further editing.

To protect against scripting attacks, I am using Microsoft AntiXss.  Currently I store the user content in the database as-entered and sanitize the content prior to sending it back to the browser.

Here is some html that was created in the igHtmlEditor and then saved to the database.  This is exactly as expected.

<span style="font-family: Arial; font-weight: bold;">This is some bold text using the arial font.</span><div><span style="font-family: 'Comic Sans MS';">This is regular text using Comic Sans.</span></div><div><span style="font-family: 'Comic Sans MS';"><br></span><div><br></div></div>

After retrieving the content and sanitizing it, here is the sanitized html:

<span>This is some bold text using the arial font.</span><span>This is regular text using Comic Sans.</span><span></span>

Obviously this is not what is needed.

So I am wondering if anyone has suggestions for how to successfully send html back to the igHtmlEditor while at the same time protecting against a scripting attack.

Thank You!

Randy

Parents
  • 24671
    posted

    hey Randy,

    You can use the following API to encode the string from the HTML Editor :

    string output = AntiXss.HtmlEncode(<the string>);

    where "the string" is :

    <span style=\"font-family: Arial; font-weight: bold;\">This is some bold text using the arial font.</span><div><span style=\"font-family: 'Comic Sans MS';\">This is regular text using Comic Sans.</span></div><div><span style=\"font-family: 'Comic Sans MS';\"><br></span><div><br></div></div>

     

    This will result in the following encoded output:

    "&lt;span style=&quot;font-family: Arial; font-weight: bold;&quot;&gt;This is some bold text using the arial font.&lt;/span&gt;&lt;div&gt;&lt;span style=&quot;font-family: &#39;Comic Sans MS&#39;;&quot;&gt;This is regular text using Comic Sans.&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;font-family: &#39;Comic Sans MS&#39;;&quot;&gt;&lt;br&gt;&lt;/span&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;&lt;/div&gt;";       

     

    You can then store this value in the db, as you've described. In order to load it back to the editor, you can use the following code (note that i am applying this code on click of a button, but it can be placed anywhere in your code after the HTML editor has been initialized):

    $("#load").bind("click", function () {       

    var htmlString = "&lt;span style=&quot;font-family: Arial; font-weight: bold;&quot;&gt;This is some bold text using the arial font.&lt;/span&gt;&lt;div&gt;&lt;span style=&quot;font-family: &#39;Comic Sans MS&#39;;&quot;&gt;This is regular text using Comic Sans.&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;font-family: &#39;Comic Sans MS&#39;;&quot;&gt;&lt;br&gt;&lt;/span&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;&lt;/div&gt;";       

    $("#testEditor").igHtmlEditor("setContent", $('<div/>').html(htmlString).text(), "html");      

    });

     

    And here is the result :

     

     

    Hope it helps. Let me know if there is anything else i can assist with. Thanks,

    Angel

Reply Children