如何在不触发CSP的情况下安全转换HTML属性中的JS对象为数组

核心思路 #

CSP禁止eval、new Function这类动态执行代码的方法，所以只能用原生安全的JSON.parse来解析。但HTML属性里的JS对象字符串不符合JSON规范（比如键无双引号、用单引号包裹值），需要先把字符串转换成合法JSON格式，再进行解析。

具体步骤 #

1. 获取属性值
   先拿到目标元素的ui-options属性内容：

   const targetEl = document.querySelector('[ui-options]');
   const rawOptionsStr = targetEl.getAttribute('ui-options');
   

2. 转换为合法JSON字符串
   处理JS对象字符串与JSON的格式差异：

   • 给无引号的对象键添加双引号
   • 把单引号替换为双引号

   // 匹配类似 key: 的格式，替换为 "key":
   const jsonFriendlyStr = rawOptionsStr
     .replace(/(\w+)\s*:/g, '"$1":')
     .replace(/'/g, '"');
   

   注：如果属性字符串包含特殊转义字符，可能需要额外处理，但常规场景下以上替换足够。

3. 解析JSON并转换为目标数组
   用JSON.parse解析后，再把对象转换成你需要的数组格式，比如将键值对转成带label和value的数组项：

   try {
     const optionsObj = JSON.parse(jsonFriendlyStr);
     // 示例：转换成指定格式的数组
     const targetArray = Object.entries(optionsObj).map(([key, value]) => ({
       label: key,
       value: value
     }));
     console.log(targetArray);
   } catch (err) {
     console.error('解析失败:', err);
   }
   

可行性说明 #

JSON.parse是浏览器原生的安全解析方法，不会执行任何代码，完全符合CSP限制要求。同时通过字符串替换，将非标准的JS对象字符串转换成合法JSON，实现了不修改HTML前提下的需求。

内容的提问来源于stack exchange，提问作者Lucian-Ionut Turiac