angular - Angular 2 中的原生元素

标签 angular typescript angular2-services

我最近在做一个项目,遇到了一条线

this.sendImageButton.nativeElement.disabled = true; 这对我来说似乎没问题,直到一位同事指出使用原生元素并不安全。他的意思是,像这样访问元素并不被认为是一个好的做法。我想知道为什么这样访问它不安全?另外,访问它的可能替代方案是什么?

到目前为止,我正在使用渲染器来访问它,但即使它包含一个 native 元素。它和上面提到的有什么不同?

this.renderer.setElementStyle(this.sendImageButton.nativeElement, '背景颜色', "蓝色");

希望尽快得到答复。预先非常感谢。 :)

最佳答案

访问或传递nativeElement并不是不安全,只是潜在不安全。这取决于你用它做什么。 如果用它来设置innerHTML ,那么你就绕过了 DomSantitizer例如,当您使用 <div [innerHTML]="someHtml" 时,Angular 会使用。因此,您的应用程序变得更容易遭受 XSS。可能还有其他人。

使用nativElement并不比单独使用浏览器更不安全,只是您使用它所做的事情决定了它是否会使您的应用程序更容易受到攻击。

如果您访问 nativeElement 的属性喜欢 nativeElement.style...nativeElement.className...您的应用程序将与服务器端渲染(通用)或 Angulars Web Worker 功能不兼容,因为当 Angular 代码在此类环境中运行时,这些属性将不可用。这也是Renderer2的原因或Renderer不提供任何从 DOM 读取信息的方法(仅更新 DOM)

关于angular - Angular 2 中的原生元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43993838/

相关文章:

angular - RxJS Observables 和构建过滤列表的正确方法

angular - 如何对 () => void 类型的变量进行单元测试

angular - 如何使用多个参数在angular5中发送POST?

typescript - Angular 2 - 共享服务的实现

typescript - 根据类属性缩小类型范围(来自 .filter、.find 等)

angular - 如何将表单控件添加到现有表单组 - angular2

javascript - 我的对象在数组中被覆盖

html - Angular - 添加类的 CSS 属性未显示

javascript - Angular2用javascript突出显示html字符串中的一些单词

Javascript/Typescript - 防止表单在提交时重置