Use html_attr_relaxed for attribute name escaping

Author: mpdude

doc/functions/html_attr.rst

@@ -7,18 +7,14 @@
 
     The ``html_attr`` function was added in Twig 3.24.
 
-The ``html_attr`` function renders HTML attributes from one or more mappings.
-The mappings contain the names of HTML attributes as keys, and the corresponding
-values represent the attributes' values. Escaping is applied for the attribute
+The ``html_attr`` function renders HTML attributes from one or more mappings,
+taking care of proper escaping. The mappings contain the names of HTML
+attributes as keys, and the corresponding values represent the attributes'
 values.
 
 .. note::
 
-    Attribute names are **not** escaped, to allow using names ``v-bind:href``
-    or ``@click`` required by some front-end frameworks that would be escaped
-    by the ``html_attr`` strategy. Avoid using attribute names from user input
-    or untrusted sources, or apply escaping with ``|e('html_attr')`` _before_
-    using such data for attribute names.
+    Attribute names are escaped using the ``html_attr_relaxed`` strategy.
 
 .. code-block:: html+twig
 

extra/html-extra/HtmlExtension.php

@@ -248,7 +248,7 @@ public static function htmlAttr(Environment $env, iterable|string|false|null ...
                 continue;
             }
 
-            $result .= $name.'="'.$runtime->escape($value).'" ';
+            $result .= $runtime->escape($name, 'html_attr_relaxed').'="'.$runtime->escape($value).'" ';
         }
 
         return trim($result);

extra/html-extra/Tests/Fixtures/html_attr.test

@@ -2,9 +2,8 @@
 "html_attr" function
 --TEMPLATE--
 Simple attributes: <tag {{ html_attr({ foo: 'bar' }, { bar: 'baz' }) }}/>
-{% set untrusted_input = 'unsafe="yes" usage' %}
-Escaping of the value only: <tag {{ html_attr({ (untrusted_input): '<>&\'"' }) }}/>
-Properly escaped attribute name: <tag {{ html_attr({ (untrusted_input|e('html_attr')): '<>&\'"' }) }}/>
+Relaxed attribute name escaping: <tag {{ html_attr({ 'v-bind:href': 'url', ':[key]': 'url', '@click': 'doSomething' }) }} />
+Appropriate escaping: <tag {{ html_attr({ 'untrusted name': '<>&\'"' }) }}/>
 Empty attribute list: <tag {{ html_attr([], {}, null) }}/>
 Using a short ternary: <tag {{ html_attr({foo: 'bar'}, false ? {bar: 'baz'}) }}/>
 boolean true attribute: <tag {{ html_attr({ checked: true}) }}/>
@@ -23,8 +22,8 @@ merging a "comma separated token list" value with more array values: <img {{ htm
 return []
 --EXPECT--
 Simple attributes: <tag foo="bar" bar="baz"/>
-Escaping of the value only: <tag unsafe="yes" usage="&lt;&gt;&amp;&#039;&quot;"/>
-Properly escaped attribute name: <tag unsafe&#x3D;&quot;yes&quot;&#x20;usage="&lt;&gt;&amp;&#039;&quot;"/>
+Relaxed attribute name escaping: <tag v-bind:href="url" @[key]="url" @click="doSomething" />
+Appropriate escaping: <tag untrusted&#x20;name="&lt;&gt;&amp;&#039;&quot;"/>
 Empty attribute list: <tag />
 Using a short ternary: <tag foo="bar"/>
 boolean true attribute: <tag checked=""/>

extra/html-extra/Tests/HtmlAttrTest.php

@@ -141,10 +141,10 @@ public static function htmlAttrProvider(): \Generator
         ];
 
         // Escaping
-        yield 'attribute name is _not_ escaped' => [
-            'this is dangerous: fail @ xss="123"',
+        yield 'attribute name is escaped' => [
+            'data-user id="123"',
             [
-                ['this is dangerous: fail @ xss' => '123'],
+                ['data-user id' => '123'],
             ],
         ];