Attribute values being converted to HTML entities (when they should not)

[fernandes]

If there's a need to add inline style, with background property

class Nav < Phlex::HTML
  def template
    nav(class: "main-nav", style: "background: url('foo.jpg') no-repeat center center / cover;") {
      ul {
        li { a(href: "/") { "Home" } }
        li { a(href: "/about") { "About" } }
        li { a(href: "/contact") { "Contact" } }
      }
    }
  end
end

it's generating this HTML (indented for reading)

<nav class="main-nav" style="background: url(&#39;foo.jpg&#39;) no-repeat center center / cover;">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

where the background: url('foo.jpg') should not be transformed into html entities

any suggestion?

thank you

ps: running Phlex 1.10.1

[brandondrew]

oii @fernandes While single (and double) quotes are allowed, you can also omit them, and off the top of my head I think I usually see the quotes omitted. So yes this looks like a bug, but I expect that you can easily work around it just by omitting the single quotation marks.

[joeldrapper]

Hey @fernandes, this is by design in order to protect against XSS attacks. If you had something like this in your code style: "background: url('#{user.profile_image_url}')", a user might be able to set their profile_image_url to something like this:

"><script type="text/javascript">badStuff()</script>

I opened #709 to explore how we might be able to escape just the double quotes, allowing you to use the other characters (single quotes, etc.) inside attribute values.

[fernandes]

that's really good good information @brandondrew , absolutely works as a work around

@joeldrapper yes! totally makes sense, and it's good security in first place, I was thinking if possible to have so config/param to allow it (maybe a param to allow per single case)

at least, as @brandondrew said, can omit the quotes on the url , this solves for my case, so I'll leave it to you, to keep the issue open or not

thank you!

[fernandes]

let me add another case here, and if worth, I open a new issue.. let's say I want to add the © symbol to a page

class Copyright < Phlex::HTML
  def template
    plain "#{company.name}©"
  end
end

it renders the copyright symbol Acme©, if I try to use html entities

  def template
    plain "#{company.name}©"
  end

phlex converts the & (ampersand symbol)

Acme©

so the HTML will show Acme© on the browser

what's the best way to solve it? thank you

[joeldrapper]

I think the best way to solve this is to use UTF-8 encodings. You can put UTF-8 characters in the Ruby files and in HTML if you use <meta charset="UTF-8">.

[fernandes]

makes sense, thanks for the tip! 🙇