경고: 안전하지 않은 스타일 값 배경색을 검사합니다.

경고: 안전하지 않은 스타일 값 배경색을 검사합니다.

Angular를 사용하여 Firebase에서 데이터를 가져옵니다.나는 사용자의 채팅 메시지가 사용자가 선택한 색상을 기반으로 하기를 원합니다.item.color파란색을 사용하는 사용자의 경우,WARNING: sanitizing unsafe style value background-color:blue (see http://g.co/ng/security#xss).

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

내 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")
  }

}

이 작업을 수행하려면 어떻게 해야 합니까?

저도 방금 같은 문제를 겪었습니다.이 발리제로 해결했습니다(Sape The Mape 덕분):

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

저는 더 깊게 하고 싶었고, 앵귤러 내의 스타일에 대한 좋은 기사를 찾았습니다: 동적 스타일과 바인딩 스타일에 대한 공식 문서입니다.

그것이 당신에게도 도움이 되길 바랍니다 :)

언급URL : https://stackoverflow.com/questions/48435113/warning-sanitizing-unsafe-style-value-background-color