I teach two ASP.NET courses as the University of California - San Diego Extension. In the second course students use forms-based authentication and ASP.NET's membership framework to create a web application that supports user accounts. Invariably, at least one student bumps into the following scenario:
- The website's formatting and layout is defined via CSS rules, which are located in one or more .css files.
- The URL authorization settings have configured such that web pages on the site can only be accessed by authenticated users. That is, the <authorization> section in the Web.config file in the root folder contains the following markup:
<authorization>
<deny users="?" />
</authorization>
Some students lock down the entire site to authenticated users only. Others may have one or more <location> elements that open up access to specific pages to anonymous users, or have a separate folder with its own <authorization> settings that allow anonymous access to the pages within.
- The website is served using the ASP.NET Development Server, which is the lightweight web server that ships with Visual Studio and is launched when you run a file system-based web application from the IDE.
When the above conditions hold, students find that when visiting their site those CSS formatting and layout rules defined in the .css file(s) are not applied for anonymous visitors. For example, when visiting the login page, the website's colors and fonts and layouts defined in the .css file(s) are not in effect. However, once the visitor signs into the site, the CSS rules take effect.
What's going on here?
The reason the CSS rules are not applied when the site is visited by an anonymous user is because of how the ASP.NET Development Server handles web requests. In a nutshell, every single request that arrives to the ASP.NET Development Server - be it for an ASP.NET page or a CSS file - is dispatched to the ASP.NET engine for processing. Consequently, the URL authorization rules defined in Web.config apply to the CSS files as well as the ASP.NET pages. So when an anonymous user visits, the page includes the <link> elements to the CSS files and the browser requests them, but the web server responds with a redirect response to the login page. As a result, the browser does not get the CSS content and that's why CSS rules do not apply for anonymous users (and why they start applying once the visitor signs in).
The simplest workaround is to configure the URL authorization rules to allow anonymous users to access the CSS files. If you have the CSS files in a separate folder (such as /Styles), then you can simply add a Web.config file to that folder with the following <authorization> settings:
<authorization>
<allow users="*" />
</authorization>
If the CSS files are in the root folder, then you will need to add a <location> element in the root folder's Web.config file for each CSS file and use the above markup to permit anonymous users to access those files. For more on using the <location> element, refer to location Element (ASP.NET Settings Schema).
Finally, keep in mind that the behavior described here only occurs when the web server dispatches requests for CSS files to the ASP.NET engine. As aforementioned, this is the behavior of the ASP.NET Development Server; however, this is not the default behavior of IIS. By default, IIS handles request for static content itself, meaning that ASP.NET's URL authorization rules will not apply to CSS files, JavaScript files, images, ZIP files, and so on, although it is possible to instruct IIS 7 to integrate it's security checks with ASP.NET's configuration via the Integrated Pipeline mode. See Apply ASP.NET Authentication and Authorization Rules to Static Content with IIS 7.0's Integrated Pipeline Feature for more information.