Skip to main content

no-restricted-attr

Disallow specific attributes, or specific attribute/value combinations, that your project's rules forbid — independent of the HTML specification. Unlike no-unknown-attr, no-disallowed-attr, and no-invalid-attr-value, this rule does no spec validation at all; it only enforces the disallowAttrs you configure.

This rule has no default behavior — configure disallowAttrs to use it.

❌ Examples of incorrect code for this rule

<div x-attr></div>

✅ Examples of correct code for this rule

<div></div>

Interface​

{
  "no-restricted-attr": boolean
}

Options​

{
  "no-restricted-attr": {
    "options": {
      "disallowAttrs"?: (string | Attr)[] | Record&lt;string, AttributeType | Pattern&gt;
    }
  }
}
type Attr = {
  name: string;
  value: AttributeType | Pattern;
}

type Pattern = { pattern: string; };

AttributeType is The type API. Pattern is also part of the type API.

PropertyTypeDefault ValueDescription
disallowAttrs(string | Attr)[] | Record<string, AttributeType | Pattern>undefinedSpecify the attributes to disallow. Even if they are allowed in the HTML Standard, you can use this option to intentionally prohibit them based on your project's rules. You can specify the attribute name only, or a value pattern/type so the attribute is disallowed only when its value matches.

Default Severity​

error

Details​

Setting disallowAttrs option​

The array can contain elements of both string and object types.

For strings, you can specify disallowed attribute names outright. In the case of Objects, they should have both name and value properties, allowing you to disallow the attribute only when its value matches.

{
  "no-restricted-attr": {
    "options": {
      "disallowAttrs": [
        // Disallow `x-attr` attribute.
        "x-attr",

        // Disallow `x-attr2` attribute when the value is an integer.
        // If the value is not an integer, the attribute itself is allowed.
        {
          "name": "x-attr2",
          "value": "Int"
        },

        // Disallow `x-attr3` attribute when the value is "apple" or "orange".
        // If the value is not "apple" and "orange", the attribute itself is allowed.
        {
          "name": "x-attr3",
          "value": {
            "enum": ["apple", "orange"]
          }
        },

        // Disallow `x-attr4` attribute when the value matches the pattern.
        // If the value doesn't match the pattern, the attribute itself is allowed.
        {
          "name": "x-attr4",
          "value": {
            "pattern": "/^[a-z]+$/"
          }
        }
      ]
    }
  }
}

You can use the types defined in The types API for the value property. Additionally, you can specify an enum property to limit the disallowed values or use the pattern property to define a pattern for the values using regular expressions.

caution

In case of duplicate attribute names within the array, the one specified later will take precedence.

Configuration Example​

Restricting accesskey project-wide​

{
  "rules": {
    "my-project/no-accesskey": {
      "rules": {
        "no-restricted-attr": {
          "options": {
            "disallowAttrs": ["accesskey"]
          }
        }
      }
    }
  }
}