css - 'style.grid' öğesine bağlanmak 'güvensiz stil değeri temizleniyor' uyarısı veriyor

Kendi yeniden kullanılabilir ızgaralarımı tanımlamak ve hesaplamak için bir mekanizma oluşturuyorum. İşte döndürülen bir örnek

[sol-kasının-başı] 10.245000000001024px [sol-kasının-sonu içerik-sütunu-başı] 1331.8500000001332px [içerik-sütunu-sonu sağ-kasma-başı] 10.245000000001024px [sağ-kasma-sonu]/[üst-kasma-başı] 10.245000000001024px [üst-kasma-sonu bağlantı-satırı-başı] 81.9600000000082px [içerik-satırı-sonu altbilgi-satırı-başı] 163.9200000000164px [altbilgi-satırı-sonu alt-kasma-başı] 10.245000000001024px [alt-kasma-sonu]

Bunu böyle uyguladığınızda

<div class="appCompGrid" [style.grid]="Grid.GridCode"></div>

Temizleme uyarısını alıyorum. Ancak değeri böyle kopyalayıp yapıştırırsam

<div class="appCompGrid" style="grid: (same code);"></div>

her şey çalışıyor. CSS sınıfı, ekranın boyutu ne olursa olsun tutarlı olacağını görerek, görüntüyü grid olarak tanımladığım yer. Düşünebildiğim tek şey, fonksiyona geri dönüp grid kodunun bir araya getirildiği yere + ';' eklemekti, belki bu bir şeyi bozuyordur diye ama hâlâ aynı hatayı veriyor. Belki garip bir nedenden dolayı hem bir CSS sınıfından hem de inline olarak okurken bir sorun olabilir diye display: grid; öğesini inline olarak uygulamayı da denedim.

Boyut veya yön değiştikçe grid'i yeniden hesaplamak için @HostListener kullanıyorum, şu ana kadar Angular'ın bu şekilde çalışmasıyla ilgili bir sorunla karşılaşmadım, bu yüzden bunun neden olduğunu anlamaya nereden başlayacağımı bilmiyorum. İşte bileşen sınıflarımı nasıl ayarladığım.

Temel Sınıf

export class GridBuilder {
    Settings : GridInit        = new GridInit();
    GridData : Array<GridType> = new Array();
    Grid     : GridOutput      = new GridOutput();


    constructor() { this.GridData = GridDefs; }

    public buildGrid() {
        const coreSettings : GridInit   = this.Settings;
        const gridData     : GridType[] = this.GridData;

        const w: number     = multiply( coreSettings.Size.Width,  coreSettings.Size.PixelRatio );
        const h: number     = multiply( coreSettings.Size.Height, coreSettings.Size.PixelRatio );
        const o: string     = checkOrientation( w, h );
        const c: CellSpecs  = calcCell( o, w );
        const t: GridType   = gridData.find( a => a.GridName == coreSettings.GridStyle );

        const cols: string  = calcArea( t.Columns, c );
        const rows: string  = calcArea( t.Rows, c );

        this.Grid.GridCode  = cols + '/' + rows + ';';
        this.Grid.GridAreas = t.Areas;
    }
}

Uygulama bileşeni/ herhangi bir üst düzey konteyner için ikincil sınıf

export class SiteGrid extends GridBuilder {

    constructor(){
        super();
        this.applySizeSettings();
    }

    applySizeSettings(){
        this.Settings.Size.Width       = window.innerWidth;
        this.Settings.Size.Height      = window.innerHeight;
        this.Settings.Size.PixelRatio  = window.devicePixelRatio;
    }
}

AppComponent

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent extends SiteGrid {
    title = 'app';

    @HostListener( 'window: resize', [ '$event' ] )onResize( event ){ this.applySizeSettings(); this.buildGrid(); }

    constructor(){
        super();
        this.Settings.GridStyle = 'SiteGridA';
        this.buildGrid();
    }
}

Çözümü bulmaya yardımcı olma açısından bunun ne kadar ilgili olduğunu bilmiyorum ama işlerin nasıl ilerlediğini göstermek istedim, yalnızca ihtimal olsun diye. Bu uyarının neden meydana geldiğini bilen var mı?

Cevap #1

CSS'inizi temizlemek için bir temizleyici uygulamanız veya onu atlatmanız gerekir...

constructor(private sanitizer: DomSanitizer) {
    this.sanitizedCSS = sanitizer.bypassSecurityTrustStyle(Grid.GridCode) ;
  }

Nedenine gelince, bu blog bunu oldukça iyi açıklıyor, DomSanitizer belgeleri de öyle.

DomSanitizer, farklı DOM bağlamlarında güvenli bir şekilde kullanılacak değerleri temizleyerek Cross Site Scripting (XSS) güvenlik hatalarını önlemeye yardımcı olur.