A possible use-case for unsafe_raw and unescaped attributes

[zavan]

I think I have a fringe use-case where unsafe_raw and unescaped attributes might be necessary.

I'm using Phlex to render navbars dynamically and dump them to a PHP file for some old PHP websites.

I need unsafe_raw to be able to dump PHP blocks:

(I know this is terrible, it's not a good architecture, this is not how/where this function should be defined etc, but it's something I have to deal with, so bear with me please)

  def template
    php_header

    top_level_items.each do |i|
      item(i)
    end
  end

  def php_header
    unsafe_raw(
      %Q{
        <?php
          function path_for($path) {
            if ($isLive) {
              return $path;
            } else {
              return '/#{site_directory}' . $path;
            }
          }
        ?>
      }
    )
  end

site_directory is not user provided.

Now I need to use that PHP function in a(href) attributes, the output needs to look like:

<a href="<?= path_for('/home') ?>">Home</a>

but of course right now the attribute value would be escaped and not work.

One way I could make this work is by patching __build_attributes__ to not escape the attribute value if it's marked as safe, I'm using rails' html_safe for this:

def link(item)
  a(href: item_href(item)) do
    item.title
  end
end

def item_href(item)
  href = item.link.to_s

  if href.starts_with?('#') || href.starts_with?('http')
    href
  else
    "<?= path_for('#{ERB::Escape.html_escape(href)}') ?>".html_safe
  end
end

private

# SEE: https://github.com/joeldrapper/phlex/blob/958b2b8d5d092bd189ea0b87c678ee35be8f76fd/lib/phlex/sgml.rb#L274
def __build_attributes__(attributes, buffer:)
  attributes.each do |k, v|
    next unless v

    name = case k
      when String then k
      when Symbol then k.name.tr("_", "-")
      else k.to_s
    end

    # Detect unsafe attribute names. Attribute names are considered unsafe if they match an event attribute or include unsafe characters.
    if Phlex::HTML::EVENT_ATTRIBUTES[name] || name.match?(/[<>&"']/)
      raise ArgumentError, "Unsafe attribute name detected: #{k}."
    end

    # The value is considered safe if it is marked as safe.
    # This is the only part of the method that is different from the original.
    if v.respond_to?(:html_safe?) && v.html_safe?
      buffer << " " << name << '="' << v << '"'
      next
    end

    case v
    when true
      buffer << " " << name
    when String
      buffer << " " << name << '="' << ERB::Escape.html_escape(v) << '"'
    when Symbol
      buffer << " " << name << '="' << ERB::Escape.html_escape(v.name) << '"'
    when Hash
      __build_attributes__(
        v.transform_keys { |subkey|
          case subkey
            when Symbol then"#{k}-#{subkey.name.tr('_', '-')}"
            else "#{k}-#{subkey}"
          end
        }, buffer: buffer
      )
    else
      buffer << " " << name << '="' << ERB::Escape.html_escape(v.to_s) << '"'
    end
  end

  buffer
end

Note that I escaped the user-provided dangerous bit (item.link) before marking the string as safe.

I hate this, of course. Maybe there's a better way to do it?

[joeldrapper]

This is an incredible use-case. 😅 I’ve considered supporting unsafe attributes with a special type that bypasses the safety checks. The interface would be something like this.

a href: safe("javascript:alert(1)")

For your use case, I wonder if you could just unescape the final output with CGI.unescape_html?

You could do this for specific blocks of content by defining a method like this.

def safe_output(&block)
  unsafe_raw(
    CGI.unescape_html(
      capture(&block)
    )
  )
end

Then just use it like this

safe_output do
  a href: "<?= path_for('/home') ?>"
end

You'll probably need to require "cgi" at the top of the file too.

[zavan]

@joeldrapper Yeah, betcha didn't think people would be doing this with your library :p

I'll try your suggestion, thanks!

I do think more people are going to need to support unsafe attributes. And your interface looks good (safe('...')).

[savroff]

We also want to take risks sometimes. 😅

Especially helpful during the transition from JS frontend to Phlex.

fancy_button(onclick: 'alert("Hello World!")') { 'Click me' }

[joeldrapper]

@savroff this will be supported in Phlex 2 via

fancy_button(onclick: safe 'alert("Hello World!")') { 'Click me' }