我最近做项目的时候，遇到了一个问题，前端打包出来的静态资源用HTTP访问，协议却自动转成了HTTPS，真是百思不得其解。经过不断地排查，才发现我之前解决一个bug的时候，在index.html加上了一个meta标签，
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
这个标签是为了解决，iframe嵌入的页面，使用HTTP接口引起的mix content blocked的问题。
当然这个属性很好用，还可以帮助防止跨站脚本攻击（Cross-Site Script）（XSS (en-US)）。只是一刀切升级为HTTPS会影响到测试环境，尤其是后端在本地起服务的情况。就像这次后端小哥哥找我解惑一样，打测试包和正式包区分meta标签的需求非常重要，我首先想到了利用webpack的配置达到目标。
我的项目是经典祖传代码，使用的是Vue2+webpack4的组合，通过查阅官方文档，我找到了关于meta标签的设置
plugins: [
new HtmlWebpackPlugin({
'meta': {
'Content-Security-Policy': { 'http-equiv': 'Content-Security-Policy', 'content': 'default-src https:' },
// Will generate: <meta http-equiv="Content-Security-Policy" content="default-src https:">
// Which equals to the following http header: `Content-Security-Policy: default-src https:`
'set-cookie': { 'http-equiv': 'set-cookie', content: 'name=value; expires=date; path=url' },
// Will generate: <meta http-equiv="set-cookie" content="value; expires=date; path=url">
// Which equals to the following http header: `set-cookie: value; expires=date; path=url`
}
})
]
结合我项目的.env文件，可以得出这样一个简单的配置
plugins: [
new HtmlWebpackPlugin({
'meta': process.env.VUE_APP_ENV == 'PRO' ? {
'Content-Security-Policy': { 'http-equiv': 'Content-Security-Policy', 'content': 'upgrade-insecure-requests' }
} : {}
})
]
通过webpack的配置，下次打测试包我就不用手动处理meta标签了，感谢webpack🙏
