我應該如何轉義CSS的圖片網址？

我有一個div將從用戶選擇的URL收到一個CSS背景圖像，就像這樣：我應該如何轉義CSS的圖片網址？

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

我應如何躲避URL，以便它的安全在CSS中嵌入？足夠逃脫報價了嗎？

來源

2014-09-01 Granada

您可能還需要URLENCODE它（將空格轉換爲％20等） – 2014-09-01 22:27:26

@SetSailMedia使用像urlencode這樣的函數對整個URL進行編碼將會破壞URL。 – 2014-09-01 22:31:04

@ AlexanderO'Mara好點！猜測OP將不得不使用一些智能過濾，然後:) – 2014-09-01 22:33:02

是否足夠逃脫引號？

不，你也應該擔心反斜槓和換行符。

下面是一個雙引號URI的CSS語法： http://www.w3.org/TR/CSS21/grammar.html#scanner

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

其中{nl}是

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

和{escape}是一個反斜槓轉義字符。所以後面的反斜槓會破壞你的CSS。非轉義的換行符也是如此。

我會強烈建議移除所有的空格，最後逃脫"和\

來源

2014-09-01 23:01:17 user123444555621

如果通過JS設置背景的URL，那麼正確的和安全的方式是使用是encodeURI（）和包裝的報價。

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

來源

2015-11-05 09:48:04

這個答案的廣義的非JS版本是爲了逃避CSS的URL，你只需要URL編碼（'''''>'％22'）既不是「保留」也不是「保留」的字符在URLs中（[RFC 3986]（https://tools.ietf.org/html/rfc3986））。這就是'encodeURI（）'的作用。這是因爲格式良好的URL不包含任何不安全的字符CSS字符串，除了撇號（'''），這就是爲什麼你應該爲你的CSS字符串使用雙引號（'「'）。它不會破壞一開始就沒有被破解的URL。 – 2017-10-07 01:38:06

因爲你需要插入到CSS的用戶數據可以通過URL來處理，而不是隻是一個字符串，你只需要確保它是正確的URL編碼。

這是安全的，因爲格式良好的URL不包含CSS字符串中不安全的任何字符;除了撇號（'），它只要你使用雙引號爲你的CSS字符串不是一個問題：url("...")

一個簡單的方法做，這是URL編碼沒有被「保留」的所有字符或者「毫無保留「的網址。據RFC 3986，這將是所有字符，除了這些：

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

這就是encodeURI()確實在Mārtiņš Briedis's JavaScript answer。（有一個例外：encodeURI()編碼[和]，其中大部分是無關緊要的）

除此之外，你可能只考慮與https:或data:開始允許的網址。通過這樣做，如果通過HTTPS提供頁面，則可以防止mixed content warnings，並且還可以避免javascript:問題Alexander O'Mara commented on。

您可能會進行其他URL解析和驗證，但這不在此問題的範圍之內。

如果您需要將用戶數據插入不能像URL那樣處理的CSS字符串，那麼您需要執行CSS backslash escaping。有關更多信息，請參閱user123444555621's answer。

來源

2017-10-07 02:51:07

我應該如何轉義CSS的圖片網址？

回答

相關問題