Archivo CSS no carga en pantalla de Login de ASP.NET WebForm

Uno de los problemas mas habituales que ocurren al desarrollar una aplicación web con ASP.NET Webform, es al momento de establecer una pantalla de inicio de sesión y lógicamente colocar una restricción a todos los formularios internos de la aplicación. El problema está en que, mientras estemos en la pantalla de login (Inicio de sesión), observaremos terriblemente como quedan bloqueados también los archivos CSS, los archivos Javascript y en algunos casos incluso las imágenes.

¿Por qué los archivos CSS no cargan en la pantalla de inicio?

Cuando establecemos una seguridad por autentificación en nuestro archivo WEBCONFIG, comúnmente agregamos el siguiente código.

    <authentication mode="Forms">
      <forms loginUrl="~/Account/login.aspx" protection="All" />
    </authentication>

    <authorization>
      <deny users="?"/>
    </authorization>

El código anterior lo que garantiza es que todos los usuarios anónimos, deban pasar primero por la pagina de Login.aspx, por tanto, todos los demás recursos quedan bloqueados. El problema, es que también bloquean recursos como imágenes, CSS y JS.

¿Cómo solucionamos el problema de carga de archivos CSS en la pantalla de inicio?

Deben seguirse dos pasos importantes:

El primero, es agregar en el Webconfig, después del system.web, la etiqueta location para definir la carpeta o archivos que deseamos ignoren la autentificación; mi recomendación es definir la carpeta, para no llenar el webconfig con tantos location, quedando algo así:

    <location path="Content">
	    <system.web>
		    <authorization>
			    <allow users="?" />
		    </authorization>
	    </system.web>
    </location>

La carpeta Content en esté caso contiene todos los archivos de hoja de estilo de la aplicación, por tanto, no tengo que agregar mas location por cada archivo, repetimos esa acción por cada carpeta principal a la cual deseamos dejar libre de autentificación.

El apartado <allow users=»?» /> es particularmente importante, pues le dice a nuestra aplicación que los usuarios anónimos serán los permitidos.

¿Qué sucede si mi problema no se resuelve y aun no puedo acceder a mis archivos CSS desde la página de inicio?

El segundo paso, si el proceso anterior no resuelve tu problema, entonces seguramente tienes que configurar un paso mas en tu ISS, te mostrare a continuación lo que debes hacer.

Primero: Abre el ISS y ve a tu sitio web

Segundo: Ahora en la parte derecha, donde están las opciones y herramientas, ve al grupo ISS y busca “Autenticación”

Tercero: Nos fijamos que la autentificación anónima esté habilitada (obviamente si no lo está la habilitamos), luego damos clic derecho y presionamos en modificar.

Cuarto: Por último, en donde dice “Usuario específico”, debemos dejar (Mi recomendación para una mayor seguridad) el usuario del pool de aplicaciones que tenemos disponible y que tiene acceso al ISS, si no lo conocemos, entonces seleccionamos “Identidad del grupo de aplicaciones” y damos clic en el botón “Aceptar”

Con lo anterior aplicado, reiniciamos nuestra aplicación, y accedemos desde nuestro navegador, veremos que nuestro problema fue resuelto.