Which Component Should the Angular 2 Security Bypass rule be placed in? - html

Question

I am pretty new to Angular 2 and I am trying to display bunch of album covers. The path to images are returned by the server as a part of an Album object. I ran into the usual sanitizing issue.
I read about the solution here: Angular 2, 2.0.0-rc.2, Cannot apply inline css3 transform with style directive
here: Angular2 - WARNING: sanitizing unsafe style value url(SafeValue must use [property]=binding:
and here: https://angular.io/docs/ts/latest/guide/security.html#!#bypass-security-apis
However since the overall project structure is not mentioned in either of these cases, I am having a little bit of trouble figuring out where (which file?) and how I should be adding the bypass security rule. I tried every possibility I could think of but all of them throws an error. Logically, it should be added to the component generating the template, however it might be that it doesn't have direct access to the Album object.
The code base was formed by following the tutorial at www.angular.io and making the necessary changes.
Project Structure:
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
Relevant HTML and TS files are below. If any other file from above is relevant to the question I would be happy to update
dashboard.component.html: The html where the albums are being displayed. Please don't suggest using some information is gonna sit on the top and usually that is harder to deal with actual imgs. I am aware style = "..." is not the correct syntax, changing it to what is shown in the threads create a lot of errors I wasn't able to trace back
<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: Please notice that this is a component for a collection of album. As a side question the Threads I have linked to above either add a static rule or dynamically add a rule for the current instance, does this imply I have to iterate through each instance in the collection and add them one by one ?
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';
}
Any help is appreciated!

Answer 1

Fixed. For anyone having similar issues,
please see: Angular2 dynamic background images
and: In RC.1 some styles can't be added using binding syntax
Turns out style.background-image has been 'black-listed' against xss attacks however style.background and ngStyle properties will work.
I don't have an explanation on why these two provide the same result but are not considered not secure yet. Will update if I can get an explanation