能否向Custom Element传递不可被检查的私密属性或参数？

下面是几种可实现私密参数传入、且不会暴露到元素公共属性/property的方案：

• 方案一：ES原生私有字段 + 工厂函数封装（最高安全级别）
  ES 2022 引入的#开头类私有字段是语言层面的真私有，外部无法通过属性遍历、Object.getOwnPropertyDescriptor等任何常规方式读取，你可以通过不暴露组件类、仅对外暴露工厂函数的方式完成参数传入：

// 组件内部作用域，类本身不对外暴露
class SecureElement extends HTMLElement {
  #secret; // 真私有字段，仅类内部可访问
  connectedCallback() {
    // 内部直接使用#secret发起请求，不会暴露到实例公共属性
    fetch('/api/protected', {
      headers: { Authorization: `Bearer ${this.#secret}` }
    })
  }
}

// 对外暴露的唯一实例创建方法
export function createSecureElement(secret) {
  const el = new SecureElement();
  el.#secret = secret;
  return el;
}
// 若需要支持非模块化环境，可挂载到全局
window.createSecureElement = createSecureElement;

用户使用时直接调用工厂方法创建实例再插入DOM即可，所有主流前端框架都支持插入手动创建的DOM元素，不存在适配问题。

• 方案二：闭包 + WeakMap 存储（兼容旧环境）
  如果需要兼容不支持ES私有字段的运行环境，可以用闭包内的WeakMap存储私密数据，WeakMap本身不对外暴露的前提下，外部完全无法读取对应值：

// 闭包内部的WeakMap，永远不对外暴露
const secretStore = new WeakMap();

class SecureElement extends HTMLElement {
  connectedCallback() {
    const secret = secretStore.get(this);
    // 后续业务逻辑
  }
}
customElements.define('secure-element', SecureElement);

// 对外暴露的参数绑定方法
export function bindSecretToElement(el, secret) {
  secretStore.set(el, secret);
}

该方案下私密数据完全不会挂载到元素实例上，也就不存在被作为property检查到的可能。

• 方案三：声明式属性自动擦除（适配必须写HTML标签的场景）
  如果你的使用场景必须支持直接通过HTML标签声明组件，可以采用属性赋值后立即擦除的方式降低暴露风险：

class SecureElement extends HTMLElement {
  #secret;
  static get observedAttributes() {
    return ['secret'];
  }
  attributeChangedCallback(name, _, newVal) {
    if (name === 'secret' && newVal) {
      this.#secret = newVal;
      // 立刻删除DOM属性，不在HTML结构上留痕
      this.removeAttribute('secret');
    }
  }
}
customElements.define('secure-element', SecureElement);

注意：该方案存在毫秒级的属性暴露窗口，在属性被解析到删除的间隙，外部可通过DOM API读取到属性值，仅适合安全要求较低的场景。

如果需要适配上层全局状态传参，你可以直接约定全局取值入口，比如要求上层应用在window下挂载getCurrentUserToken方法，组件内部挂载时直接调用该方法取值，完全不需要经过元素属性/property传递参数，私密性更高。

以上方案都可以实现私密参数不会作为元素的属性或property被常规方式检查到，需要注意的是客户端运行的代码不存在绝对安全，极端情况下攻击者依然可以通过断点调试等方式拿到敏感值，这是前端运行环境的固有特性。

内容的提问来源于stack exchange，提问作者Kevin H.