HTTP 到 HTTPS（样式表、js、css-sprites 等）重新加载答案

【问题标题】：HTTP to HTTPS (stylesheets, js, css-sprites, etc) reloadingHTTP 到 HTTPS（样式表、js、css-sprites 等）重新加载
【发布时间】：2011-11-08 13:01:19
【问题描述】：

这个问题与混合内容错误无关。即将推出网站。当我从 http://example.com 导航到 https://example.com 时，我注意到 css/js/etc 被重新下载，因为我使用的是根相对路径：.

使用 http 嗅探器，我看到浏览器认为 https://www.example.com/_css/main.css 与 http://www.example.com/_css/main.css 不同（不是）。因此，完全相同的内容被下载了两次，导致网站从 http 导航到 https 看起来很慢（如果用户没有缓存这两个版本）。

有没有办法阻止这一切？用户几乎总是会首先访问该站点的非 ssl 版本，所以是否有一个脚本会等到加载 http 内容而不是强制将 https 版本放入用户缓存中？或者我应该只在每个页面和每个 css 背景图像上使用绝对路径（https://www.example.com/_css/main.css）（只有 2 个我使用精灵）。还是我们只是忍受它？谢谢。

【问题讨论】：

请以example.com和朋友为例。 mysite.com 是一家真正的托管公司，不需要指向他们的虚假链接给他们 404 错误。
已修复...抱歉

标签： javascript css ssl http-headers

【解决方案1】：

您可以引用不带协议说明符的文件，例如：

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

【讨论】：

这些将解析为已被使用的相同 URI，因此不会改变任何内容。
基本上这已经发生了。浏览器只是认为 https main.css 与 http main.css 不同，因此它在技术上是不同的资源，但内容相同......有点sux。

【解决方案2】：

使用 http 嗅探器，我看到浏览器认为 https://www.mysite.com/_css/main.css 与 http://www.mysite.com/_css/main.css 不同（不是）。

这是具有相同内容的不同资源。浏览器无法知道它们将具有相同的内容。

您可以从一个重定向（使用 301）到另一个，因此您没有非 SSL 版本。

有没有办法阻止这一切？

不是真的。

用户几乎总是会首先访问网站的非 SSL 版本，所以是否有一个脚本会等到加载 http 内容而不是强制将 https 版本放入用户缓存中？

没有。如果一个 URL 可以为任意其他 URL 预缓存内容，那将是一个可怕的安全问题。

或者我应该只在每个页面和每个 css 背景图像上使用绝对路径（https://www.mysite.com/_css/main.css）（我只有 2 个使用精灵）。

这可行，但会导致内容混合问题。

或者我们只是忍受它？

是的。

【讨论】：

关于安全问题的好点，没有想到这一点。好吧，我想我会忍受它，直到互联网之神想出一个替代方案。和平。
至于 javascript 解决方案，我的想法是：headjs.com。在加载样式之前，javascript覆盖默认功能的地方......沿着这些线。就像加载http main.css和页面的其余部分，然后触发加载https版本的js代码。

【解决方案3】：

您可以使用 .htaccess RewriteRule 每次加载 https 内容；或者在 html 的 http 版本中指定的重定向标头会运行得更慢（额外的往返），但我相信其他方面也一样。

【讨论】：

【解决方案4】：

有几种方法可以解决此问题。

使用base tag。然后为您的资源使用相对路径，并且缓存将被认为适用于 http 和 https，尽管实际上它只是在 https 上加载。 Demonstration

<base href="https://example.com/" />
当用户以 Apache 方式访问网站时，将所有内容重定向到 SSL (Redirect SSL)

Redirect permanent / https://example.com/login

【讨论】：

强制 ssl 并不能解决这个问题，它仍然会从非 ssl 版本重定向到 ssl 版本，给用户一个警告！
实际上强制 SSL 确实解决了这个问题，wiki.apache.org/httpd/RewriteHTTPToHTTPS。但真正的标签正是他们想要的。这将导致页面每次加载要从 https:// 版本加载的内容，无论其他一切是否安全。不知道您使用的是什么浏览器，但您的警告是一个孤立事件。

【解决方案5】：

使用协议相对路径。

不是这个

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

使用这个

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

那么它将使用父页面的协议。

【讨论】：