web-dev-qa-db-fra.com

AVERTISSEMENT: désinfection de la couleur de fond de la valeur de style non sécurisée

En utilisant Angular, je récupère des données de Firebase. Je souhaite que les messages de clavardage de l'utilisateur soient basés sur une couleur que l'utilisateur choisit, item.color. Pour un utilisateur qui utilise le bleu, je reçois WARNING: sanitizing unsafe style value background-color:blue (see http://g.co/ng/security#xss).

Mon HTML:

<div *ngFor="let item of items; let i = index">
  <ion-card style="background-color:{{item.color}}" [ngClass]="{'me': item.sender == sender, 'notme': item.sender != sender}">
    <ion-card-header *ngIf="item.sender != sender">
      @{{item.sender}}
    </ion-card-header>
    <ion-card-content>
      {{item.message}}
    </ion-card-content>
  </ion-card>
</div>

Mon TS:

import { Component, OnInit, ViewChild } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database-deprecated';
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Observable';
import * as firebase from 'firebase/app';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'page-chat',
  templateUrl: 'chat.html'
})
export class ChatPage{

  @ViewChild(Content) content: Content;

  user: {};
  style;

  ionViewDidLoad(){
    firebase.auth().onAuthStateChanged((user)=> {
      this.user = user;
      console.log('authState',user);
      if (user) {
        var uid = user.uid;
        firebase.database().ref('/userprofile/' + uid + '/' + 'chatcolor').once('value').then((snapshot)=> {
          this.color = (snapshot.val());
        });
      }
    });
  }


  constructor(public af: AngularFireDatabase, private Svc: Service, private sanitizer: DomSanitizer) {
    this.style = sanitizer.bypassSecurityTrustStyle("blue")
  }

}

Que dois-je faire pour pouvoir faire cela?

angulartypescriptxss
17
cfoster5

Je viens d'avoir le même problème. Je l'ai résolu avec cette balise (Merci à Sape The Mape):

[ngStyle]="{'background-color': item.color}"

Je voulais approfondir, et j'ai trouvé cet article sympa sur le style dans Angular: styles dynamiques et cette documentation officielle sur style de reliure

J'espère que cela vous aide aussi :)

24
Neamesis