javascript - HTTP to HTTPS (stylesheets, js, css-sprites, etc) reloading - Stack Overflow

admin管理员组

文章数量:1432573

This question has nothing to do with the mixed content error. About to launch a site. When i navigate from to , i notice that the css/js/etc is redownloaded as i am using root relative paths: .

Using an http sniffer i see that the browser thinks .css is different than .css (its not). Thus the same exact content is downloaded twice causing the site to look slow navigating from http to https (if the user doesn't have both versions cached already).

Is there anyway to stop this? The user will almost always hit up the non-ssl version of the site first so is there a script that will wait until the http content is loaded than maybe force a https version into the users cache? Or should i just use absolute paths (.css) on ever page and on every css background image (only 2 i use sprites). Or do we just live with it? Thanks.

This question has nothing to do with the mixed content error. About to launch a site. When i navigate from http://example. to https://example., i notice that the css/js/etc is redownloaded as i am using root relative paths: .

Using an http sniffer i see that the browser thinks https://www.example./_css/main.css is different than http://www.example./_css/main.css (its not). Thus the same exact content is downloaded twice causing the site to look slow navigating from http to https (if the user doesn't have both versions cached already).

Is there anyway to stop this? The user will almost always hit up the non-ssl version of the site first so is there a script that will wait until the http content is loaded than maybe force a https version into the users cache? Or should i just use absolute paths (https://www.example./_css/main.css) on ever page and on every css background image (only 2 i use sprites). Or do we just live with it? Thanks.

• javascript
• css
• ssl
• http-headers

Share Improve this question Follow edited Sep 1, 2011 at 16:42 Steve asked Sep 1, 2011 at 16:05 SteveSteve 11577 bronze badges 2

• Please use example. and friends for examples. mysite. is a real hosting pany and don't need fake links pointing at them giving them 404 errors. – Quentin Commented Sep 1, 2011 at 16:14
• fixed...sorry about that – Steve Commented Sep 1, 2011 at 16:43

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

Using an http sniffer i see that the browser thinks https://www.mysite./_css/main.css is different than http://www.mysite./_css/main.css (its not).

It is a different resource with identical content. The browser has no way to know that they are going to have the same content.

You can redirect (with a 301) from one to the other so you don't have a non SSL version.

Is there anyway to stop this?

Not really.

The user will almost always hit up the non-ssl version of the site first so is there a script that will wait until the http content is loaded than maybe force a https version into the users cache?

No. It would be a horrible security problem if a URL could precache content for arbitrary other URLs.

Or should i just use absolute paths (https://www.mysite./_css/main.css) on ever page and on every css background image (only 2 i use sprites).

That would work, but lead to mixed content issues.

Or do we just live with it?

Yes.

There are a couple ways to fix this.

1. Use a base tag. Then use relative paths for your resources and caching will be perceived to work for http and https, though really it was just loaded on https already. Demonstration

   <base href="https://example./" />

2. Redirect everything to SSL when the user hits the site the Apache way (Redirect SSL)

   Redirect permanent / https://example./login

You can use an .htaccess RewriteRule to load the https content every time; or a redirect header specified in the http version of the html would work more slowly (extra round-trip) but otherwise just as well, I believe.

Use protocol-relative paths.

Instead of this

<link rel="stylesheet" href="http://domain./style.css">
<link rel="stylesheet" href="https://domain./style.css"> 

use this

<link rel="stylesheet" href="//domain./style.css">

then it will use the protocol of the parent page.

You can reference the files without the protocol specifier, e.g.:

<link rel="stylesheet" type="text/css" href="//mysite./_css/main.css" />

See this post for more details:

Can I change all my http:// links to just //?

本文标签：