Chrome中运行PowerBI自定义视觉时加载脚本被拒绝报错

针对你使用powerbi-visuals-tools 4.2.1、powerbi-visuals-api 5.1.0时遇到的外部JS/CSS被Content Security Policy（CSP）拦截的问题，可通过以下步骤解决：

1. 配置pbiviz.json添加资源白名单 #

• 在自定义视觉根目录的pbiviz.json文件中，找到visual节点下的externalJS和externalCSS字段，将需要加载的外部资源URL填入数组：

{
  "visual": {
    "externalJS": [
      "https://your-target-script-url.js"
    ],
    "externalCSS": [
      "https://your-target-style-url.css"
    ]
  }
}

• 配置后，powerbi-visuals-tools会自动将这些URL加入PowerBI的CSP允许列表，无论是本地调试还是发布到服务端都会生效。

2. 调试模式的注意事项 #

• 本地调试时，确保外部资源使用HTTPS协议：PowerBI调试环境的默认CSP仅允许HTTPS资源（报错中的default-src包含https://app.powerbi.com），HTTP资源会被直接拦截。
• 若需临时加载HTTP资源（仅本地测试），可修改pbiviz本地调试服务器的CSP头：找到工具内置的调试配置文件，将目标HTTP域名添加到script-src和style-src指令中，但此修改仅适用于本地调试，发布后无效。

3. 禁止未声明的动态加载 #

• 不要在视觉代码中通过document.createElement('script')、fetch或动态import()等方式加载未在pbiviz.json中声明的外部资源，这种方式会绕过pbiviz的CSP配置，触发拦截错误。

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