阻止来自潜在可信来源的混合内容（127.0.0.0/8）

Question

isn't blocked的混合内容potentially trustworthy origins，包括从127.0.0.0到127.255.255.255的IP地址。可以将浏览器配置为阻止此类地址的混合内容吗？这将使本地测试更加容易。

Answer 1

我发现没有浏览器设置将潜在的可信域视为不可信，BUT这里有几个选项可以使127.0.0.1和不可信域的行为相同，或者生成通常会产生警告的项目报告。

XHR

对于XHR，在hosts文件中添加一个条目就足够了（在Firefox 73.0.1和Chrome 80.0.3987中进行了测试）。

# /etc/hosts
127.0.0.1 example.com

XHR从https://example.com到http://example.com的请求将被混合内容规则阻止。请注意，XHR仍然是受CORS约束，并且可能还会被CORS策略阻止。

这也适用于WebSocket和多个other connection types。

<img>和其他非XHR

我发现没有办法只为图像或其他连接类型生成警告（您可以在Mixed Content Examples上看到带有示例的几乎详尽的列表）。

如果您希望127.0.0.1像常规域一样运行，有两个选项：

• 使用内容安全策略（CSP）完全阻止混合内容（这甚至可以帮助您的网站适应未来发展）
• 使浏览器生成将生成警告的元素的报告

阻止混合内容

添加此CSP指令仅允许HTTPS图像。

Content-Security-Policy: image-src https:

使用default-src代替image-src，仅允许所有其他连接类型使用HTTPS。 List of other connection types and their directives。

生成报告

添加此CSP指令以使浏览器发布将被阻止的资源的JSON报告。

Content-Security-Policy-Report-Only: default-src https:; report-uri /your-endpoint

这里有一些Express代码可以做到这一点。

let cspCounter = 1;
const CSP_VIOLATION_REPORT_ENDPOINT = '/csp-violation-report-endpoint';
app.use( (req, res, next) => {
  res.set('Content-Security-Policy-Report-Only', `default-src https:; report-uri ${CSP_VIOLATION_REPORT_ENDPOINT}`);
  next();
});
app.post(CSP_VIOLATION_REPORT_ENDPOINT, (req, res) => {
  const reportFile = `/tmp/csp-report-${cspCounter++}.json`;
  req.pipe(fs.createWriteStream(reportFile));
  req.on('end', () => res.send('ok'));  
  fs.readFile(reportFile, (err, data) => debug('csp-report')(err || JSON.parse(data.toString())) );
});

https://github.com/codebling/mixed-content-test上有测试服务器可用>