因CSP合规需求替换eval()的方法咨询及代码示例

针对你因CSP限制导致eval()失效的问题，结合示例代码，提供以下几种简便的替代方法：

原生JavaScript方案 #

1. 方括号属性访问器 #

这是替换这类eval场景最直接的方式，利用JS的方括号语法动态访问元素属性，完全不需要eval：

// 原eval代码：eval("documents.forms[0].byr"+x).disabled=false;
// 修正typo（documents → document）后替换为：
document.forms[0]['byr' + x].disabled = false;

2. 动态选择器API #

如果需要更灵活的元素定位，使用querySelector或getElementsByName等原生选择器：

// 通过属性选择器定位表单内的目标元素
document.querySelector('form:first-child [name="byr' + x + '"]').disabled = false;

// 或者直接通过name属性获取（需确保目标元素在第一个表单内）
document.getElementsByName('byr' + x)[0].disabled = false;

jQuery方案 #

你提供的jQuery写法已经是有效的替代，还可以进一步简化：

// 原写法
$('form:eq(0) [name="byr' + x + '"]').prop('disabled', false);

// 简化版（:first 等价于 :eq(0)）
$('form:first [name="byr' + x + '"]').prop('disabled', false);

// ES6+模板字符串写法（更易读）
$(`form:first [name="byr${x}"]`).prop('disabled', false);

通用移除eval()的思路 #

如果代码中还有其他eval场景，可遵循以下原则：

• 避免动态拼接执行代码：eval的核心问题是执行动态字符串，尽量拆解为原生API的直接调用；
• 使用映射表管理动态逻辑：如果有大量类似的动态元素/操作，可预先将它们存入对象或Map，通过键名直接访问：

  // 预先定义元素映射
  const formElements = {
    byr1: document.forms[0].byr1,
    byr2: document.forms[0].byr2,
    // ...其他元素
  };
  // 动态访问
  formElements['byr' + x].disabled = false;
  

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