Angular项目CSP安全测试文件处理记录

配置CSP测试环境

1.angular.json 添加 "extractCss": true, 导出css

 "projects": {
      "architect": {
        "build": {

          "options": {
            "tsConfig": "tsconfig.app.json",
            "extractCss": true,
    }}}}
            

2.在 index.html （本地测试用的html）中 添加

脚本使用本地的， content="script-src 'self' '****'; 样式使用本地的 style-src 'self' 'nonce-****'; 指定了允许从当前源和blob URI（即内存中的对象）创建Web Worker。 worker-src 'self' blob:; 它只允许从当前源加载资源 default-src 'self'

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'nonce-****'; style-src 'self' 'nonce-****'; img-src * data:; worker-src 'self' blob:; default-src 'self'">

3.在 index.html中 body标签中 添加上 <app-root id="gskRoot" ngCspNonce="***">

然后编译项目，一个个修改控制台的错误就可以了。

3.全局收缩style=把搜索到的地方都修改为 [style]="{'heght':'10px'}" 这种样式。

错误类型

1.index.html中不允许使用style，需要把样式放到全局样式文件中。

2.index.html中的测试脚本 script会报错 标记一下就可以了 <script nonce="****">