本地开发遇到的CSP策略陷阱：为什么IP访问空白而localhost正常？

问题描述
在最近的本地开发过程中，我遇到了一个奇怪的现象：当使用http://172.16.80.102:9010/通过IP地址访问服务时页面完全空白，而使用http://localhost:9010/却能正常加载。经过代码审查，发现页面中设置了如下元标签：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

定位问题
通过浏览器开发者工具检查网络请求时发现两个关键现象：

1. 使用IP地址访问时，控制台出现大量blocked:mixed-content警告
2. 所有资源请求的协议头都变成了https://
3. 实际网络请求显示net::ERR_SSL_PROTOCOL_ERROR

进一步分析CSP策略的执行逻辑：
• upgrade-insecure-requests指令会强制升级所有HTTP请求到HTTPS

• localhost在浏览器安全模型中属于可信源（Trusted Origin）

• 172.16.80.102作为普通IP地址，不被视为安全上下文（Secure Context）

解决方案
临时解决方案（开发环境）：

# 移除CSP元标签（适用于本地开发）
sed -i '/upgrade-insecure-requests/d' index.html

长期解决方案（生产适配）：

1. 配置本地HTTPS环境

// 基于webpack的配置示例
module.exports = {
    devServer: {
        https: {
            key: fs.readFileSync('./cert/localhost.key'),
            cert: fs.readFileSync('./cert/localhost.crt')
        }
    }
}

2. 环境感知策略配置

<!-- 开发环境禁用CSP -->
<% if (process.env.NODE_ENV === 'production') { %>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<% } %>

知识点总结

1. 安全上下文分级：
   • 顶级安全源：https://、localhost、*.localhost

   • 非安全源：IP地址、普通HTTP域名

2. CSP执行优先级：

3. HTTPS本地化实践：
   • 使用mkcert创建可信证书

   mkcert -install
   mkcert localhost 127.0.0.1 ::1
   

   • Chrome强制HTTPS策略：

   chrome://flags/#unsafely-treat-insecure-origin-as-secure
   

思考：可以在构建工具中预设环境检测逻辑，通过process.env变量自动切换CSP策略，确保开发体验与生产安全性的平衡。对于需要多设备联调的情况，更推荐使用localtunnel等工具生成HTTPS代理地址，避免直接暴露HTTP服务。