将HTML输入文本用于Chart.js背景色是否存在XSS漏洞？

提供的代码片段 #

HTML

<input type="text" name="" id="colourChoice1" value=""></input>

JavaScript（获取输入值）

function colourChoice1Javascript(){
  colourChoice1 = document.getElementById('colourChoice1').value;
  console.log(colourChoice1);
}

Chart.js配置代码

const data = {
  labels: xValues,
  datasets: [{
    label: userCommonBatsDataName,
    backgroundColor: colourChoice1,
    borderColor: 'black',
    data: y2Values
  }]
};

问题解答 #

1. 是否存在XSS或其他安全漏洞？
   不存在XSS漏洞。Chart.js的backgroundColor属性仅用于解析合法颜色值（如十六进制#ff0000、RGBrgb(255,0,0)、标准颜色名red等），不会将用户输入内容作为HTML或JavaScript代码插入页面执行。即便输入恶意脚本内容（比如<script>alert('xss')</script>），Chart.js会判定为无效颜色，只会忽略该值或使用默认样式，不会触发脚本执行。

2. 是否需要标签剥离、编码处理？
   不需要做标签剥离或编码处理，但建议添加颜色合法性校验，确保用户输入符合规范的颜色格式。这能避免Chart.js因无效值出现渲染异常，同时提升用户体验。

   简单校验示例：

   // 校验常见合法颜色格式
   function isValidColor(color) {
     return /^#([0-9A-F]{3}){1,2}$/i.test(color) || 
            /^rgb\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*\)$/.test(color) ||
            /^rgba\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*(0|1|0\.\d+)\s*\)$/.test(color) ||
            // 可扩展更多标准颜色名
            ['red', 'blue', 'green', 'yellow'].includes(color.toLowerCase());
   }
   
   // 获取输入时校验
   function colourChoice1Javascript(){
     const inputValue = document.getElementById('colourChoice1').value;
     if (isValidColor(inputValue)) {
       colourChoice1 = inputValue;
     } else {
       colourChoice1 = '#cccccc'; // 设置默认 fallback 颜色
       alert('请输入合法的颜色值');
     }
     console.log(colourChoice1);
   }
   

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