javascript - CSS 的这种使用会使我的网站受到攻击吗？

Question

为了让我的用户选择我网站的配色方案，我决定添加一个“设置”页面，让他们选择自己的颜色。我能想到的选择颜色的最简单方法是让他们输入颜色名称，然后将他们输入的文本直接输入到元素的 CSS 中。这段代码展示了这个想法。

var saveButton = document.getElementById('saveButton');
var saveBox = document.getElementById('textToSave');

var colourBox = document.getElementById("colourBox");

saveButton.onclick = function() {
  colourBox.style.backgroundColor = saveBox.value;
}

#colourBox {
  display: inline-block;
  background-color: grey;
  height: 100px;
  width: 100px;
}
input {
  margin: 0px;
}
input,
Button {
  height: 30px;
  font-size: 15px;
  margin-left: 10px;
  margin-right: 10px
}

<input id="textToSave" type="text">
<button id="saveButton">Save</button>

<br>

<div id="colourBox"></div>

虽然我是直接将用户输入输入到元素中，但我担心这可能会使我的网站面临注入(inject)攻击。

虽然我对漏洞利用知之甚少。我尝试注入(inject)攻击所能做的最好的事情就是在文本框中输入以下“颜色”:

yellow; width: 200px;

但是第二个语句被删除了，可能是因为我在 JavaScript 中指定我正在更改背景颜色，而不是一般的样式。

上面的 fiddle 是否容易受到注入(inject)攻击？

Answer 1

我认为这应该是安全的。您一般不会分配给 style 属性，而是专门分配给 element.style.backgroundColor。这不会被重新解析为 HTML 或 CSS 样式字符串。

如果它不是有效的颜色规范，它将被忽略。

请注意，如果您使用允许 URL 的属性执行此操作，例如 background-image，这将不是完全安全的。然后用户可以输入任何远程站点的 URL，并在那里执行代码。这可能允许某些类型的 XSS 攻击。