https 混合内容错误

Question

我们在 Magento 商店的购物车页面上收到大量混合内容错误

 Mixed Content: The page at 'https://www.magento.com/onestepcheckout/index/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Lato:400,300,700,900'. This request has been blocked; the content must be served over HTTPS.

我可以看到谷歌字体文件正在通过 http 在我们主题的 head 部分中调用

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

我想知道解决这个问题的最佳方法是什么，我应该将上面的行更改为：

选项 1

<link href='https://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

或 选项 2

<link href='//fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

考虑到我们的大多数网站都使用 http，哪种方法最好？我不知道选项 2，这似乎是一个非常好的方法。

Answer 1

我找到了一个很好的答案here。

第二个选项，协议相对链接似乎是最好的选择。

更新答案

为了给出更完整的答案，协议相对 URL 通过从浏览器查看当前页面所通过的任何协议请求资源来帮助避免混合内容错误。当您的网站有同时使用 http 和 https 的页面时，这非常有用，因为在我的情况下，结帐页面是通过 https 加载的，而我们网站的其余部分使用 http。

示例

所以如果我们使用协议相对 url 链接到资源。

<link href='//fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

当我们在 https://www.magento.com/onestepcheckout/index/ 时，资源将通过 https 加载，https://fonts.googleapis.com/css?family=Lato。

如果我们在 http://www.magento.com/ 上，资源将通过 http http://fonts.googleapis.com/css?family=Lato 加载

这将避免任何混合内容错误。

注意事项

不过，使用这种方法时需要考虑一些事项。

1. IE6 不知道如何处理协议相关 URL。 IE6 拥有不到1.7% 的浏览器市场。
2. IE7 和 IE8 支持协议相对 URL，但它们最终会获取 资源两次。一次来自 HTTP，一次通过 HTTPS，这会变慢 事情下来了。同样，这些旧浏览器在browser market 中所占的比例很小。
3. 不适用于所有电子邮件客户端（例如 Outlook），因此请避免在 HTML 电子邮件中使用协议相关 URL
4. 您必须确保您请求的服务器能够通过 HTTP 和 HTTPS 提供内容。否则，您最终可能会从不安全或不存在的服务器端口获取内容。

进一步阅读

https://developer.mozilla.org/en-US/docs/Security/MixedContent/How_to_fix_website_with_mixed_content http://www.paulirish.com/2010/the-protocol-relative-url/ http://billpatrianakos.me/blog/2013/04/18/protocol-relative-urls/