User a better escaping mechanism for HTML attributes

Author: javiereguiluz

templates/crud/action.html.twig

@@ -4,12 +4,12 @@
 {% if 'a' == action.htmlElement %}
     <a class="{{ isIncludedInDropdown|default(false) ? 'dropdown-item' }} {{ action.cssClass }}"
        href="{{ action.linkUrl }}"
-       {% for name, value in action.htmlAttributes %}{{ name }}="{{ (value.trans is defined ? value|trans : value)|e('html_attr') }}" {% endfor %}>
+       {% for name, value in action.htmlAttributes %}{{ name }}="{{ (value.trans is defined ? value|trans : value)|e('html') }}" {% endfor %}>
         {%- if action.icon %}<twig:ea:Icon name="{{ action.icon }}" class="action-icon" /> {% endif -%}
         {%- if action.label is not empty -%}<span class="action-label">{{ action.label|trans|raw }}</span>{%- endif -%}
     </a>
 {% elseif 'button' == action.htmlElement %}
-    <button class="{{ action.cssClass }}" {% for name, value in action.htmlAttributes %}{{ name }}="{{ (value.trans is defined ? value|trans : value)|e('html_attr') }}" {% endfor %}>
+    <button class="{{ action.cssClass }}" {% for name, value in action.htmlAttributes %}{{ name }}="{{ (value.trans is defined ? value|trans : value)|e('html') }}" {% endfor %}>
         <span class="btn-label">
             {%- if action.icon %}<twig:ea:Icon name="{{ action.icon }}" /> {% endif -%}
             {%- if action.label is not empty -%}<span class="action-label">{{ action.label|trans|raw }}</span>{%- endif -%}

templates/crud/detail.html.twig

@@ -63,7 +63,7 @@
 {% endblock %}
 
 {% macro render_field_contents(entity, field) %}
