为何Content-Security-Policy允许普通函数却拦截类库结构函数？

云上老周

2026-7-16

CSP拦截UMD结构的原因及改写方案

一、UMD结构被CSP拦截的核心原因

多数UMD（通用模块定义）类库为兼容AMD、CommonJS和全局变量三种环境，会包含触发CSP限制的写法，具体有这几种情况：

动态代码执行：部分UMD实现会用eval()、new Function()这类方式处理模块导出或环境检测，而Oculus的CSP大概率禁用了unsafe-eval指令，这类操作直接违反政策被拦截。
冗余环境检测的风险：有些UMD会尝试访问define、module等非全局标准对象，若CSP限制了对这类属性的访问（虽少见但不排除），会直接抛出引用错误。
隐式全局注入：个别UMD会通过动态创建script标签加载依赖，这会触发CSP的script-src规则限制。

你提到单个函数能正常运行，说明函数本身没有使用受限操作，问题完全出在UMD的包裹代码上。

二、改写UMD结构规避CSP限制

核心思路是砍掉UMD中所有环境兼容的冗余代码，直接以全局变量形式暴露函数——毕竟你是在浏览器控制台手动运行，不需要兼容Node.js或AMD环境。

原UMD结构示例（参考qwery.js的通用写法）：

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(factory);
  } else if (typeof exports === 'object') {
    module.exports = factory();
  } else {
    root.qwery = factory();
  }
}(this, function () {
  function turnBlue() { /* 原函数逻辑 */ }
  return { turnBlue: turnBlue };
}));

改写后的安全结构：

// 直接挂载到window全局对象，单个函数写法
window.turnBlue = function() {
  // 原函数逻辑
};

// 多函数统一挂载写法（还原类库的结构）
window.qwery = {
  turnBlue: function() { /* ... */ },
  // 其他函数依次添加
  query: function(selector) { /* ... */ }
};