Angular 中的 Content-Security-Policy 标头答案

【问题标题】：Content-Security-Policy Header in AngularAngular 中的 Content-Security-Policy 标头
【发布时间】：2021-06-03 08:36:56
【问题描述】：

在 Angular 应用程序中，允许 Content-Security-Policy 标头需要哪些值？它向我抛出了这样的错误，我还在我的 Angular 应用程序中添加了 web.config 文件。

这里，我还附上了 index.html 文件。

【问题讨论】：

标签： javascript .net angular azure

【解决方案1】：

从我的角度来看，我为上述项目找到了 2 个解决方案。

1.这是 web.config 文件。

  <httpProtocol>
    <customHeaders>
    <remove name="X-Powered-By" />
    <add name="Referrer-Policy" value="no-referrer" />
    <add name="Permissions-Policy" value="camera=*,geolocation=*,microphone=*,autoplay=*,fullscreen=*,picture-in-picture=*,sync-xhr=*,encrypted-media=*,oversized-images=*" />
    <add name="Strict-Transport-Security" value="max-age=31536000; includeSubdomains" />
    <add name="X-Frame-Options" value="SAMEORIGIN" />
    <add name="X-Xss-Protection" value="1; mode=block" />
    <add name="X-Content-Type-Options" value="nosniff" />
    <add name="Content-Security-Policy" value="script-src https: 'unsafe-inline' 'unsafe-eval';
          style-src https: 'unsafe-inline' 'unsafe-eval';
          img-src https: data:;
          font-src https: data:;" />
  </customHeaders>
  </httpProtocol>

仅适用于 Content-Security-Policy 标头

<add name="Content-Security-Policy" value="script-src 'self' 'unsafe-inline' 'unsafe-eval' https://stackpath.bootstrapcdn.com https://code.jquery.com https://cdnjs.com https://cdnjs.cloudflare.com; 
          style-src 'self' 'unsafe-inline' 'unsafe-eval' fonts.gstatic.com fonts.googleapis.com https://stackpath.bootstrapcdn.com https://use.fontawesome.com;
          object-src 'none';
          img-src 'self' data: blob:;
          font-src 'self' data: https://use.fontawesome.com fonts.gstatic.com fonts.googleapis.com ;"

对于每个 API 调用，如果需要添加以下标头，可以像这样在 http-interceptor 文件中添加标头。

 req = req.clone({
  setHeaders: {
    "Permissions-Policy": "camera=*,geolocation=*,microphone=*,autoplay=*,fullscreen=*,picture-in-picture=*,sync-xhr=*,encrypted-media=*,oversized-images=*",
    "Strict-Transport-Security": "max-age=31536000; includeSubdomains",
    "X-Frame-Options": "SAMEORIGIN",
    "X-Content-Type-Options": "nosniff",
    "X-Xss-Protection": "1; mode=block",
    "Content-Security-Policy": "script-src https: 'unsafe-inline' 'unsafe-eval';style-src https: 'unsafe-inline' 'unsafe-eval';img-src https: data:;font-src https: data:;"
  }
});

【讨论】：