为什么Angular要在app-root html标签中添加ng-version属性

Question

今天，我注意到 Angular 在应用程序根目录中添加了其版本信息，如下所示：

<app-root _nghost-c0="" ng-version="5.2.0">

即使我在生产环境中构建，它似乎也存在。我不知道在那里添加这些信息的主要目标是什么？公开显示角度版本不是一个安全问题吗？谢谢

Answer 1

这是一个老问题，但仍然相关，并且接受的答案可能会产生误导。 根据 Miško Hevery 的说法：“这是故意的，这样占卜之类的工具就可以检测到它是一个有角度的页面，并可以提供有用的 UI。”

这本身不是一个安全问题，但隐藏它也不是“默默无闻的安全”，因为这意味着这就是您采取的所有安全措施。 事实上，使用模糊性是一种很好的做法，因为它使攻击者更难收集信息（侦察），但绝不能单独依赖于此。

Answer 2

Angular 使用此属性来标记用于引导应用程序的元素。

另请参阅https://github.com/angular/angular/commit/a4de214e2be5048f1261d043cc467a5ecaa5c909

隐藏它只能是默默无闻的安全，而不是安全。

Answer 3

转到根组件并添加这段代码以删除

ng-version

属性：

@Component({
    selector: '[data-app]',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    constructor(private _elementRef: ElementRef) {
    }

    ngOnInit(): void {
        this._elementRef.nativeElement.removeAttribute("ng-version");
    }
}

Answer 4

ng-version

属性由Angular DevTools扩展使用来检测Angular应用程序并识别版本号。如果您打算在开发服务器中使用 DevTools，则不得删除

ng-version

属性。

如果您只想在生产中删除版本号，出于其他答案中提到的原因，您可以使用以下代码片段：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  private readonly elementRef = inject(ElementRef);

  ngOnInit(): void {
    if (!isDevMode()) {
      this.elementRef.nativeElement.removeAttribute("ng-version");
    }
  }
}