CSS 的这种使用是否会使我的站点受到攻击？

Question

为了让我的用户选择我网站的配色方案，我决定添加一个 "Settings" 页面，让他们选择自己的颜色。我能想到的选择颜色的最简单方法是让他们输入颜色的名称，然后将他们输入的文本直接输入到元素的 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>

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

虽然我对漏洞利用知之甚少。我尝试注入攻击所能做的最好的事情就是在文本框中输入以下 "colour"：

yellow; width: 200px;

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

以上fiddle是否容易受到注入攻击？

Answer 1

我认为这应该是安全的。您不是一般地分配给 style 属性，而是专门分配给 element.style.backgroundColor。这不会将 re-parsed 作为 HTML 或 CSS 样式字符串。

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

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

Answer 2

使用<input type="color" />

Answer 3

因为JavaScript和CSS 运行在客户端（浏览器），它不能用来攻击你的网站back-end。最坏的情况是用户破坏了他自己的视图，但是 page/browser 刷新将撤消坏视图。我希望这能解决您的问题。

CSS 的这种使用是否会使我的站点受到攻击？

Can this use of CSS open my site to an attack?

javascript

css

security

code-injection