Hello all, this is something of an experience report as well as documenting an issue I had in case it is helpful to someone else in the same place. Context:
- I was using a
styleattribute on an element to set the
- The image in question had ‘parentheses’ in the name, eg.
- This caused the entire
styleattribute to be dropped.
Here is an ellie with the important part of the problem: https://ellie-app.com/9mW3b26n4zPa1
Image divs are drawn to the screen using:
makeImageDiv url = let cssUrl = [ "url(" , url , ")" ] |> String.concat in div [ Attributes.style "background-image" cssUrl , Attributes.class "image-div" ] 
so basically the url is wrapped up in
url(<url>) and that is given as the
background-image in a
style attribute. In the ellie, I give it three urls, to create three divs (urls snipped for brevity & clarity):
imageUrls = let badUrl = "[snip] Boutique(1).jpg?[snip]" in [ "[snip]Demo.png?[snip]" , badUrl , badUrl |> String.replace "(" "%28" |> String.replace ")" "%29" ]
So, the first one with no parentheses in the url displays. The second one, with
) in the url does not display. The third one displays, and this is the same url as the one which does not, except that I use
String.replace to percent-encode the
When I say the second one doesn’t display, I mean the entire
style attribute is dropped, so if you use the inspector on the ellie output you see:
<div class="image-div" style="background-image=url(...)"></div> <div class="image-div"></div> <div class="image-div" style="background-image=url(...)"></div>
So as I say, this is mostly just in case someone comes up against this problem as well, but I guess I have a couple of questions:
- Is this intended behaviour? I’m sure there is some XSS or other security reason as to why this is, can anyone enlighten me?
- I was a bit surprised that
)in the way that I have done with
String.replace. Again is this intended behaviour?
> import Url > Url.percentEncode "()" "()" : String >