我应该如何转义CSS的图像URL？

我有一个

div

，它将从用户选择的URL接收CSS背景图像，如下所示：

背景图像：url（“/*此处为用户指定的url*/”）

我应该如何转义URL以便安全地嵌入CSS？逃避引用就足够了吗

逃避引用就足够了吗

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

以下是双引号URI的CSS语法：

其中

{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编码。根据，这些字符将是除以下字符以外的所有字符：

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

这就是中所做的。（只有一个例外：

encodeURI（）

编码

[

和

]

，这基本上是无关紧要的。）

除此之外，您可能只考虑从代码开始的URL：http:或<代码>数据：。通过这样做，您可以防止页面通过HTTPS服务，也可以避免<代码> JavaScript：< /Cord>发行版。< /P> 您可能还需要进行其他URL解析和验证，但这超出了本问题的范围

---

如果您需要将用户数据插入到不能像URL一样处理的CSS字符串中，则需要这样做。有关详细信息，请参阅。

您可能还需要对其进行URL编码（将空格转换为%20等）@SetSailMedia使用

urlencode

之类的函数对整个URL进行编码将破坏URL。@AlexanderO'Mara说得对！我猜OP必须使用一些智能过滤，然后：）应该注意，一些旧浏览器将执行

background image:URL（'javascript:some_JS_code'））

。转义引号不会保存这些浏览器。这个答案的通用非JS版本是，要转义CSS的URL，只需对URL中既不是“保留”也不是“未保留”的字符进行URL编码（

”

=>

%22

）。这就是

encodeURI（）

所做的。这是因为格式良好的URL在CSS字符串中不包含任何不安全的字符，撇号（

”

）除外，这就是为什么您应该在CSS字符串中使用双引号（

“

）的原因。它不会破坏一个一开始就没有被破坏的URL。小心括号

（）

，它们不是用

encodeURI

@BasselShmali转义的，因为url（）的内容是用引号括起来的，我认为这不应该是一个问题。@MārtiņšBriedis Holy Molly，我错过了如果url已经包含转义序列，encodeURI将不起作用，因为它转义了%，所以

%20

变成了

%2520

，等等。

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