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.

我可以看到google字体文件是通过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

我在这里找到了一个好的答案.

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

更新的答案

为了给出更完整的答案,协议相对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不知道如何使用hanler协议相对URL.IE6 的浏览器市场不到1.7%.
2. IE7和IE8支持协议相对URL,但它们最终会两次获取资源.一旦通过HTTP,一次通过HTTPS,这将减慢速度.同样,这些旧版浏览器占浏览器市场的很少.
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 /相对协议的URL /