CSP禁用unsafe-inline与unsafe-eval时，如何基于字符串中的函数名创建并运行绑定点击事件的函数？

我来帮你拆解这个问题，结合你给出的代码和场景，咱们一步步分析：

一、两种场景的核心差异 #

先看能正常运行的next_page(1)场景：

• 正则匹配后，fn拿到的是next_page，这个函数应该是挂载在window全局对象上的，所以window[fn]能正确找到并执行。

而失效的_CF_checkbr([object NodeList])场景，报错window[fn] is not a function，再加上你提到的sendPage直接调用可行但window['sendPage']不行，核心问题大概率出在函数的作用域挂载和脚本执行时机上。

二、需要重点排查的几个方向 #

• 函数是否真的在全局作用域：
  直接在浏览器控制台打印window._CF_checkbr和window.sendPage，如果返回undefined，说明这些函数并没有挂载到window上。sendPage能直接调用，是因为它在当前点击回调的作用链里（比如闭包、局部模块），但没暴露到全局。
• 正则匹配的准确性：
  测试一下正则对目标字符串的匹配结果：在控制台输入"_CF_checkbr([object NodeList])".match(/(.*)(\()(.*)(\))/)，看看第2个分组是不是_CF_checkbr，第4个分组是不是[object NodeList]。虽然你后来更新说代码本身可行，但这个点还是可以快速验证一下。
• 动态脚本的执行时机：
  你提到问题只出现在某一个动态生成JS的页面，这时候要确认：绑定点击事件的时候，_CF_checkbr这个函数是否已经被加载并执行了？如果事件绑定在动态脚本还没解析完成之前，window[fn]自然找不到对应的函数。

三、规避CSP同时避免安全漏洞的建议 #

现在的重构是为了绕过unsafe-inline和unsafe-eval的限制，但也要注意不要引入新的安全风险：

• 维护函数白名单：不要允许调用任意全局函数，只放行明确需要的函数，比如：

  // 定义允许调用的函数列表
  const allowedFns = {
    next_page: window.next_page,
    _CF_checkbr: window._CF_checkbr
  };
  
  // 调用前先校验
  if (allowedFns[fn] && typeof allowedFns[fn] === 'function') {
    allowedFns[fn](dn);
  } else {
    console.error(`禁止调用未授权函数: ${fn}`);
  }
  

• 避免字符串解析参数：像[object NodeList]这种字符串解析后只是文本，不是真实的DOM对象，可能导致函数执行异常。尽量用非字符串的方式传递参数，比如提前把NodeList对象存起来，而不是拼进字符串里。
• 统一管理全局函数：不要直接用window挂载函数，可以专门创建一个全局对象（比如window.appSafeFunctions）来存放需要动态调用的函数，这样更可控，也能避免和其他全局变量冲突。

四、针对动态脚本页面的解决方案 #

既然问题出在动态脚本的执行时机，咱们可以调整绑定逻辑来适配：

• 等待动态脚本加载完成再绑定事件：
  如果是通过脚本标签动态加载的JS，可以监听load事件，在脚本加载完成后再绑定点击回调：

  const dynamicScript = document.createElement('script');
  dynamicScript.src = '你的动态脚本URL';
  dynamicScript.onload = function() {
    // 这里绑定事件，确保函数已经存在
    document.getElementById("submit_link").addEventListener('click', function() {
      // 你的执行逻辑
    });
  };
  document.head.appendChild(dynamicScript);
  

• 在调用前增加函数存在性检查：
  即使事件提前绑定，也可以在回调里先确认函数是否存在，避免报错：

  document.getElementById("submit_link").addEventListener('click' ,function() {
    var cleanS1String = /(.*)(\()(.*)(\))/;
    var cleanS1Matcher = commandString.match(cleanS1String);
    fn = cleanS1Matcher[1] ? cleanS1Matcher[1] : "";
    dn = cleanS1Matcher[3] ? cleanS1Matcher[3] : "";
  
    // 先检查函数是否存在且可执行
    if (typeof window[fn] === 'function') {
      const result = window[fn](dn);
      if (result) {
        sendPage(thisForm);
      }
    } else {
      console.error(`函数 ${fn} 未定义或不可执行`);
    }
  });
  

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