Introduction

It is often required to let users upload textual data that will later be displayed by a web browser. A perfect example of this case is the interface created for the code camp website where presenters need to upload a description of their presentation. Since what the user is entering will ultimately be displayed in a web browser by a different user, it is important not to let certain tags such as <script></script> be rendered. The reason is that if the user were to input the following text:

<script>alert("hello");</script>

The result would be that when some unsuspecting user goes to that page, they will see a "hello" dialog pop up on their screen. Even worse, they may find cookies stolen, nasty redirections or other malicious behavior caused by this executing javascript. The solution to this problem is to keep bad tags from ever being sent to the client's browser. This article gives a step by step method for doing this successfully.

The Solution

The solution is to store the information the user typed into the browser as encoded text. That is, things like <script></script> will be automatically turned into something that looks like the following.

<script></script>

The benefit of this is that if this information is redisplayed in the browser it will show exactly as it is above. The tags above will not actually cause any code to be executed in the browser. The problem then becomes what if you want some of the tags such as <p></p>, <b></b> or <i></i> to be rendered as tags? No problem, just some simple String.Replace commands and you are back in business.

So, as promised, here is the step by step.

First, when saving the string to the database, use the following expression.

string description = Context.Server.HtmlEncode(TextBoxDescription.Text);

Then, write a small function that will take the encoded string and only fix the tags you are interested such as paragraph, bold and italics. Here is a sample function used for that process.

/// <summary>
/// This static function will take an encoded string and
/// convert certain tags to their original format leaving
/// tags like <script></script> in their encoded state.
/// </summary>
/// <param name="oldHTML">encoded string coming in</param>
/// <returns>return string with certain tags decoded</returns>
public static string ConvertEncodedHTMLToRealHTML(string oldHTML)
{
    StringBuilder sb = new StringBuilder(oldHTML);
    // Selectively allow <b> and <i> and ...
    sb.Replace("&lt;b&gt;", "<b>");
    sb.Replace("&lt;/b&gt;", "</b>");
    sb.Replace("&lt;i&gt;", "<i>");
    sb.Replace("&lt;/i&gt;", "</i>");
    sb.Replace("&lt;p&gt;", "<p>");
    sb.Replace("&lt;/p&gt;", "</p>");
    sb.Replace("&lt;u&gt;", "<u>");
    sb.Replace("&lt;/u&gt;", "</u>");
    sb.Replace("&lt;br&gt;", "<br>");
    sb.Replace("&lt;/br&gt;", "</br>");
    sb.Replace("&lt;br/&gt;", "</br>");
    return sb.ToString();
}

To use the function, you would populate a Label control as follows:

<asp:Label 
  ID="LabelDescription" 
  Visible='<%# (bool) GetHideSessionDescription() %>' 
  runat="server" 
  Text='<%# (string) CheckForValidHTML((string) Eval("description")) %>'>
</asp:Label>

Then, you would put a function in your codebehind that calls ConvertEncodedHTMLToRealHTML as follows:

protected string CheckForValidHTML(string oldHTML)
{    
    return CodeCampSV.Utils.ConvertEncodedHTMLToRealHTML(oldHTML);
}

Conclusion

You now have a safe way to store full html in your database and display it safely. This method only displays certain html tags. You can of course expand the set of tags it stores as well use other methods to make the html safe to execute. The method presented here is just one very simple method.

That is it! You now have a safe way to store html in your database and then redisplay it.

About Peter Kellner

Sorry, no bio is available View complete profile