Search code examples
c#javascriptasp.net-mvcdecoding

How do I allow HTML tags to be submitted in a textbox in asp.net?


First, I want to let everyone know that I am using an aspx engine not a Razor engine.

I have a table within a form. One of my textbox contains html tags like

</br>Phone: </br> 814-888-9999 </br> Email: </br> aaa@gmail.com.  

When I go to build it it it gives me an error that says:

A potentially dangerous Request.Form value was detected from the client (QuestionAnswer="...ics Phone:<br/>814-888-9999<br...").

I tried the validation request="false" but it did not work.

I am sorry I didn't add my html code for you to look at so far. I am pulling some question up where I can edit it, if need be.

 <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master"   Inherits="System.Web.Mvc.ViewPage<dynamic>" %>


<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
EditFreqQuestionsUser
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
$(document).ready(function () {
    $("#freqQuestionsUserUpdateButton").click(function () {
        $("#updateFreqQuestionsUser").submit();
    });
});
</script>
<h2>Edit Freq Questions User </h2>

<%Administrator.AdminProductionServices.FreqQuestionsUser freqQuestionsUser =   ViewBag.freqQuestionsUser != null ? ViewBag.freqQuestionsUser : new   Administrator.AdminProductionServices.FreqQuestionsUser(); %>
<%List<string> UserRoleList = Session["UserRoles"] != null ? (List<string>)Session["UserRoles"] : new List<string>(); %>
<form id="updateFreqQuestionsUser" action="<%=Url.Action("SaveFreqQuestionsUser","Prod")%>" method="post" onsubmit+>
<table> 
    <tr>
        <td colspan="3" class="tableHeader">Freq Questions User Details <input type ="hidden" value="<%=freqQuestionsUser.freqQuestionsUserId%>" name="freqQuestionsUserId"/> </td>
    </tr>
     <tr>
        <td colspan="2" class="label">Question Description:</td>
        <td class="content">
            <input type="text" maxlength="2000" name="QuestionDescription" value="  <%=freqQuestionsUser.questionDescription%>" />
        </td>
    </tr>
     <tr>
        <td colspan="2" class="label">QuestionAnswer:</td>
        <td class="content">
            <input type="text" maxlength="2000" name="QuestionAnswer" value="<%=freqQuestionsUser.questionAnswer%>" />
        </td>
    </tr>
    <tr>
        <td colspan="3" class="tableFooter">
                <br />
                <a id="freqQuestionsUserUpdateButton" href="#" class="regularButton">Save</a>
                <a href="javascript:history.back()" class="regularButton">Cancel</a>
        </td> 
    </tr>
    </table>
      </form>
</asp:Content>

Solution

  • before the page is submitted you need to html encode the textbox's value, with window.escape(...)

    If you need the un-escaped text on the server side then use HttpUtility.UrlDecode(...) method.

    very quick sample:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="SO.WebForm1" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script>
            function makeSafe() {
                document.getElementById('TextBox1').value = window.escape(document.getElementById('TextBox1').value);
            };
    
            function makeDangerous() {
                document.getElementById('TextBox1').value = window.unescape(document.getElementById('TextBox1').value);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server" onsubmit="makeSafe();">
        <div>
            <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Rows="10" ClientIDMode="Static"></asp:TextBox>
        </div>
        <asp:Button ID="Button1" runat="server" Text="Button" />
        </form>
    
    
         <script>
             makeDangerous();
        </script>
    </body>
    </html>
    

    Make these changes to your code:

    <script type="text/javascript">
        $(document).ready(function () {
            makeDangerous();
            $("#freqQuestionsUserUpdateButton").click(function () {
                makeSafe();
                $("#updateFreqQuestionsUser").submit();
            });
        });
    
        // Adding an ID attribute to the inputs you want to validate is simplest
        // Better would be to use document.getElementsByTagName and filter the array on NAME
        // or use a JQUERY select....
    
        function makeSafe() {
            document.getElementById('QuestionAnswer').value = window.escape(document.getElementById('QuestionAnswer').value);
        };
    
        // In this case adding the HTML back to a textbox should be 'safe'
        // You should be very wary though when you use it as actual HTML
        // You MUST take steps to ensure the HTML is safe.
        function makeDangerous() {
            document.getElementById('QuestionAnswer').value = window.unescape(document.getElementById('QuestionAnswer').value);
        }
    </script>