使用Renderer2与ElementRef访问原生元素在安全层面是否存在差异？

问题相关代码 #

SomeDirective implements OnInit{
  constructor(
    elementRef : ElementRef,
    renderer : Renderer2){}

 ngOnInit(){
  // 方法1
  const el1 = this.elementRef.nativeElement;
  // 方法2
  const el2 = this.renderer.getRootElement(this.elementRef.nativeElement , true);
  // 后续使用示例
  (el1 || el2).scrollIntoView()
}

结论 #

从安全角度出发，两种获取原生元素的方式没有本质区别，对应的安全风险完全一致。

具体说明 #

• 安全风险的核心来源：两种方式最终拿到的都是原生DOM对象，只要你直接操作原生DOM对象，就等于绕过了Angular内置的安全防护逻辑。如果后续你通过这些对象插入不受信任的HTML内容、绑定未知来源的事件处理函数等，都会有XSS攻击风险，风险高低和你获取元素的方式没有关联。
• 两种方法仅存在功能差异，无安全层面的区别：
  • 方法1的this.elementRef.nativeElement直接返回当前指令绑定的宿主DOM元素本身，没有额外处理逻辑。
  • 方法2的renderer.getRootElement第二个参数传true时，会返回传入元素所在的根DOM节点，如果传入的元素本身就是根节点，就直接返回元素本身。如果你的指令没有挂载在影子DOM等特殊节点内部，这个示例里的el2和el1大概率是同一个对象。
• 安全最佳实践：Angular官方不推荐直接操作原生DOM对象，不管你用哪种方式获取。如果需要修改元素属性、样式、内容等，优先使用Renderer2提供的封装API，比如setAttribute、addStyle、setProperty等，这些API的操作会经过Angular安全层的校验，能大幅降低XSS风险。

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