Potentially dangerous Request.Form value only from IE8

Question

I have a Facebook-style modern button control whose client side markup looks like:

<button id="ctl00_uxBtn" value="ctl00$uxBtn" name="ctl00$uxBtn type="submit">
  <div style="background-image: url("Icons/page_edit.png"); background-position: left center; background-repeat: no-repeat; line-height: 16px; padding: 3px 0pt 3px 22px;">Save Draft</div>
</button>

This button works fine with both IE and FF using the Visual Studio 2010 web server, but when I deploy the application to the server (Windows Server 2008/IIS 7.0) I get "A potentially dangerous Request.Form value was detected" error, but only with IE. It appears that IE is passing the ctl00_uxBtn="<div style="background-image:..." markup in the Request.Form collection, which IIS correctly interprets as a potential script injection vulnerability. As best I can tell, FF passes ctl00_uxBtn="ctl00$uxBtn" which is perfectly acceptable. Is there any way to force IE into more FF-like behavior? I do not want to disable request validation.

Answer 1

You need to use the proper quotes:

<button id="ctl00_uxBtn" value="ctl00$uxBtn" name="ctl00$uxBtn" type="submit">
  <div style="background-image: url('Icons/page_edit.png'); background-position: left center; background-repeat: no-repeat; line-height: 16px; padding: 3px 0pt 3px 22px;">Save Draft</div>
</button>

I would recommend you not mixing CSS and markup and externalize this rule into a separate CSS:

.edit {
    background-image: url('Icons/page_edit.png'); 
    background-position: left center; 
    background-repeat: no-repeat; 
    line-height: 16px; 
    padding: 3px 0pt 3px 22px;
}

and then apply it to the div:

<button id="ctl00_uxBtn" value="ctl00$uxBtn" name="ctl00$uxBtn" type="submit">
  <div class="edit">Save Draft</div>
</button>

This will make your markup much cleaner, preserve bandwidth and avoid you errors like the one that you made about using the proper quotes.

Answer 2

IE insists on sending the content between <button> and </button> as the value of the button, and there does not appear to be a way to prevent it. So, we intercept the request on the client side using an onsubmit event handler as such:

<form id="form1" runat="server" onsubmit="fixModernButton()">

Our javascript function then checks if the browser is IE and if the button's innerHTML property starts with "<". If so, it is markup and will cause ASP.Net to raise the "Potentially dangerous Request.Form value" error, so we set the value of the innerHTML property to the value of the innerText property then submit the form. The source for the javascript function is:

function fixModernButton() {
    if (navigator.appName === 'Microsoft Internet Explorer') {
        if (document.activeElement.innerHTML && document.activeElement.innerHTML.charAt(0) === '<') {
            document.activeElement.innerHTML = document.activeElement.innerText;
        }
    }
    document.forms['form1'].submit();
}