Electron 13.x集成Microsoft Clarity遇400错误，是否兼容及解决？

Microsoft Clarity可以在Electron应用中使用，但需要针对Electron的安全特性做适配配置，以下是针对400错误的排查和解决步骤：

1. 修正请求地址拼写错误 #

你提供的请求地址存在明显格式错误：https://d/clarity.ms/collect，正确地址应为https://d.clarity.ms/collect（域名部分是d.clarity.ms，而非d/clarity.ms）。这个错误会直接触发400请求失败，先确认Clarity脚本是否生成了正确的请求地址。

2. 调整Electron窗口的安全配置 #

Electron默认的Web安全策略可能会拦截Clarity的跨域请求，需要在创建BrowserWindow时修改相关配置：

const mainWindow = new BrowserWindow({
  webPreferences: {
    // 允许跨域请求（若需严格安全可改用域名白名单）
    webSecurity: false,
    // 允许加载第三方HTTPS脚本
    allowRunningInsecureContent: false,
    // 若不需要Node.js集成可设为false，按需开启
    nodeIntegration: true,
    contextIsolation: false
  }
});

如果需要保持严格的Web安全，可配置域名白名单代替关闭webSecurity：

webPreferences: {
  webSecurity: true,
  // 允许Clarity相关域名的请求
  allowlist: [
    "https://www.clarity.ms",
    "https://d.clarity.ms"
  ]
}

3. 改用本地加载Clarity脚本 #

直接加载外部脚本可能被Electron的安全策略拦截，可将Clarity脚本下载到本地后引用：

1. 从https://www.clarity.ms/tag/<你的项目ID>下载脚本文件，保存到应用的静态资源目录。
2. 修改页面中的脚本引用为本地路径：

<script type="text/javascript" src="./assets/clarity-script.js"></script>

4. 修改User-Agent标识 #

部分服务会对Electron的User-Agent做限制，可将其改为普通浏览器的标识：

mainWindow.webContents.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.164 Safari/537.36');

5. 验证项目ID正确性 #

确保脚本中替换的<Project_id>是Clarity后台的有效项目ID，错误的ID会导致服务器拒绝请求。

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