由于内容安全策略指令，无法在生产中的 Angular 应用程序中保存 PDF 文件

Posted 2023-04-13

【中文标题】由于内容安全策略指令，无法在生产中的 Angular 应用程序中保存 PDF 文件

【英文标题】：Can't save PDF file in the Angular app in production because of the Content Security Policy directive

【发布时间】：2021-02-03 12:42:10

【问题描述】：

我有 Angular 应用程序。还有一个保存pdf文件的功能。

import * as pdfMake from 'pdfmake';
...

  createPdf(): void 

    let docDefinition =   
      header: 'C#Corner PDF Header',  
      content: 'Simple pdf file'  
    ;  
   
    pdfMake.createPdf(docDefinition).download('a.pdf'); 
  

过去它在本地和生产中都运行良好。但是从某个时候开始，它开始在生产中失败，而本地一切都保持不变。

这是我在生产中收到的错误

ERROR EvalError: Refused to evaluate a string as javascript because 'unsafe-eval' 不是以下允许的脚本来源 内容安全策略指令：“script-src 'self'”。

函数本身是否有错误？我该如何解决这个问题？

【问题讨论】：

您的安全性现在可能正在检查 pdf 中的嵌入脚本，这可能会发生。我建议将 pdf 作为数据 url 下载，这看起来像一个字符流，希望能解决这个安全措施。这包含有关如何执行此操作的信息：github.com/bpampuch/pdfmake/issues/198

似乎与restructure 库有关.. 看到这个github.com/foliojs/restructure/issues/44

@PeterS 我试过了。结果是一样的。

@BenzaraTahar 有什么解决方法吗？

【参考方案1】：

pdfmake lib 有很多 unsafe-eval 表达式：eval() 和 new Function() 调用。因此，如果您使用内容安全策略 (CSP)，则必须在 script-src 指令中使用 'unsafe-eval' 令牌。 但是，显然，您并没有理会 CSP，所以这让您感到意外。

您很可能在生产服务器上使用 Helmet 等中间件。默认情况下，Helmet 3 的 CSP“关闭”，但 Helmet 4 将其设置为“打开”。因此，您过去不会有任何麻烦，但是在升级 NodeJS 依赖项后，您现在拥有了默认 CSP script src 'self' 的 Helmet 4。

您有 2 个选择：

在Helmet 中禁用 CSP 通过helmet.contentSecurityPolicy(options) 配置CSP 并将'unsafe-eval' 令牌添加到script-src 指令中。如果您使用外部脚本/样式/字体，可能还需要添加其他来源/键，但到目前为止没有其他 CSP 违规。

注意：关于 Helmet 4 只是猜测，可能您使用其他中间件，它发布 CSP HTTP 响应标头。