有没有办法全局捕获混合内容错误？
明确一点：我不想允许不安全的内容，我要做的就是优雅地处理错误。
背景故事：我正在集成程序化广告，也就是说我必须包含一些脚本标签，它会返回更多的 JavaScript，它可以加载更多的资源等等......
我无法控制访问我网站的内容，有时这些资源包括 http 资源，这会引发混合内容错误。然后我留下一个空的广告容器，看起来有点难看。另外，我可以尝试转售这个广告空间，因为第一次尝试失败了。
我已经尝试过window.onerror，但没有成功。
【问题讨论】：
标签： javascript https ads mixed-content
没有办法捕获混合内容警告，因为它们与 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 来拦截和处理不安全的请求。这可能是最好的解决方案，因为它可以让您全面了解您的网站尝试加载的数据。
【讨论】：
Upgrade-Insecure-Requests 是否总是决定选择 HTTP 而不是 HTTPS？虽然。
听起来您在解决混合内容政策方面遇到了问题。有许多方法可以解决并得出解决方案。
我的建议是不要使用 Google 提供和引用的一些文档：https://web.dev - Fixing Mixed Content。
当初始 HTML 通过安全的 HTTPS 连接加载，但其他资源（例如图像、视频、样式表、脚本）通过不安全的 HTTP 连接加载时，就会出现混合内容。这称为混合内容，因为加载 HTTP 和 HTTPS 内容以显示同一页面，并且初始请求通过 HTTPS 是安全的。
当此类基于首字母的 HTML 通过安全的 HTTPS 连接在网络上传输时，首先会出现混合内容。虽然，当您所说的其他资源时出现问题，例如：
...通过不安全的 HTTP 连接加载。这是所描述的混合内容问题的定义。这是因为与正在请求和加载以显示在所需来源的网站上的 HTTP 和 HTTPS 内容的资产有关的问题。主要问题是初始请求最初是通过 HTTPS 协议安全发送的。
注意：在继续之前，当过度使用不安全的HTTP传输协议请求这些子资源时，将会打开整个源站的漏洞。此类漏洞攻击称为on-path攻击。
根据您的网站用户群主要针对的浏览器，有一些修复和预防措施需要注意被谷歌浏览器等浏览器推出。这将在可能的情况下升级被动混合内容。这样的过程将决定资源资产是否可通过 HTTPS 获得，但确定它是否创建为通过 HTTP 协议提供服务，浏览器将改为加载 HTTPS 版本。所以总而言之，它将忽略 HTTP 资源。
内容安全政策 (CSP)
您需要参考此处链接的https://web.dev - Fixing Mixed Content 的以下部分。它将允许您利用可用于解决和管理混合内容问题的基于浏览器的实现。这允许并为实施不同的执法政策提供了机会。
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?。希望我能有所帮助。
完整的参考文献列表：
【讨论】：
每当处理混合内容时，我都会使用以下内容更新 .htaccess 文件：
Header always set Content-Security-Policy: upgrade-insecure-requests
这应该注意混合内容并确保通过 HTTPS 加载所有内容。
【讨论】：