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'>

OR 选项2

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

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

Answer 1

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

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

更新的答案

为了给出更完整的答案，协议相对URL通过从浏览器查看当前页面的任何协议请求资源来帮助避免混合内容错误。当您的网站包含同时使用http和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加载

这样可以避免任何混合内容错误。

<强>注意事项

虽然使用这种方法有几点需要考虑。

IE6不知道如何使用hanler协议相对网址。 IE6的浏览器市场不到1.7%。

IE7＆amp; IE8支持协议相对URL，但它们最终会获取资源两次。一旦从HTTP和一次通过HTTPS，这将减慢事情发生了。同样，这些旧浏览器只占browser market。
的很少
不适用于所有电子邮件客户端（例如Outlook），因此请避免在HTML电子邮件中使用协议相对网址

您必须确保您请求的服务器能够通过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/

https混合内容错误

1 个答案: