https混合内容错误 [英] https Mixed Content errors

问题描述

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

We're getting allot of Mixed Content errors on the cart page of our Magento Store

 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字体文件正在我们主题的head部分通过http

I can see the google font file is being called in the head section of our theme via http

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

我想知道如果我将上面的行更改为以下是解决此问题的最佳方法：

I'm wondering what is the best way to solve this issue should I change the line above to:

选项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，这似乎是一个非常好的方法。

Which is the best method considering most of our site uses http? I was not aware of Option 2, it seems like a very good approach.

推荐答案

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

I found a good answer here.

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

The second option, protocol relative links seems to be the best option.

更新的答案

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

To give a more complete answer, protocol relative URLs help to avoid Mixed Content errors by requesting the resource from whatever protocol the browser is viewing that current page through. This is really useful when your site has pages that use both http & https, as in my case checkout page was being loaded over https while the rest our site uses http.

示例

因此，如果我们使用协议相对网址链接到资源。

So if we use a protocol relative url to link to a resource.

<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 加载。

When we're on https://www.magento.com/onestepcheckout/index/ the resource will be loaded via https, https://fonts.googleapis.com/css?family=Lato.

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

And if we're on http://www.magento.com/ the resource will be loaded via http http://fonts.googleapis.com/css?family=Lato

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

This will avoid any Mixed Content Errors.

警告

使用此功能时需要考虑以下几点尽管如此。

There are a few things to consider when using this approach though.

1. IE6不知道如何使用hanler协议相对网址。 IE6的浏览器市场价格低于 1.7％。


2. IE7& ; IE8支持协议相对URL，但它们最终会两次获取
   资源。一旦从HTTP和一次通过HTTPS，这将减慢
   的事情。同样，这些旧浏览器只占浏览器市场的极少。


3. 不适用于所有电子邮件客户端（例如Outlook），因此请避免在HTML电子邮件中使用协议相对网址


4. 您必须确保您请求的服务器能够提供内容服务HTTP和HTTPS。如果不是，您可能最终从不安全或不存在的服务器端口获取内容。

1. IE6 does not know how to hanler protocol relative urls. IE6 has less than 1.7% of the browser market.
2. IE7 & IE8 support protocol relative URLs but they’ll end up fetching the resource twice. Once from HTTP and once over HTTPS, which will slow things down. Again, these older browsers account for very little of the browser market.
3. Does not work in all email clients (e.g Outlook), so avoid using protocol relative urls in HTML emails
4. You have to be sure that the server you’re requesting from is capable of serving content over both HTTP and HTTPS. If not you might end up fetching content from an unsecured or nonexistent server port.

进一步阅读

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混合内容错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！