Twig attr filter encoding href and src attributes

[mmikkel]

Description

The new attr filter has the (in my opinion) unfortunate side effect of HTML encoding all attribute values for the tag that the filter operates on (as in, all of them – not only the attributes you're adding or modifying using the filter).

I know this is due to Yii's BaseHtml::renderTagAttributes() method running all the values through htmlspecialchars(), so I don't know if a fix on Craft's end is feasible. But, this unexpected behaviour can definitely lead to some gotcha moments, especially for attributes like src and href, where e.g. ampersands in query strings being encoded to & can be an issue (I just realized some of my Imgix URLs were failing due to this).

Steps to reproduce

{% filter attr({ class: 'foo' }) %}
    <img src="image.jpg?width=100&height=100" />
{% endfilter %}

Renders <img class="foo" src="image.jpg?width=100&amp;height=100" />

Additional info

• Craft version: 3.3.4.1
• PHP version:
• Database driver & version:
• Plugins & versions:

[brandonkelly]

In your example, the correct behavior should be to encode the & to &, as the HTML you posted is actually invalid.

However if it already is encoded as &, the filter should not be double-encoding it to &, which it was doing. So I’ve just fixed that for the next release.

[mmikkel]

Ah! You're absolutely correct. And the double & was my actual issue, of course. Thanks for the quick fix!

[samhibberd]

@brandonkelly i'm not sure if this is related, a separate issue or me not understanding something but seeing some inconsistencies between rendering HTML chars when run using the attr() function:

<input {{ attr({
    type: "submit",
    value: "Go &rarr;",
    class: "btn btn-green cursor-pointer"
}) }}>

<input type="submit" value="Go &rarr;" class="btn btn-green cursor-pointer">

I would expect these two submit buttons should render exactly the same, but they don't?

[brandonkelly]

@samhibberd the & is probably getting encoded by the output tag ({{ }}), not the attr() function. Add |raw after the }} to avoid that.

<input {{ attr({
    type: "submit",
    value: "Go &rarr;",
    class: "btn btn-green cursor-pointer"
})|raw }}>

or just use the tag() function:

{{ tag('input', {
    type: "submit",
    value: "Go →",
    class: "btn btn-green cursor-pointer"
}) }}

[samhibberd]

Hey @brandonkelly, tried that and the input tag, same deal for me, I must be missing something really obvious :(

Tested the following in a fresh template, with no other content, and only the first raw html version outputs correctly:

<input type="submit" value="Go &rarr;">

<input {{ attr({
    type: "submit",
    value: "Go &rarr;",
}) }}>

<input {{ attr({
    type: "submit",
    value: "Go &rarr;",
})|raw }}>

{{ tag('input', {
    type: "submit",
    value: "Go &rarr;",
}) }}

[brandonkelly]

Sorry, this is actually expected behavior. I forgot that yii\helpers\Html::renderTagAttributes() (which the attr() Twig function is mapped to) encodes all attribute values. So you will need to pass in → directly to the value.

<input {{ attr({
    type: "submit",
    value: "Go →",
}) }}>

[samhibberd]

Cool. Thanks @brandonkelly