HTTPS页面发起HTTP本地请求未被浏览器拦截的原因探究

这事儿我之前排查过类似的情况，咱们来拆解一下核心原因：

1. 本地环回/私有地址的安全豁免 #

主流浏览器（Chrome、Firefox、Edge等）对**127.0.0.0/8网段（也就是所有以127开头的本地环回地址）**以及私有网络地址（比如192.168.x.x、10.x.x.x）有特殊的混合内容策略豁免。

因为这些地址指向的是本地或内部网络资源，浏览器默认认为它们是“可信的”，哪怕你从HTTPS页面发起HTTP请求到这些地址，也不会触发常规的混合内容拦截机制。Wireshark抓到的HTTP请求就是这个原因导致的。

2. 混合内容拦截的分类与例外 #

通常浏览器会严格拦截主动混合内容（比如XHR请求、脚本加载），但针对本地私有网络的请求，大部分浏览器默认都放开了限制——毕竟本地开发场景下这种需求很常见，总不能每次都强制开发者给本地服务配HTTPS证书。

3. 可手动开启拦截配置 #

你提到的“浏览器可配置为拦截此类地址”是完全可行的：

• Chrome/Edge：在地址栏输入chrome://flags/#block-insecure-private-network-requests，将选项设置为Enabled，重启浏览器后就会拦截HTTPS页面到HTTP本地资源的请求。
• Firefox：在地址栏输入about:config，找到network.security.block_insecure_private_network_requests，设置为true即可生效。

附你提供的测试代码 #

<html>
<body>
<img id="dst"/>
<script>
 let xhr = new XMLHttpRequest();
 xhr.open('get', 'http://127.0.100.2/img.jpg');
 xhr.responseType = 'blob';
 xhr.onload = function(){
 document.getElementById('dst').src = URL.createObjectURL(xhr.response);
 }
 xhr.send();
</script>
</body>
</html>

这段代码的逻辑是：通过XHR拉取HTTP的图片资源转为Blob，再通过URL.createObjectURL生成Blob URL赋值给img标签——所以最终页面上显示的是安全的Blob URL，但底层的请求确实是走了未加密的HTTP协议，这也是Wireshark能抓到HTTP流量的原因。

内容的提问来源于stack exchange，提问作者user2768