Question

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

我在这里阅读了解决方案：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 =＆＃34; ...＆＃34;是不正确的语法，将其更改为线程中显示的内容会产生很多错误我无法追溯

<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>

album.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';
}

任何帮助表示赞赏！

Answer 1

固定。对于有类似问题的人，

请参阅：Angular2 dynamic background images

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

结果是style.background-image已经针对xss攻击进行了“黑名单”，但是style.background和ngStyle属性可以正常工作。

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

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

1 个答案: