CSS and JQuery: spaces inside image name break code of url()
Solution 1
Spaces are not valid in a URI. They need to be encoded to %20
.
You could src.replace(/ /g, '%20')
, or more generally, encodeURI(src)
to %
-encode all characters that aren't valid in a URI. encodeURIComponent(src)
is more common, but it would only work if the src
was just a single relative filename; otherwise, it'd encode /
and stop paths working.
However, the real problem is that the original img src
is already broken and only working thanks to browser fixups correcting your error. You need to fix the Ruby script generating the page. You should be URL-encoding the filename before including it in the path; there are many more characters that can cause you problems than just space.
As Pekka said, you should also use quotes around the URL in the url(...)
value. Whilst you can get away without them for many URLs, some characters would have to be \
-escaped. Using double-quotes mean you can avoid that (no double-quotes can appear in a URL itself).
Solution 2
Adding quotes around the URL should help:
$('#viewlarge').css('backgroundImage','url("' + src +'")');
however, according to the W3C specs, white space must be escaped, so the URL encoding solution provided by @Andy E's head @bobince is the safest one.
Solution 3
- Firstly, why are you letting clients determine the name of your images?
- Secondly, why aren't you sanitizing them?
- Thirdly, i suspect you aren't urlencoding the urls when you write them to the html (which would turn a space into a %20)
Shyam
Daily life => Entrepreneur || whizzkid Favorite writer => Dan Brown Operating System of Choice => OSX Favorite Language => Ruby Favorite Car => Corvette
Updated on June 11, 2022Comments
-
Shyam almost 2 years
I have a page that is supposed to display a larger version of an image when hovered over a thumbnail.
I have a 'div' with an ID and the JQuery code is as following:
$(document).ready(function(){ $('img').hover(function() { var src = $("#im" + this.id).attr("src"); $('#viewlarge').css('backgroundImage','url(' + src +')'); return false; }); });
The images I use, are generated by a Ruby script that "generate" an image with a similar, yet different id. However, sometimes, photo's are uploaded that have "spaces" inside. My developer tools tell me that the background-image is not set correctly, yet the image path is correct and the browser don't have problems finding the image.
My question is, can I somehow sanitize the url 'src', so spaces won't be a problem? I am aware of doing this server side, yet I would like to know how to do this with JQuery/JS too.
Thanks!
-
Quentin almost 14 yearsThat would only help if the variable contained brackets. The question indicates that spaces are the problem.
-
Andy E almost 14 years
encode
is deprecated, because of its lack of unicode support.encodeURI
andencodeURIComponent
are recommended replacements. -
Andy E almost 14 years+1 - I was going to add this suggestion to my answer until I saw you'd posted it.
-
Shyam almost 14 years1. Because they have a freaking scary big database with filepaths. Let's call this a migration issue. 2. I will, I am still developing the replacement app. 3. I am a n00b, what else can I add ;)
-
Nick Craver almost 14 years@David - stackoverflow.com/questions/2168855/css-url-whats-better Please read the spec before down-voting, you are incorrect: w3.org/TR/CSS2/syndata.html#value-def-uri
-
Amit Patil almost 14 yearsThere's no such thing as
encode
.escape
exists but is the wrong thing. -
Andrew Bullock almost 14 yearscool, what site is it? i'll upload a file with a malformed name and inject javascript into your page and steal your users logins, takover a session and hijack an account, destroy some data and otherwise cause your business epic pain and expense. woo!
-
Quentin almost 14 yearsAnd after poking at test cases, my vote is locked and I can't remove it. How annoying. It's a fairly weird bit of the spec which copes with broken URIs in an illogical way, but it turns out that it is right. Goes to show that there is always something new to learn. Of course, the "right" solution is still to fix the URI.
-
Andy E almost 14 years@bobince: facepalm I totally missed that and confused the two.
escape
was edited in afterwards. someone put the kettle on! -
Pekka almost 14 years@David I edited my question. I agree though that the URI ultimately needs to be encoded, as Andy E and bobince point out.
-
Shyam almost 14 yearsYou can make a point without being sarcastic. My apologies I wasn't born with a 500lbs security manual. Notice also the last sentence of my question. I thank you for highlighting the security issue, I am a bit less thankful for the hostile reply.
-
Andrew Bullock almost 14 yearsapologies i didnt mean it in a hostile manner, i was being jovial ;)
-
Shyam almost 14 yearsNo problem, I am also asking this because I love JQuery, but I like to minimize the amount of 'plugins' that take care of these matters. Also, I think it is a good practice to learn how to sanitize with JavaScript too. In the Ruby language, it is normal to consider any data to be tainted that come from an external source.
-
Andy E almost 14 years@Shyam: in short, don't use
escape
.