Solicitud potencialmente peligrosa. Valor de forma solo de IE8

Question

Tengo un control de botón moderno de estilo de Facebook cuyo marcado del lado del cliente parece:

<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>

Este botón funciona bien con IE y FF utilizando el servidor web de Visual Studio 2010, pero cuando implemento la aplicación en el servidor (Windows Server 2008 / IIS 7.0) i Obtengo "Se detectó un valor de solicitud Potencialmente peligroso.Error, pero solo con IE.Parece que, es decir, está pasando el CTL00_UXBTN="

Answer 1

IE insiste en enviar el contenido entre y como el valor del botón, y no parece haber una manera de evitarlo.Por lo tanto, interceptamos la solicitud en el lado del cliente utilizando un controlador de eventos ONSUBMIT, como tal:

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

Nuestra función JavaScript luego verifica si el navegador es IE y, si la propiedad INNERHTML del botón comienza con "<".Si es así, es un marcado y causará que ASP.NET elevará el error "Valor de solicitud potencialmente peligroso", por lo que establecemos el valor de la propiedad INNERHTML en el valor de la propiedad INNERTEXT y luego envíe el formulario.La fuente de la función JavaScript es:

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();
}

Answer 2

Necesitas usar las cotizaciones correctas:

<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>

Le recomendaría que no mezcle CSS y Markup y externalice esta regla en un CSS separado:

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

y luego aplicarlo al div:

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

Esto hará que su marcado sea mucho más limpio, preservará el ancho de banda y evitará errores como el que realizó con las citas correctas.