-    <div class="field-group {{ field.cssClass }}" {% for name, value in field.htmlAttributes %}{{ name }}="{{ value|e('html_attr') }}" {% endfor %}>
+    <div class="field-group {{ field.cssClass }}" {% for name, value in field.htmlAttributes %}{{ name }}="{{ value|e('html') }}" {% endfor %}>
         {% if field.label is same as (false) %}
             {# a FALSE label value means that the field doesn't even display the <label> element;
                use an empty string to not display a label but keep the <label> element to not mess with the layout #}
@@ -73,7 +73,7 @@
                     {%- if field.help is not empty -%}
                         data-bs-toggle="tooltip" data-bs-placement="auto" data-bs-animation="false"
                         data-bs-html="true" data-bs-custom-class="ea-detail-label-tooltip"
-                        data-bs-title="{{ field.help|trans|e('html_attr') }}"
+                        data-bs-title="{{ field.help|trans|e('html') }}"
                     {%- endif -%}
                 {%- endset -%}
 
@@ -157,7 +157,7 @@
     {% set tab_id_option_name = constant('EasyCorp\\Bundle\\EasyAdminBundle\\Field\\FormField::OPTION_TAB_ID') %}
     {% set tab_is_active_option_name = constant('EasyCorp\\Bundle\\EasyAdminBundle\\Field\\FormField::OPTION_TAB_IS_ACTIVE') %}
 
-    <div id="{{ field.getCustomOption(tab_id_option_name) }}" class="tab-pane {% if field.getCustomOption(tab_is_active_option_name) %}active{% endif %} {{ field.cssClass }}" {% for key, value in field.getFormTypeOption('attr') %}{{ key }}="{{ value|e('html_attr') }}"{% endfor %}>
+    <div id="{{ field.getCustomOption(tab_id_option_name) }}" class="tab-pane {% if field.getCustomOption(tab_is_active_option_name) %}active{% endif %} {{ field.cssClass }}" {% for key, value in field.getFormTypeOption('attr') %}{{ key }}="{{ value|e('html') }}"{% endfor %}>
         {% if field.help %}
             <div class="content-header-help tab-help">
                 {{ field.help|trans(domain = ea.i18n.translationDomain)|raw }}
@@ -391,7 +391,7 @@
             {{ field.label|trans|raw }}
 
             {% if field.help is not empty %}
-                <a tabindex="0" class="data-help" data-bs-toggle="popover" data-bs-custom-class="ea-content-help-popover" data-bs-animation="true" data-bs-html="true" data-bs-placement="right" data-bs-trigger="focus" data-bs-content="{{ field.help|trans|e('html_attr') }}">
+                <a tabindex="0" class="data-help" data-bs-toggle="popover" data-bs-custom-class="ea-content-help-popover" data-bs-animation="true" data-bs-html="true" data-bs-placement="right" data-bs-trigger="focus" data-bs-content="{{ field.help|trans|e('html') }}">
                     <twig:ea:Icon name="internal:circle-info" />
                 </a>
             {% endif %}

templates/crud/field/code_editor.html.twig

@@ -31,11 +31,11 @@
             readonly
             style="{{ configuredHeight is null ? 'max-height: 500px;' : 'max-height: unset; height: ' ~ configuredHeight ~ 'px' }}"
             data-ea-code-editor-field="true"
-            data-language="{{ field.customOptions.get('language')|e('html_attr') }}"
-            data-tab-size="{{ field.customOptions.get('tabSize')|e('html_attr') }}"
+            data-language="{{ field.customOptions.get('language')|e('html') }}"
+            data-tab-size="{{ field.customOptions.get('tabSize')|e('html') }}"
             data-indent-with-tabs="{{ field.customOptions.get('indentWithTabs') ? 'true' : 'false' }}"
             data-show-line-numbers="{{ field.customOptions.get('showLineNumbers') ? 'true' : 'false' }}"
-            data-number-of-rows="{{ field.customOptions.get('numOfRows')|e('html_attr') }}"
+            data-number-of-rows="{{ field.customOptions.get('numOfRows')|e('html') }}"
     >
         {{- field.formattedValue|escape -}}
     </textarea>

templates/crud/form_theme.html.twig

@@ -670,7 +670,7 @@
     {% set tab_is_active_option_name = constant('EasyCorp\\Bundle\\EasyAdminBundle\\Field\\FormField::OPTION_TAB_IS_ACTIVE') %}
     {% set field = form.vars.ea_vars.field %}
 
-    <div id="{{ ea_tab_id }}" class="tab-pane {% if field.getCustomOption(tab_is_active_option_name) %}active{% endif %} {{ ea_css_class }}" {% for key, value in form.vars.attr %}{{ key }}={{ value|e('html_attr') }}{% endfor %}>
+    <div id="{{ ea_tab_id }}" class="tab-pane {% if field.getCustomOption(tab_is_active_option_name) %}active{% endif %} {{ ea_css_class }}" {% for key, value in form.vars.attr %}{{ key }}={{ value|e('html') }}{% endfor %}>
         {% if ea_help %}
             <div class="content-header-help tab-help">
                 {{ ea_help|trans(domain = ea.i18n.translationDomain)|raw }}
@@ -695,7 +695,7 @@
                 <div class="filter-heading" id="filter-heading-{{ loop.index }}">
                     <input type="checkbox" class="filter-checkbox" {% if field.vars.name in applied_filters %}checked{% endif %}>
                     <a data-bs-toggle="collapse" href="#filter-content-{{ loop.index }}" aria-expanded="{{ field.vars.name in applied_filters ? 'true' : 'false' }}" aria-controls="filter-content-{{ loop.index }}"
-                        {% for name, value in field.vars.label_attr|default([]) %}{{ name }}="{{ value|e('html_attr') }}" {% endfor %}>
+                        {% for name, value in field.vars.label_attr|default([]) %}{{ name }}="{{ value|e('html') }}" {% endfor %}>
                         {{ field.vars.label|default(field.vars.name|humanize)|trans(domain = ea.i18n.translationDomain) }}
                     </a>
                 </div>
@@ -873,8 +873,8 @@
     <div class="input-group">
         {{ block('form_widget') }}
         <button type="button" class="btn"
-                data-icon-locked="{{ component('ea:Icon', {name: 'internal:lock'})|e('html_attr') }}"
-                data-icon-unlocked="{{ component('ea:Icon', {name: 'internal:lock-open-solid'})|e('html_attr') }}">
+                data-icon-locked="{{ component('ea:Icon', {name: 'internal:lock'})|e('html') }}"
+                data-icon-unlocked="{{ component('ea:Icon', {name: 'internal:lock-open-solid'})|e('html') }}">
             <twig:ea:Icon name="internal:lock" />
         </button>
     </div>

templates/crud/index.html.twig

@@ -151,7 +151,7 @@
                         {% for field in entity.fields %}
                             {% set is_searchable = null == ea.crud.searchFields or field.property in ea.crud.searchFields %}
 
-                            <td data-column="{{ field.property }}" data-label="{{ field.label|trans|e('html_attr') }}" class="{{ is_searchable ? 'searchable' }} {{ field.property == sort_field_name ? 'sorted' }} text-{{ field.textAlign }} {{ field.cssClass }}" dir="{{ ea.i18n.textDirection }}" {% for name, value in field.htmlAttributes %}{{ name }}="{{ value|e('html_attr') }}" {% endfor %}>
+                            <td data-column="{{ field.property }}" data-label="{{ field.label|trans|e('html') }}" class="{{ is_searchable ? 'searchable' }} {{ field.property == sort_field_name ? 'sorted' }} text-{{ field.textAlign }} {{ field.cssClass }}" dir="{{ ea.i18n.textDirection }}" {% for name, value in field.htmlAttributes %}{{ name }}="{{ value|e('html_attr') }}" {% endfor %}>
                                 {{ include(field.templatePath, { field: field, entity: entity }, with_context = false) }}
                             </td>
                         {% endfor %}

templates/includes/_css_assets.html.twig

@@ -2,5 +2,5 @@
 {% for css_asset in assets %}
     {% set href = asset(css_asset.value, css_asset.packageName) %}
     <link rel="stylesheet" href="{{ (css_asset.preload ? ea_call_function_if_exists('preload', href, { as: 'style', nopush: css_asset.nopush }))|default(href) }}"
-    {%- for attr, value in css_asset.htmlAttributes %} {{ attr }}="{{ value|e('html_attr') }}"{% endfor %}>
+    {%- for attr, value in css_asset.htmlAttributes %} {{ attr }}="{{ value|e('html') }}"{% endfor %}>
 {% endfor %}

templates/includes/_js_assets.html.twig

@@ -2,5 +2,5 @@
 {% for js_asset in assets %}
     {% set src = asset(js_asset.value, js_asset.packageName) %}
     <script src="{{ (js_asset.preload ? ea_call_function_if_exists('preload', src, { as: 'script', nopush: js_asset.nopush }))|default(src) }}" {{ js_asset.async ? 'async' }} {{ js_asset.defer ? 'defer' }}
-    {%- for attr, value in js_asset.htmlAttributes %} {{ attr }}="{{ value|e('html_attr') }}"{% endfor %}></script>
+    {%- for attr, value in js_asset.htmlAttributes %} {{ attr }}="{{ value|e('html') }}"{% endfor %}></script>
 {% endfor %}

templates/layout.html.twig

@@ -350,7 +350,7 @@
 
                                                     {% block content_help %}
                                                         {% if has_help_message %}
-                                                            <a tabindex="0" class="content-header-help" data-bs-toggle="popover" data-bs-custom-class="ea-content-help-popover" data-bs-animation="true" data-bs-html="true" data-bs-placement="bottom" data-bs-trigger="focus" data-bs-content="{{ ea.crud.helpMessage|trans|e('html_attr') }}">
+                                                            <a tabindex="0" class="content-header-help" data-bs-toggle="popover" data-bs-custom-class="ea-content-help-popover" data-bs-animation="true" data-bs-html="true" data-bs-placement="bottom" data-bs-trigger="focus" data-bs-content="{{ ea.crud.helpMessage|trans|e('html') }}">
                                                                 <twig:ea:Icon name="internal:circle-info" />
                                                             </a>
                                                         {% endif %}

templates/menu.html.twig

@@ -37,7 +37,7 @@
 
 {% macro render_html_attributes(item) %}
     {% for attribute_name, attribute_value in item.htmlAttributes %}
-        {{ attribute_name }}="{{ attribute_value|e('html_attr') }}"
+        {{ attribute_name }}="{{ attribute_value|e('html') }}"
     {% endfor %}
 {% endmacro %}