我该如何转义CSS的图片网址？

Question

我有一个div将从用户选择的URL接收CSS背景图像,如下所示:

background-image: url("/* user specified URL here*/")

我应该如何转义URL,以便可以安全地嵌入CSS？是否足够逃避报价？

Answer 1

如果您通过JS设置后台URL,那么正确且安全的方法是使用encodeURI()并用引号括起来.

node.style.backgroundImage = 'url("' + encodeURI(url) + '")';

Answer 2

转义引号就足够了吗？

不，您还应该担心反斜杠和换行符。

以下是双引号 URI 的 CSS 语法： http://www.w3.org/TR/CSS21/grammar.html#scanner

"([^\n\r\f\\"]|\\{nl}|{escape})"

哪里{nl}​

\n|\r\n|\r|\f

并且{escape}是反斜杠转义字符。所以结尾的反斜杠会破坏你的CSS。同样是非转义换行符。

我强烈建议删除所有空格并最终"转义\