随手记——前端安全策略 Content-Security-Policy – CSP

随手记——前端安全策略 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指令值：