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
Thank You Angel! This does work.
Consider the situation where the user enters and saves some text such as:
<script>alert('hi!');</script>
I am going to attempt to attach a screen shot of the result, but I think you get the idea.
So this solution displays the saved html correctly but does not protect against an XSS attack. Please correct me if I am wrong about this.
My application is in development currently but when we go to production I don't think we can approach the problem this way.
What are your thoughts?
Thanks again,
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:
"<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>";
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 = "<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>";
$("#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