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.

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

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.

推荐答案

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

I found a good answer here.

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

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

更新答案

为了提供更完整的答案，协议相对 URL 通过从浏览器正在查看当前页面的任何协议请求资源来帮助避免混合内容错误.当您的站点的页面同时使用 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.

示例

因此，如果我们使用协议相对 url 来链接到资源.

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= 加载拉托

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

进一步阅读

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

这篇关于https 混合内容错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！