Question

How should I reference my css file (which is in the non-secure area) from a webpage in the secure area. I’ve considered duplicating it (moving one in to the secure area) but this seems very inefficient.

Any advice much appreciated.
(p.s. there will most likely be a few follow up questions ha ha)

Answer 1

You can always avoid the issue by using a relative/rooted path:

<link rel="stylesheet" href="/css/screen.css">

If you must use a full URL, I’m not sure why you can’t use the https protocol (which is the correct solution), but there’s one more option: don’t specify a protocol at all.

<link rel="stylesheet" href="//example.com/css/screen.css">

http://paulirish.com/2010/the-protocol-relative-url/

If the browser is viewing that current page in through HTTPS, then it’ll request that asset with the HTTPS protocol, otherwise it’ll typically* request it with HTTP. This prevents that awful “This Page Contains Both Secure and Non-Secure Items” error message in IE, keeping all your asset requests within the same protocol.

However:

Caveat: When used on a <link> or @import for a stylesheet, IE7 and IE8 download the file twice. All other uses, however, are just fine.

So if you must specify a full URL, the best/proper way is this:

<link rel="stylesheet" href="https://example.com/css/screen.css">

There’s really no alternative. Relative paths to images and resources in the CSS file itself should work just fine with either approach, and won’t trigger the security error. If you need absolute URLs in the CSS file, then you can use the same trick.