使用CSS可以使我的网站受到攻击吗？

Question

To allow my users to pick their colour scheme of my site, I decided to add a "Settings" page that lets them pick their colours. The simplest way to choose a colour that I could think of was to let them type a colour's name, and have the text they enter fed directly into the CSS of the elements. This code shows the idea.

 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> 

Since I'm directly feeding user input into the element though, I'm worried this might open my site up to an injection attack.

I know very little about exploits though. The best I could do to attempt an injection attack was to enter the following "colour" into the text box:

yellow; width: 200px;

But the second statement was dropped, likely because I'm specifying in the JavaScript that I'm changing the background colour, and not the style in general.

Is the above fiddle susceptible to an injection attack?

Answer 1

I think this should be safe. You're not assigning to the style attribute in general, you're assigning specifically to element.style.backgroundColor . This doesn't get re-parsed as HTML or a CSS style string.

If it's not a valid color specification, it will just be ignored.

Note that this would not be entirely safe if you were doing this with an attribute that allows URLs, such as background-image . The user could then enter the URL for any remote site, and execute code there. This might allow for some kinds of XSS exploits.

Answer 2

使用<input type="color" />

Answer 3

Since JavaScript and CSS run on client side (browser), it can not be used to attack to your website back-end. The worst case is that a user breaks his own view, but a page/browser refresh will undo the bad view. I hope this addresses your question.