问我应该如何规避CSS的图像URL？

EN

逃避引号够了吗？

不，你也应该担心反斜杠和换行符。

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

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

{nl}在哪里

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

而{escape}是一个反斜杠转义字符。所以后面的反斜杠会破坏你的CSS。一个非转义的换行符。

我强烈建议删除所有空白，最后转义"和\。

如果要通过JS设置背景url，那么正确和安全的方法是使用encodeURI()和用引号包装。

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

因为您需要插入到CSS中的用户数据可以被看作是一个URL，而不仅仅是一个字符串，所以您只需要确保它是正确的URL编码。

这是安全的，因为格式良好的URL不包含CSS字符串中任何不安全的字符；除了撇号(')以外，只要您对CSS字符串：url("...")使用双引号，就不会出现问题。

一种简单的方法是对URL中的所有字符进行URL编码，这些字符在URL中不是“保留的”或“无保留的”。根据RFC 3986的说法，除了这些字符外，所有字符都是：

A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) # [ ]

这就是encodeURI()在M JavaScriptārtiņšBriedis的答案中所做的。(只有一个例外：encodeURI()编码了[和]，这两种编码大多是无关紧要的。)

除此之外，您还可以考虑只允许以https:或data:开头的URL。通过这样做，如果页面是通过HTTPS服务的，则可以防止混合内容警告，还可以避免javascript:问题亚历山大·奥马拉。

您可能还需要进行其他URL解析和验证，但这不在此问题的范围之内。

如果需要将用户数据插入不能被视为URL的CSS字符串中，则需要执行CSS反斜杠转义。有关这方面的更多信息，请参见用户123444555621答案。