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

幸福了，然后呢

已于 2023-07-19 14:55:10 修改

阅读量2.9k

点赞数

分类专栏： javascript 文章标签： javascript

于 2023-07-19 14:53:08 首次发布

本文链接：https://blog.csdn.net/weixin_42260975/article/details/131807972

版权

javascript 专栏收录该内容

2 篇文章

订阅专栏

文章讨论了在前端Meta标签中配置Content-Security-Policy（CSP）安全策略后，引入第三方地图组件导致的报错。原配置禁止了unsafe-eval，从而影响了WebAssembly的运行。通过修改CSP配置，允许unsafe-eval，成功解决了问题。CSP是一种用于增强网页安全性，防止跨站脚本攻击的机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

随手记——前端安全策略 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指令值：
在这里插入图片描述