随手记——前端安全策略 Content-Security-Policy – CSP
一、问题
1. 问题：前端meta标签中配置了CSP安全策略，导致使用第三方地图插件的时间报错不展示
2. 原安全配置：
<meta http-equiv="Content-Security-Policy" content="
script-src * 'unsafe-inline' 'unsafe-hash' ;
worker-src blob:;
child-src blob: gap:;
img-src * blob: data:;
default-src * 'self' unsafe-inline 'unsafe-hash' 'unsafe-eval' gap: content: data: bolb: gw.alipayobjects.com file.scmsafe.com wl.sinovacbio.cn localhost:*;
connect-src * ;
style-src * 'unsafe-eval' 'unsafe-hash' 'unsafe-inline' data: gap: content:" />
3. 引入第三方地图组件后报错：
<script type="text/javascript"
src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak="></script>
WebAssembly.instantiate(): Refused to compile or instantiate WebAssembly module because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src * 'unsafe-inline' 'unsafe-hash'"
4. 修改后的安全配置
<meta http-equiv="Content-Security-Policy" content="
script-src * 'unsafe-inline' 'unsafe-eval';
worker-src blob:;
child-src blob: gap:;
img-src * blob: data:;
default-src * 'self' unsafe-inline 'unsafe-eval' gap: content: data: bolb: gw.alipayobjects.com file.scmsafe.com wl.sinovacbio.cn localhost:*;
connect-src * data:;
style-src * 'unsafe-eval' 'unsafe-inline' data: gap: content:" />
二、CSP讲解
内容讲解借鉴：https://blog.csdn.net/qq_32247819/article/details/124446652
重点纪要：
1. 使用方法：在<meta>标签中使用，例如：
<meta http-equiv="Content-Security-Policy" content=" script-src * ">
2.语法：
由指令与指令值组成：指令与指令值之间用空格隔开，一个指令下的多个指令值用空格隔开，多个指令之间用分号隔开，例如：content="指令1 指令值a1 指令值a2; 指令2 指令值b;"
3.CSP指令：
4.CSP指令值：
