如何识别 Chrome DevTools 或 Firefox 中的不安全内容？

Posted 2023-03-07

【中文标题】如何识别 Chrome DevTools 或 Firefox 中的不安全内容？

【英文标题】：How to identify insecure content in Chrome DevTools or Firefox?

【发布时间】：2013-08-09 04:55:43

【问题描述】：

我的网页有时（很少）显示“有一些不安全的资源”警告图标（黄色锁），如下面的屏幕截图所示。但是这种情况很少发生，现在我又抓到了一个，我不想再错过它，所以我不能冒险丢失页面。

页面位于 URL：https://eksisozluk.com/sedat-kapanoglu-ve-40-kisiye-hapis-talep-edilmesi--3960310。您可能不会看到警告（除非是 Firefox），因为我在 Chrome 上的连续尝试中没有看到，当我收到错误时我已经登录。所以让我们假设你和我再也不会在 Chrome 上看到那个警告图标了。

我在使用该站点时没有打开 Devtools，因此“网络”选项卡为空。那部分行不通。

“资源”将所有 JS 和 CSS 条目显示为 https，那里没有来自 http 的单一资源。

该页面已加载 jQuery，因此我尝试查询 $('*[href^="http:"]') 和 $('*[src^="http:"]') 无济于事。该页面包含一些外部 http 链接（不是资源，纯 a href's），但不会触发警报。

我正在使用卡巴斯基反病毒软件，它使用代理来扫描传入/传出流量。尽管到目前为止我在其他网站上没有遇到任何问题，但这可能会造成一些麻烦。

我尝试“查看页面源代码”并在其中搜索 http 资源，但只有带有 http 资源链接的标签是：

<meta name="twitter:image" content="http://eksisozluk.com/content/img/ilogo120.png" />

当图标也是绿色时，它实际上存在于页面中。所以这不可能是原因。

有没有办法直接查看 Chrome 中的“不安全内容”？

当我在 Firefox 中查看该页面时，它显示“部分加密”，但它也没有显示未加密的内容。 “媒体”选项卡中的所有项目均以“https://”开头。

实际上，现在我可以在 Firefox 上连续重现该问题。我查看了网络选项卡，“无”显示为http://，但 Firefox 告诉我“部分加密”。我不确定 Firefox 是否出于与 Google 相同的原因（因为 Firefox 始终如一且坚持这一点）这么说，但我提供了这两种情况，以防它们属于同一个根本原因。

我终于在 Chrome 控制台中写了这段代码来找到罪魁祸首：

$("*").each(function (index, elem) 
  var attrs = elem.attributes;
  for(var n = 0; n < attrs.length; n++)     
    var attr = attrs[n];
    if(attr.nodeValue.indexOf("http://") >= 0) 
      console.log("FOUND: <" + elem.nodeName + " " + attr.nodeName + "='" + attr.nodeValue + "'>");
      console.log($(elem));
    
  
);

输出显示没有有趣的东西。只有<META content> 用于推特参考，<A href>s 和 Mvc-Mini-Profiler 插入的两个 <TD title="http://...">s。当然，他们都没有证明警告是合理的。这是完整的输出：http://pastebin.com/kgV8XHgN

所以这看起来真的很有趣。 DOM 中没有一个元素包含“HTTP”链接，但 Chrome 会警告“不安全”内容。我对此非常困扰。

页面上没有 iframe。 （$("iframe") 返回[]）

编辑：该死，我失去了页面:(（导航到一个链接，后退按钮变成绿色的 SSL 图标）。我知道它不会持续很长时间。但我仍然感谢任何帮助，因为它不是第一个我看到这个问题的时间。

【问题讨论】：

您确定没有涉及浏览器扩展吗？你能在另一台机器/设备上重现它吗？

Chrome 有 feedly（禁用 feedly-mini）和可能干扰的 Google App Script（我不知道），但 Firefox 有 Firebug、UA Switcher、PageSpeed 和 YSlow。我从 Firefox 中删除了除 Firebug 之外的所有内容，它仍然显示“部分加密”但没有显示“http://”资源。

其他设备/机器怎么样，你能重现吗？在 Chrome 中，还有一种工具可以帮助您进行调试。打开 Chrome 隐身窗口并关闭所有其他 Chrome 窗口。在隐身窗口中打开两个选项卡：一个带有您要调试的页面，另一个带有 chrome://net-internals/ 。您将在 net-internals 选项卡中获得对 Chrome 中发生的所有网络通信的详细调试。

您可能还想查看之前提出的类似问题：***.com/questions/3920206/… 和 ***.com/questions/1087591/…。

@ssg 这有点牵强 =) 最近没见过自己。我认为，当 IE 8 或 9 抱怨 TLS 1.0 并升级到 TLS 1.1 时，我们遇到了问题。我在这里可能错了，但如果有人遇到类似问题，请告诉我们。

【参考方案1】：

一个快速的解决方案是在每个<a> 元素中添加target="_blank"。它将在新窗口中打开链接。适用于所有浏览器。

【参考方案2】：

听起来 AJAX 资源很可能与 http:// URL 一起使用...您很可能需要网络面板或控制台来检查。

Firefox 的内置开发者工具有它们。

【参考方案3】：

刚刚遇到这个问题 - 如果您检查 Chrome 中的 javascript 控制台，它现在会告诉您问题出在哪里。

【讨论】：

是的，这是正确的答案。当我在 2013 年问这个问题时，Chrome 的控制台没有这个功能。

【参考方案4】：

我昨天也遇到了同样的问题，发现http://www.whynopadlock.com/

它显示哪些元素不安全，并且它还验证证书链。

顺便说一句，如果您的网站可以同时加载 http 和 https，那么请从外部 url 中省略 http:。

不是：

src="http://external.dom/external.js" or "https://external.dom/external.js"

只是：

src="//external.dom/external.js"

然后浏览器将根据页面加载的内容使用http或https

【讨论】：

whynopadlock.com +1。我在一个 CSS 文件中隐藏了一个不安全的 http ref，它立即发现了它。

【参考方案5】：

我刚刚花了一个小时遇到类似的问题，我在 Chrome 和 IE 中获得了绿色 ssl 锁，但在 Firefox 中没有（仅在页面重新加载后）。

首先：要调试 SSL 问题，httpfox 插件似乎比 firebug 的网络选项卡更好。 Firebug 将所有来源显示为 https，但查看 httpfox，我很快找到了罪魁祸首：Google Analytics 正在通过 http 加载 ___utm.gif 跟踪像素。此跟踪像素来自上一页，我在该页面中跟踪附加到按钮点击的 Google Analytics 事件。

这似乎是 Firefox 中的一个错误：当从 http 页面跟踪 GA 事件到 https 页面时（例如单击继续按钮），FF 将在 https 页面上通过 http 加载跟踪像素，从而导致错误。

我从按钮中删除了事件，FF 不再抱怨部分加密的连接。

【讨论】：

我们正在使用 GA，但我不确定是否是这种情况。但很高兴知道。我不知道 HttpFox。