Angular 2 安全绕过规则应该放在哪个组件中？答案

【问题标题】：Which Component Should the Angular 2 Security Bypass rule be placed in?Angular 2 安全绕过规则应该放在哪个组件中？
【发布时间】：2017-06-12 16:58:51
【问题描述】：

我对 Angular 2 还很陌生，我正在尝试展示一堆专辑封面。图像的路径由服务器作为专辑对象的一部分返回。我遇到了通常的消毒问题。

我在这里阅读了解决方案：Angular 2, 2.0.0-rc.2, Cannot apply inline css3 transform with style directive

这里：Angular2 - WARNING: sanitizing unsafe style value url(SafeValue must use [property]=binding:

这里：https://angular.io/docs/ts/latest/guide/security.html#!#bypass-security-apis

但是，由于在这两种情况下都没有提及整个项目结构，所以我在确定在哪里（哪个文件？）以及应该如何添加绕过安全规则时遇到了一些麻烦。我尝试了所有我能想到的可能性，但它们都抛出了错误。从逻辑上讲，它应该被添加到生成模板的组件中，但是它可能无法直接访问 Album 对象。

代码库是通过遵循www.angular.io 的教程并进行必要的更改而形成的。

项目结构：

project 
| index.html
| style.css
|--app 
   | main.ts 
   | app.component.ts 
   | app.component.spec.ts
   | app.module.ts 
   | app.routing.module.ts 
   | albums.component.ts 
   | album-dashboard.component.ts 
   | album.service.ts 
   | album.ts
   | album-detail.component.ts 
   | dashboard.component.html
   | album.component.html 
   | album.detail.component.html

相关的 HTML 和 TS 文件如下。如果上面的任何其他文件与问题相关，我很乐意更新

dashboard.component.html：显示相册的 html。请不要建议使用某些信息会位于顶部，并且通常更难处理实际的 imgs。我知道 style = "..." 不是正确的语法，将其更改为线程中显示的内容会产生很多我无法追溯的错误

<div class="grid grid-pad">
  <a *ngFor="let album of albums"  [routerLink]="['/detail', album.id]"  class="col-1-4">
  <div class="module album" style="background-image: url('{{album.path}}');">
      <!-- <h4>{{album.name}}</h4> -->
  </div>
  </a>
</div>

专辑.ts

export class Album {
  id: number;
  name: string;
  artist: string;
  path: string;
}

album-dashboard.component.ts：请注意这是专辑集合的组件。作为一个附带问题，我上面链接的线程要么添加静态规则，要么为当前实例动态添加规则，这是否意味着我必须遍历集合中的每个实例并一个一个地添加它们？

import { Component, OnInit } from '@angular/core';

import { Album } from './album';
import { AlbumService } from './album.service';

@Component({
  moduleId: module.id,
  selector: 'album-dashboard',
  templateUrl: 'dashboard.component.html',
  styleUrls: [ 'dashboard.component.css' ]
})
export class DashboardComponent implements OnInit {

  albums: Album[] = [];

  constructor(private albumService: AlbumService) { };


  ngOnInit(): void {
    this.albumService.getAlbums()
      .then(albums => this.albums = albums);//.slice(1, 4)); 
  }
 }

app.component.ts

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'my-app',
  template: `
    <nav>
      <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
      <a routerLink="/albums" routerLinkActive="active">Albums</a>
    </nav>
    <router-outlet></router-outlet>
  `,
  styleUrls: ['app.component.css'],
})
export class AppComponent {
  title = 'Production Crew';
}

感谢任何帮助！

【问题讨论】：

标签： html angular typescript

【解决方案1】：

已修复。对于任何有类似问题的人，

请看：Angular2 dynamic background images

和：In RC.1 some styles can't be added using binding syntax

原来 style.background-image 已被列入针对 xss 攻击的“黑名单”，但 style.background 和 ngStyle 属性将起作用。

我没有解释为什么这两个提供相同的结果，但还没有被认为不安全。如果我能得到解释会更新

【讨论】：