Redux DevTools RemoteDev调用Function()遭CSP拦截问题排查求助

问题根源 #

RemoteDev（Redux-Devtools的远程调试组件）内部用到了Function()构造函数这类动态代码执行逻辑，而你的页面CSP（内容安全策略）里script-src只开了'self'，没允许'unsafe-eval'，浏览器自然会拦下来。虽然你没改本地配置，但更新的依赖可能间接改了CSP的生效逻辑，或者服务器端的CSP配置悄悄变了。

排查步骤 #

1. 找到CSP的来源

   • 先看服务器响应头：开浏览器F12→网络标签，刷新后看主请求的响应头里有没有Content-Security-Policy，核对script-src的规则。
   • 再查页面meta标签：打开index.html，找有没有<meta http-equiv="Content-Security-Policy">标签，看看里面的配置。
   • 排查依赖的锅：虽然只更了oidc-client和axios，但有些依赖会偷偷加安全头，比如身份验证库可能自动加CSP限制，得确认是不是它们搞的鬼。

2. 快速验证
   临时放宽CSP试试：在本地开发环境的index.html里加个meta标签：

   <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval';">
   

   刷新后如果RemoteDev正常了，那百分百是CSP的问题。

解决办法 #

1. 开发环境单独放宽CSP（最推荐） #

unsafe-eval在生产环境不安全，但开发环境无所谓，给开发环境单独加：
如果用Vite，改vite.config.ts：

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    headers: {
      'Content-Security-Policy': "script-src 'self' 'unsafe-eval';",
    },
  },
  // 生产环境保持原有的严格CSP
  build: {
    // 你的生产配置
  },
});

2. 直接关掉RemoteDev #

如果不用远程调试，在Redux store配置里关了它就行：

// 你的store配置文件
import { configureStore } from '@reduxjs/toolkit';

export const store = configureStore({
  reducer: {
    // 你的reducers
  },
  devTools: {
    remote: false, // 关闭RemoteDev
  },
});

3. 揪出改CSP的依赖 #

查更新后的oidc-client文档，看它是不是自动加了CSP头。有的OIDC库会默认开启安全头配置，找一下有没有开关能关掉这个自动设置。

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