Linter Rule: Disallow ERB output in attribute names

Rule: erb-no-output-in-attribute-name

Description

ERB output tags (<%= %>) are not allowed in HTML attribute names. Use static attribute names with dynamic values instead.

Rationale

ERB output in attribute names (e.g., <div data-<%= key %>="value">) allows dynamic control over which attributes are rendered. When such a value is user-controlled, an attacker can inject arbitrary attributes including JavaScript event handlers, achieving cross-site scripting (XSS).

Examples

Good

<div class="<%= css_class %>"></div>

<input type="text" data-target="value">
Add an `autocomplete` attribute to improve form accessibility. Use a specific value (e.g., `autocomplete="email"`), `autocomplete="on"` for defaults, or `autocomplete="off"` to disable. (html-input-require-autocomplete)

Bad

<div data-<%= key %>="value"></div>
Avoid ERB output in attribute names. Use static attribute names with dynamic values instead. (erb-no-output-in-attribute-name)

<div data-<%= key1 %>="value1" data-<%= key2 %>="value2"></div>
Avoid ERB output in attribute names. Use static attribute names with dynamic values instead. (erb-no-output-in-attribute-name)
Avoid ERB output in attribute names. Use static attribute names with dynamic values instead. (erb-no-output-in-attribute-name)

References

• Shopify/erb_lint: ErbSafety
• Shopify/better_html