We help IT Professionals succeed at work.

Allow HTML tags within Textbox

BlueYonder
BlueYonder asked
on
I would like to be able to allow HTML tags in a textbox.  I've disabled the validation for the time being, but do not like that option.  The other option that I tried was to use a rich textbox editor, but this is too slow.  Are there any other options.  The textbox is within an active server control.
Comment
Watch Question

ToL

Commented:
What about to use CK Editor instead of Text box or Rich Text box?

Author

Commented:
Ckeditor or any type of editor takes a while to load on the page
ToL

Commented:
And to replace all < and > with for example [ and ] by javascript and return them back to < and > on server side?

Author

Commented:
The textbox still needs to show the information that was typed in
ToL

Commented:
You can have there two textboxes - one visible and editable and second hidden a filled by java script with content that will be send to server...
nishant joshiTechnology Development Consultant

Commented:
add onTextChange event and find char < or > and return text back to textbox..

Commented:
Well this is kind of an old conundrum. It really boils down to "If you want to allow special characters you will have to turn ValidateRequest to false."

Basically there is no perfect solution for validating user input except to not allow anything "special". So by turning ValidateRequest off you are saying "I'll take responsibility for parsing the user (potentially malicious) input".

Obviously you want to use some sort of htmlencoding and potentially add further checks and balances if you wish (server.htmlencode, httputility.htmlencode, etc).

See this for more information:
http://msdn.microsoft.com/en-us/library/ff649310.aspx

Of particular interest to you may be Step 4 and/or 5. This is a bit old but from the context of your issue I believe it is still relevant to you (wont work out in asp.net 4.0, but you wouldnt be using validaterequest=false if you were using 4.0).

Below is my own encode/decode demonstration. I've used two methods (encoding/decoding on the server only and encoding before postback using some javascript). You can see you get differing results based on the type of html elements you are dealing with as well.

Alternately if you have found a rich text editor that gets around the validaterequest=false issue I will point out that many of the "pre-packaged" wsiwig's have options/properties to slim them down which should help you with the load time.

Hope this helps.
<label>User Input:</label>
<asp:TextBox ID="TxtUserInput" runat="server" Text="<html><body><div>text</div></body></html>" />
<asp:Button ID="BtnSubmit" runat="server" Text="Submit" 
  onclick="BtnSubmit_Click" />
<%--Use JavaScript to encode text before it is posted back--%>
<asp:Button ID="Button1" runat="server" Text="SubmitAlt" 
  OnClientClick="this.value = encodeURIComponent(this.value);" 
  onclick="Button1_Click" />		
<div>
    <h5>Encoded</h5>
    <div id="ReturnEnc1" runat="server" style="border: 1px solid red; width: 300px; height: 100px;">
    </div>
    <asp:TextBox ID="TxReturnEnc2" runat="server" />
</div>
<div>
    <h5>Decoded</h5>
    <div id="ReturnDec1" runat="server" style="border: 1px solid green; width: 300px;
      height: 100px;">
</div>
    <asp:TextBox ID="TxReturnDec2" runat="server" />
</div>

Open in new window

protected void BtnSubmit_Click(object sender, EventArgs e)
    {
        string encoded = HttpUtility.HtmlEncode(TxtUserInput.Text);

        ReturnEnc1.InnerHtml = encoded;
        TxReturnEnc2.Text = encoded;

        ReturnDec1.InnerHtml = HttpUtility.HtmlDecode(encoded);
        TxReturnEnc2.Text = HttpUtility.HtmlDecode(encoded);
    }

    //from this button the txtbox.text is already encoded via javascript
    protected void Button1_Click(object sender, EventArgs e)
    {
        string encoded = TxtUserInput.Text;

        ReturnEnc1.InnerHtml = encoded;
        TxReturnEnc2.Text = encoded;

        ReturnDec1.InnerHtml = HttpUtility.HtmlDecode(encoded);
        TxReturnEnc2.Text = HttpUtility.HtmlDecode(encoded);
    }

Open in new window