使用@itwin/web-viewer模板创建React应用遇CSP限制eval问题

解决这个问题的核心是通过@bentley/react-scripts提供的自定义配置方式修改内容安全策略，直接修改index.html的设置会被框架内置配置覆盖，无法生效，具体操作步骤如下：

1. 在项目根目录的public文件夹下创建csp.json文件
2. 将以下配置写入该文件，允许eval并保留iTwin相关资源的加载权限：

{
  "default-src": ["'self'"],
  "script-src": ["'self'", "'unsafe-eval'", "https://*.bentley.com"],
  "style-src": ["'self'", "'unsafe-inline'", "https://*.bentley.com"],
  "img-src": ["'self'", "data:", "https://*.bentley.com"],
  "connect-src": ["'self'", "https://*.bentley.com", "wss://*.bentley.com"]
}

3. 重启开发服务器，重新加载应用即可

补充说明 #

iTwin Web Viewer的部分内部逻辑依赖eval，因此必须在CSP的script-src中加入'unsafe-eval'才能正常运行；配置里的bentley域名是加载Viewer核心资源必需的，不能省略。

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