使用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> 

由于我将用户输入直接输入到元素中，因此我担心这可能会使我的网站遭受注入攻击。

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

yellow; width: 200px;

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

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

Answer 1

我认为这应该是安全的。 通常，您没有分配style属性，而是专门分配了element.style.backgroundColor 。 不会将其重新解析为HTML或CSS样式字符串。

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

请注意，如果您使用允许URL的属性（例如background-image进行此操作，则并非绝对安全。 然后，用户可以输入任何远程站点的URL，并在那里执行代码。 这可能允许使用某些XSS漏洞。

Answer 2

使用<input type="color" />

Answer 3

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