如何解决ESLint的security/detect-object-injection错误且不禁用ESLint

错误原因 #

security/detect-object-injection规则的核心是防范对象注入攻击：当你使用动态变量作为对象键访问属性时，ESLint会默认认为存在风险——比如变量被篡改后，可能意外访问到对象原型链上的属性（如__proto__、constructor），引发安全问题或异常行为。

即便你用TypeScript的CardName类型做了约束，ESLint的这个规则可能无法识别类型检查的保障，依然会触发警告。

解决方法 #

方法1：先校验键的合法性 #

在访问对象属性前，先确认传入的cardName是mappedCards的合法键，ESLint会识别到这个安全校验，不再报错：

const getMappedCard = (cardName: CardName) => {
  const mappedCards = {
    Mastercard: <Mastercard />,
    Visa: <Visa />,
    Hiper: <Hiper />,
    Amex: <Amex />,
    Hipercard: <Hipercard />,
    Elo: <Elo />,
    Jcb: <Jcb />,
    Diners: <Diners />,
  };

  if (Object.keys(mappedCards).includes(cardName)) {
    return mappedCards[cardName as keyof typeof mappedCards] ?? <div>erro</div>;
  }
  return <div>erro</div>;
};

这里的类型断言as keyof typeof mappedCards是让TypeScript明确cardName属于合法键集合，避免类型报错。

方法2：用Map替代普通对象 #

Map的键值对机制不会涉及原型链访问，ESLint的security/detect-object-injection规则不会对Map的get方法触发警告：

const getMappedCard = (cardName: CardName) => {
  const mappedCards = new Map([
    ['Mastercard', <Mastercard />],
    ['Visa', <Visa />],
    ['Hiper', <Hiper />],
    ['Amex', <Amex />],
    ['Hipercard', <Hipercard />],
    ['Elo', <Elo />],
    ['Jcb', <Jcb />],
    ['Diners', <Diners />],
  ]);

  return mappedCards.get(cardName) ?? <div>erro</div>;
};

方法3：显式绑定键类型（结合校验更稳妥） #

如果你的CardName类型本来就是mappedCards的键集合，可直接在函数参数里显式声明类型，再配合存在性校验，同时满足TypeScript类型检查和ESLint安全规则：

const getMappedCard = (cardName: keyof typeof mappedCards) => {
  const mappedCards = {
    Mastercard: <Mastercard />,
    Visa: <Visa />,
    Hiper: <Hiper />,
    Amex: <Amex />,
    Hipercard: <Hipercard />,
    Elo: <Elo />,
    Jcb: <Jcb />,
    Diners: <Diners />,
  };

  return Object.prototype.hasOwnProperty.call(mappedCards, cardName) 
    ? mappedCards[cardName] 
    : <div>erro</div>;
};

用hasOwnProperty校验能更精准地判断属性是否属于对象自身，避免原型链属性的干扰。

内容的提问来源于stack exchange，提问作者Alysson