使用 javascript 检测混合内容答案

【问题标题】：Detect mixed content with javascript使用 javascript 检测混合内容
【发布时间】：2017-06-16 15:36:25
【问题描述】：

我正在寻找一种方法来检测（在 javascript / angular 中）是否存在一个或多个混合内容问题，以便通知用户此页面使用 http 链接而不是正确的 https 链接。

这是一个很关键的功能，这个项目只是关于用户创建的内容，如果没有提供信息消息，由于https而没有显示的内容被视为重大失败。

到目前为止，我偶然发现了 iframe/图像加载失败检测，但这也可能是许多其他问题（断开的链接，...）。

任何关于此事的想法将不胜感激！

【问题讨论】：

除非您可以指定要检查的标签的确切列表，否则唯一的方法是将呈现的标记作为字符串加载并搜索“http: "。
这是个好主意，但一些浏览器（不是最近的浏览器）不会阻止这些链接。在没有发生错误时显示此消息有些错误。
如果你想修复它，你显然需要做一个替换，但你只问了如何检测它。那应该正是这样做的。我建议完全删除该协议，因此您最终会得到href="//www.somedomain.com/etc"。如果（出于任何原因）您必须禁用 https，这将起作用。
如果我找不到其他方法，我肯定会这样做。这确实是我想以任何方式捕获的错误，而不是可能会或可能不会触发此错误的格式错误的链接。但我同意，这种方法可以解决问题
Detect broken lock icon (mixed secure/insecure content) from Javascript的可能重复

【解决方案1】：

我也遇到了同样的问题，看看这个文档：

它有非常有用的信息，尤其是这个很有用：

Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri https://example.com/reportingEndpoint

我花了一段时间才明白它的意思，但基本上是这样写的：不允许加载任何不是 https 的 url，但允许脚本块中的内联脚本/样式和 eval 脚本。不要对匹配项采取行动，只需将它们报告到此 url

【讨论】：