提到脚本的混合内容错误是否意味着问题来自 HTML <script> 标签?

does mixed content error mentioning script mean that the problem comes from an HTML <script> tag?

在 Google Chrome 的 Windows 中,我看到一个混合内容错误,它的内容如下所示:

Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure script 'http://...'. This request has been blocked; the content must be served over HTTPS.

此消息中的 script 一词是否暗示正在发生的事情是在初始 HMTL 有效负载中或稍后在 DOM 中通过 JS a <script> 正在创建指向前缀为 http:// 的标签 src?我可以确定此错误不是由其他类型的请求(例如 fetch() 或其他 XHR/AJAX 产生的吗?

我理解正确吗?

我正在查看 Chromium source code,错误消息中出现 script 一词似乎意味着“请求上下文类型”是 SCRIPT,但这是否意味着 HTML 带有 src 属性的脚本标签?

“根据 Google,当网站上的 HTML 通过安全 HTTPS 连接(由于最近安装了 SSL 证书)加载但其他内容(例如图像、视频)时,会出现混合内容内容、样式表和脚本,继续通过不安全的 HTTP 连接加载。” (来源here

您很可能因为上述原因而收到此错误。正在加载 http:// !这并不完全意味着如果它是通过脚本请求的,它也可以通过常规 HTML(有时)!

要查明到底是什么原因造成的,我建议您转到 Chrome 调试器的检查面板 然后清爽。在出现的资源列表中,其中一个或多个将具有类似于“已阻止:混合内容”的状态。然后,您可以通过查看 Initiator sub-tab 或简单地在您的代码中执行 Ctrl+F 并搜索它来找到它请求的位置,然后将其更改为 https://(如果适用)。

祝你好运!

TL;DR

消息中的“脚本”一词表示在这种情况下被阻止加载的特定 non-https 资源属于“脚本”类型。为什么首先生成 non-https 资源请求并没有包含在错误消息中...

大多数浏览器现在会阻止 http 资源加载到 https 站点。 最佳做法是对所有内容(主站点和该站点加载的所有内容)使用 https。

追踪那个 http 电话来自哪里...

  • 打开浏览器开发工具
  • 清除 cookies
  • 转到“网络”选项卡并禁用缓存
  • 刷新页面并查找被阻止的请求
  • 网络面板通常会显示一个“发起者”列,告诉您哪个 script/file 发起了呼叫。可能是 index.html,可能是其他脚本。如果您没有看到该列,它可能被隐藏了,右键单击列标题区域可能允许您选择显示哪些列。

更多详情

Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure_____ 'http://...'. This request has been blocked; the content must be served over HTTPS.

浏览器(不仅仅是 chrome)已经将此作为一项安全功能执行了一段时间。

想象一下,您的电子商务网站 https://www.example.com 是安全服务的。但是,您不安全地从 http://www.example.com/site.js 加载 javascript 文件。由于 site.js 的服务不安全,它很容易被中间人 (MITM) 修改,以在结账时从您商店的顾客那里窃取信用卡号。

甚至像图片这样的被动(“显示”)内容在不安全地提供服务时也会出现问题。例如...man-in-the-middle 可以重写图像响应以重定向到另一个域上的另一个 URL,使他们能够为您的用户设置 cookie,以便稍后为您的客户提供竞争对手的广告。或者只是更改您网站上的图像以显示其他内容。

总的来说,网络已仅对所有网站转移到 https。来自 LetsEncrypt 的免费 auto-renewing、domain-validation 证书的可用性使得这相对 trouble-free.

Server Name Indication (SNI) TLS 扩展支持(Windows XP 之后的所有主要操作系统)也意味着即使从同一 IP 地址为不同的域提供服务,https 也能正常工作(cheap/budget 共享主机)。所以真的没有借口不默认使用 https。

当前的最佳实践(只是基础知识......您可以做更多):

  • 将您域的所有 http 重定向到 https
  • 利用 certbot 自动从 LetsEncrypt 为您的域接收 domain-validated 证书。所有现代 web-hosting 公司都应该自动为您处理此问题。如果您 run/manage 您自己的服务器,那么您需要自己设置 certbot
  • 您网站加载的所有资源(样式表、脚本、图像、字体)都应该 https。如果您在不同的子域上使用 CDN,那也应该是安全的。
  • 使用 http-only,保护 cookie。
  • 使用 content security policy 锁定哪些 domains/resources 允许在您的网站上访问(防止被黑的 third-party 资源通过调用未经授权的域轻松泄露您的用户数据)。
  • 如果您正在处理敏感数据,您可以做更多事情...

一些示例场景...

  • 发起者:index.html - 对该脚本的引用在实际的 html 文件中。
  • 启动器:site.js - 启动器位于您站点的 javascript 文件之一或 react/vue/angular/etc javascript 应用程序
  • 的配置中
  • 发起者:gtm.js - 发起者在 google 标签管理器中。在 google 标签管理器界面中检查您的像素...很可能是自定义 html 像素需要从 http 更新到 https。
  • 发起者:site.css - 您的 css 文件中可能有字体或图像 url 需要从 http 更新到 https。
  • 发起者:some-plugin.js - 某些 wordpress 插件或您添加到站点的其他 javascript-based 小部件正在生成不安全的请求。

参考资料