メインコンテンツまでスキップ

no-restricted-attr

HTML仕様とは無関係に、プロジェクトのルールで禁止する特定の属性や属性値の組み合わせを禁止します。no-unknown-attr、no-disallowed-attr、no-invalid-attr-valueとは異なり、このルールは仕様検証を一切行わず、設定したdisallowAttrsのみを検査します。

このルールにはデフォルトの動作がありません。使用するにはdisallowAttrsを設定してください。

❌ 間違ったコード例

<div x-attr></div>

✅ 正しいコード例

<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はタイプAPIを参照してください。PatternもタイプAPIの一部です。

PropertyTypeDefault ValueDescription
disallowAttrs(string | Attr)[] | Record<string, AttributeType | Pattern>undefined許可しない属性を指定します。HTML標準で許可されていたとしても、あえてプロジェクトのルールで禁止するような場合に利用します。属性名だけの指定もできますし、値のパターンや型を指定して、その値に一致する場合だけ禁止することもできます。

Default Severity​

error

詳細​

disallowAttrsオプションの設定​

配列には文字列とオブジェクトの両方の要素を含めることができます。

文字列の場合は禁止する属性名をそのまま指定できます。オブジェクトの場合はnameとvalueの両方のプロパティを持つ必要があり、値が一致する場合にのみ属性を禁止できます。

{
  "no-restricted-attr": {
    "options": {
      "disallowAttrs": [
        // `x-attr`属性を禁止
        "x-attr",

        // 値が整数の場合、`x-attr2`属性を禁止
        // 値が整数でない場合、属性自体は許可される
        {
          "name": "x-attr2",
          "value": "Int"
        },

        // 値が"apple"または"orange"の場合、`x-attr3`属性を禁止
        // 値が"apple"と"orange"でない場合、属性自体は許可される
        {
          "name": "x-attr3",
          "value": {
            "enum": ["apple", "orange"]
          }
        },

        // 値がパターンに一致する場合、`x-attr4`属性を禁止
        // 値がパターンに一致しない場合、属性自体は許可される
        {
          "name": "x-attr4",
          "value": {
            "pattern": "/^[a-z]+$/"
          }
        }
      ]
    }
  }
}

valueプロパティにはタイプAPIで定義されている型を使用できます。また、enumプロパティで禁止する値を制限したり、patternプロパティで正規表現によるパターンを定義したりすることもできます。

注意

配列内で属性名が重複する場合、後に指定したものが優先されます。

設定例​

プロジェクト全体でaccesskeyを制限する​

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