为了让我的用户选择我网站的配色方案,我决定添加一个“设置”页面,让他们选择自己的颜色。我能想到的选择颜色的最简单方法是让他们输入颜色名称,然后将他们输入的文本直接输入到元素的 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)攻击?
最佳答案
我认为这应该是安全的。您一般不会分配给 style
属性,而是专门分配给 element.style.backgroundColor
。这不会被重新解析为 HTML 或 CSS 样式字符串。
如果它不是有效的颜色规范,它将被忽略。
请注意,如果您使用允许 URL 的属性执行此操作,例如 background-image
,这将不是完全安全的。然后用户可以输入任何远程站点的 URL,并在那里执行代码。这可能允许某些类型的 XSS 攻击。
关于javascript - CSS 的这种使用会使我的网站受到攻击吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34515485/