如何解决 Google-Chrome 控制台上的“混合内容”问题答案

【问题标题】：How to solve "Mixed content"-issue on Google-Chrome Console如何解决 Google-Chrome 控制台上的“混合内容”问题
【发布时间】：2016-07-17 12:29:04
【问题描述】：

我在显示以下内容时遇到问题：

混合内容：“https://www.feelhome.se/produkt/fighting-elephants/”处的页面通过 HTTPS 加载，但请求的样式表“http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,600italic,600,400italic,300italic,300,200italic,200”不安全。此请求已被阻止；内容必须通过 HTTPS 提供。

有没有人知道我该如何解决这个问题，这样它就不会出现？

【问题讨论】：

只需使用fonts.googleapis.com/… 注意https 而不是http
@toby 这个 http 出现在哪里？我能以某种方式获取它是从哪个文件中获取的吗？
我已经更新了我的答案，告诉你哪些文件导致了这个问题

标签： javascript css google-chrome google-console-developer

【解决方案1】：

问题在于，如果您将字体 url 更改为使用 https，您会使用 http 而不是 https 来加载字体。

所以你需要 https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,600italic,600,400italic,300italic,300,200italic,200

而不是 http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,600italic,600,400italic,300italic,300,200italic,200

要从 template.css 和 bootstrap.css 文件加载的字体接缝。看一下附图。

【讨论】：

我如何使用谷歌浏览器查看在哪些文件中进行修改？例如是 style.css 还是其他？
@RobinLundgren 在 chrome 开发工具中只需按 Ctrl+Shift+F 即可在所有文件中查找。
很棒的托比...我在那里学到了一些新东西，谢谢！你怎么知道它专门是 bootstrap + template.css？你是手动看的吗？
@RobinLundgren 我使用Ctrl+Shift+F 搜索fonts.googleapis，它给了我所有文件的列表，只需要查看哪个使用http 而不是https
s31.postimg.org/4yzljv8a3/Stack.jpg我确实喜欢这张图片，但它没有给我所有文件的列表？

【解决方案2】：

安全页面只有 https 资源（如样式表或图像）。当通过 http 加载一个或多个资源时，安全性可能会受到影响。这就是您收到的警告，您在 https 页面上有一些 http 资源。

有些人建议将https://example.com 放在所有内容的前面，我将建议其他内容：//example.com，请注意缺少 https 和 http。浏览器现在将自动添加 https。

这里的好处是，当您必须在两者之间切换时，您只需完成最少的工作。假设您有一个已经构建和运行的站点，并且在一段时间后决定使用 https...您所要做的就是更改您的 htaccess 并完成，您的所有资源都已准备好。

【讨论】：

所以你的意思是有一个相对链接而不是硬编码？例如，在上面的@tobys 答案中，我使用：//fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,600italic,600,400italic,300italic,300,200italic,200 而不是http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,600italic,600,400italic,300italic,300,200italic,200
是的，这就是我的意思。这不是相对的，相对的是当你链接到你自己的域上的东西，然后链接没有域（例如/images/）

【解决方案3】：

您拥有的内容可能不安全，因此您需要加载它 https 而不是 http。

【讨论】：