Electron Vue中含JSON.parse的图片引入是否存在XSS风险？

初始问题分析 #

针对代码：

var data = JSON.parse(jsonString); 
`${data.someKey}`

jsonString来自不可信源的场景：

不能认为data.someKey始终安全，是否存在XSS风险取决于插值结果的后续使用场景：

• 如果仅将插值结果作为普通字符串处理（如存储变量、打印日志），不会触发XSS；
• 但若将结果直接插入DOM、Vue模板的非绑定文本区域，或Electron渲染进程的DOM中，一旦data.someKey包含恶意HTML/JS代码（比如<script>alert('xss')</script>），就会触发XSS攻击。

JSON.parse仅能保证解析结果是合法的JS数据类型，无法过滤恶意内容，所以不能仅靠它做安全防护。

Vue+Electron场景分析 #

针对代码：

// 代码其他位置
var data = JSON.parse(jsonString); 

// Vue组件中
<img :src="require(`@/assets/img/${data.someKey}.png`)" >

服务器可能被篡改、运行在Electron环境的场景：

这个结构不安全，但风险点不是XSS，而是更严重的路径遍历与远程代码执行：

1. XSS风险可排除：Vue的:src（v-bind）会自动对属性值进行转义，即使data.someKey包含恶意HTML代码（如"><script>alert(1)</script>），也会被转义为实体字符，无法触发XSS。
2. 路径遍历与文件访问风险：
   攻击者可构造data.someKey为路径遍历字符串（比如../../../../../../etc/passwd），结合require的路径解析逻辑，可能读取Electron有权限访问的本地敏感文件；
3. 远程代码执行风险：
   如果Electron渲染进程开启了nodeIntegration（旧版本默认开启，新版本默认关闭），攻击者可通过构造恶意路径加载本地或远程恶意Node.js模块，直接执行代码，危害极大。

开发人员认为JSON.parse足够防护的观点是错误的，JSON.parse无法过滤恶意路径字符。

修复建议 #

• 对data.someKey做严格的白名单校验：仅允许字母、数字、下划线等合法文件名字符，禁止包含../、/、\等路径相关字符，同时限制字符串长度；
• 配置Electron安全选项：禁用nodeIntegration，启用contextIsolation，限制渲染进程的系统权限；
• 避免直接用用户可控变量拼接require路径：提前维护合法图片文件名的白名单，仅允许匹配白名单的值加载资源。

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