Incorporating Angular, I am retrieving data from Firebase to enable user chat messages to display in a color chosen by the user, specifically using item.color. However, encountering an issue where for a user who selects blue as their color, a warning message appears:
WARNING: sanitizing unsafe style value background-color:blue (see http://g.co/ng/security#xss).Here is the code snippet for my 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>
Additionally, here is a snippet from my TypeScript:
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")
}
}
How can I resolve this issue and successfully implement user-selected chat message colors?