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>

由于我直接将用户输入提供给元素，我担心这会打开我的网站直到注入攻击。

我对漏洞利用知之甚少。我尝试注射攻击的最佳方法是在文本框中输入以下“颜色”：

yellow; width: 200px;

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

上述小提琴是否容易受到注射攻击？

Answer 1

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

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

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

Answer 2

使用<input type="color" />

Answer 3

由于JavaScript和CSS在客户端（浏览器）上运行，因此不能用于攻击您的网站后端。最糟糕的情况是用户打破了他自己的视图，但页面/浏览器刷新将撤消坏视图。我希望这可以解决你的问题。

可以使用CSS打开我的网站进行攻击吗？

3 个答案: