利用AI定位BUG的体验

在一个项目中，html页面中使用了mathjax用来渲染公式。

js 复制代码

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

在开发环境中，没有问题，公式能够正常显示，但是在生产环境中一直报错。

js 复制代码

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-6fz6/vdfJ1f52bot1U/Vkg==' https://challenges.cloudflare.com https://static.cloudflareinsights.com https://*.stripe.com". Either the 'unsafe-inline' keyword, a hash ('sha256-ygWUYExd9eLTbxgUG1YFpCWgKSS72F3dePNywFDjI2I='), or a nonce ('nonce-...') is required to enable inline execution.

playground/:1 Refused to load the script 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js' because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-6fz6/vdfJ1f52bot1U/Vkg==' https://challenges.cloudflare.com https://static.cloudflareinsights.com https://*.stripe.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

playground/:32 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-6fz6/vdfJ1f52bot1U/Vkg==' https://challenges.cloudflare.com https://static.cloudflareinsights.com https://*.stripe.com". Either the 'unsafe-inline' keyword, a hash ('sha256-XoZZq26jpuLu34dI1maY3J8q48qeJSonupAm9YPo9dw='), or a nonce ('nonce-...') is required to enable inline execution.

然后将问题就给豆包和deepseek。

报错根源：CSP script-src 没放行 cdn.jsdelivr.net。

开始他们给的方案都是修改index.html。

script-src 添加 https://cdn.jsdelivr.net：放行 MathJax 脚本 CDN，解决最初 CSP 阻止加载 js
font-src 添加 https://cdn.jsdelivr.net：放行 MathJax 远程 woff 字体，避免之前字体解码报错
⚠️ 注意：如果后端服务还在返回 CSP 响应头，会优先以 HTTP Header 为准，meta CSP 不生效，需要后端临时移除 CSP 头测试。

html 复制代码

<meta http-equiv="Content-Security-Policy" content="
        default-src 'self';
        script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://challenges.cloudflare.com https://static.cloudflareinsights.com https://*.stripe.com;
        style-src 'self' 'unsafe-inline';
        font-src 'self' https://cdn.jsdelivr.net data:;
        img-src 'self' data: https:;
        connect-src 'self' https:;
        frame-src https://js.stripe.com https://*.stripe.com;
        worker-src 'self' blob:;
    ">

包括deepseek，给的建议修改vite.config.js

js 复制代码

export default {
  server: {
    headers: {
      'Content-Security-Policy': "default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://challenges.cloudflare.com https://static.cloudflareinsights.com https://*.stripe.com; style-src 'self' 'unsafe-inline'; font-src 'self' https://cdn.jsdelivr.net data:; img-src 'self' data: https:; connect-src 'self' https:; frame-src https://js.stripe.com https://*.stripe.com; worker-src 'self' blob:;"
    }
  }
}

经过这些尝试之后，还是不行，理论上这里没有nonce头，但是报错中还是一直提示。直到看到deepseek的答案中的一段:

复制代码

如果后端仍然添加 CSP 头
如果后端（Go 服务）也在添加 CSP 头，您需要修改后端配置。查找后端代码中设置 CSP 头的地方，例如：

go 复制代码

// 查找类似这样的代码并修改或删除
// w.Header().Set("Content-Security-Policy", "...")

然后我开始寻找后端关于csp的设置，刚开始在页面的系统配置中看是否有相关配置，发现没有。然后在代码中搜索发现相关函数，其中一处的调用参数来自config.yaml。然后我把相关函数和配置发给deepseek，deepseek发现没有mathjax域名的白名单，我加上之后，发现还是不行。最后发现是另外一处的调用，参数在代码里面应编码了，修改代码之后重新编译就跑通了。

对于借助AI来定位自己的项目的，大部分问题AI都能发现，关键是看你提供什么样的信息和如何给AI提供反馈和引导，如果引导偏了很可能会浪费很多时间和精力，然后AI给出的回答也许会有很多方向，其中一个方向也许就是正确答案，所以每个方向都可能需要尝试，当然如果你的经验越丰富你就越可能直接从中找到最可能的答案。