Question

有没有办法全局捕获混合内容错误？

要明确：我不想允许不安全的内容，我想要做的就是优雅地处理错误。

背景故事：我正在整合程序化广告，即我必须包含一些脚本标记，它会返回更多JavaScript，可以加载更多资源等等。

我无法控制，我的网站会发生什么，有时这些资源包括http资源，这会引发混合内容错误。我然后离开了一个空的广告容器，看起来很难看。此外，我可以尝试转售此广告空间，因为第一次尝试失败。

我已经尝试过window.onerror，但没有用。

Answer 1

无法捕获混合内容警告，因为它们与 JavaScript 无关，而是由您的浏览器处理。

您可以做的是使用 Upgrade-Insecure-Requests 标头来防止浏览器完全加载不安全的内容。而且，根据您的用例，您可以使用 MutationObserver 对 HTML 中的更改做出反应，或在捕获阶段监听 document.body 上的错误事件以对错误做出反应：

<html>
  <head>
    <meta
      http-equiv="Content-Security-Policy"
      content="upgrade-insecure-requests"
    />
  </head>

  <body>
    <script>
      const el = document.createElement("img");
      el.src = "http://unsafeimg";
      document.body.appendChild(el);
      document.body.addEventListener(
        "error",
        (err) => {
          console.log("Failed to load\n", err.target);
        },
        /* Notice the true value here. It is required because Error Events do not bubble */
        true
      );
    </script>
  </body>
</html>

另一种选择是设置一个 Service Worker 来拦截和处理不安全的请求。这可能是最好的解决方案，因为这可以让您全面了解网站尝试加载的数据。

Answer 2

听起来您遇到了一个专门围绕修复混合内容政策的问题。有很多方法可以解决并得出解决方案。

我的建议是删除 Google 提供和引用的一些文档：https://web.dev - Fixing Mixed Content。

当初始 HTML 通过安全的 HTTPS 连接加载，但其他资源（例如图像、视频、样式表、脚本）通过不安全的 HTTP 连接加载时，会出现混合内容。这称为混合内容，因为 HTTP 和 HTTPS 内容都被加载以显示同一页面，并且初始请求通过 HTTPS 是安全的。

当这种基于初始的 HTML 通过安全 HTTPS 连接在网络上传输时，首先会出现混合内容。虽然，当您所说的其他资源时会出现问题，例如：

图片
视频
样式表
脚本

...通过不安全的 HTTP 连接加载。这是所描述的混合内容问题的定义。这是因为 HTTP 和 HTTPS 内容被请求和加载以显示在所需来源的网站上的资产存在问题。主要问题是初始请求最初是通过 HTTPS 协议安全发送的。

注意：在继续之前，当过度使用不安全的 HTTP 传输协议请求任何这些子资源时，将打开整个源站的漏洞。此类漏洞攻击称为on-path 攻击。

根据您的网站用户群主要针对的浏览器，有一些修复和预防措施需要注意的是由浏览器（例如 Google Chrome）推出。这将在可能的情况下升级被动混合内容。这样的过程将决定资源资产是否可通过 HTTPS 获得，但确定它是否是为通过 HTTP 协议提供服务而创建的，浏览器将改为加载 HTTPS 版本。所以总而言之，它将忽略 HTTP 资源。

<块引用>

内容安全政策 (CSP)

您需要参考此处链接的 https://web.dev - Fixing Mixed Content 的以下部分。它将允许您利用基于浏览器的实现来解决和管理混合内容问题。这允许并为实施不同的执法政策提供了机会。

要启用 CSP，您可以将网站设置为返回 Content-Security-Policy HTTP 标头。它取代了 X-Content-Security-Policy 旧政策。

我的建议是使用 <meta> HTML 元素。这将允许您自定义您信任的关于 CSP 的一般域，并使用此元素实施不同的自定义。

这是一个示例，您确实希望允许来自受信任域的任何资源内容，并且您可以使用替代格式来允许子域和其他方面授予所需的结果。注意子域设置之后的格式。

Content-Security-Policy: default-src 'self' example_trusted.com *.example_trusted.com

因此，在使用此功能时，您可以对某些资源（例如您决定信任的广告或图片）采取某种方法，但必须进行适当的设置。

一个模糊的例子可能是，没有星号：

content="default-src 'self' https://example.com http://example.com:80/images/"

由此得出结论：

https://example.com # Correct
http://example.com/images/ # (Missing) Incorrect Port 
http://example.com:80/images/image.jpg - Correct Port
https://example.com:81 # (Missing) Incorrect Port

您可以使用 Mozilla - Content-Security-Policy 中引用的类似方法，这可能有助于形成解决方案。

或者只是变得完全脆弱。 content="default-src * 'unsafe-inline' 'unsafe-eval'"

StackOverflow 上的许多参考资料，例如本文中引用的 How does Content Security Policy (CSP) work?。希望对我有所帮助。

完整的参考列表：

Answer 3

每当处理混合内容时，我所做的就是使用以下内容更新 .htaccess 文件：

Header always set Content-Security-Policy: upgrade-insecure-requests

这应该处理混合内容，并确保您通过 HTTPS 加载所有内容。

Javascript捕获混合内容错误以优雅地处理

3 个答案: