Angular SPA严格CSP配置：如何替代'unsafe-inline'？

1. 优化Angular CLI构建配置，提取内联样式 #

Angular默认支持将组件内联样式打包为外部CSS文件，只需确保angular.json中的构建配置开启样式提取：

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "extractCss": true,
            // 其他配置...
          }
        }
      }
    }
  }
}

开启后，组件内的styles数组定义的内联样式会被提取到独立的CSS文件中，不再依赖unsafe-inline。

2. 替换组件内联样式为外部文件 #

检查所有Angular组件，将使用styles属性定义的内联样式改为styleUrls引用外部CSS文件：

// 不推荐的内联写法
@Component({
  selector: 'app-example',
  template: '<div>...</div>',
  styles: ['.example { color: red; }']
})

// 推荐的外部文件写法
@Component({
  selector: 'app-example',
  template: '<div>...</div>',
  styleUrls: ['./example.component.css']
})

这能从根源上减少内联样式的生成。

3. 用哈希替代unsafe-inline（针对无法消除的内联样式） #

若存在第三方库或动态生成的不可避免的内联样式，可通过计算样式内容的SHA哈希值添加到CSP中，替代unsafe-inline：

• 查看浏览器控制台的CSP报错信息，其中会直接给出该内联样式对应的哈希值（格式如'sha256-xxxxxx'）
• 或手动计算：使用OpenSSL命令对样式内容计算哈希

  echo -n "目标内联样式内容" | openssl dgst -sha256 -binary | base64
  

更新后的CSP配置示例：

Content-Security-Policy:  
  default-src 'self';  
  script-src 'self' fonts.googleapis.com;  
  style-src 'self' 'sha256-abcdef123456' fonts.googleapis.com blob:;  
  img-src 'self' data:;  
  font-src 'self' fonts.gstatic.com;  
  connect-src 'self';  
  block-all-mixed-content;  

4. 处理第三方库的内联样式注入 #

部分第三方UI库可能会动态注入内联样式，可通过以下方式处理：

• 优先使用库提供的CSS文件引入方式，而非动态注入
• 若必须保留动态样式，使用Angular的DomSanitizer对样式内容进行安全处理，确保符合CSP要求：

  import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
  
  constructor(private sanitizer: DomSanitizer) {}
  
  getSafeStyle(): SafeStyle {
    return this.sanitizer.bypassSecurityTrustStyle('动态样式内容');
  }
  

内容的提问来源于stack exchange，提问作者wuyanzhu