绑定到 'style.grid' 会引发 'sanitizing unsafe style value' 警告

Question

我正在创建一种机制来定义和计算我自己的可重用网格。这是返回内容的示例

[left-bleed-start] 10.245000000001024px [left-bleed-end content-col-start] 1331.8500000001332px [content-col-end right-bleed-start] 10.245000000001024px [right-bleed-end]/[top-bleed-start] 10.245000000001024px [top-bleed-end link-row-start] 81.9600000000082px [content-row-end footer-row-start] 163.9200000000164px [footer-row-end bottom-bleed-start] 10.245000000001024px [bottom-bleed-end]

像这样应用时

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

我收到了消毒警告。但是，如果我像这样复制并粘贴值

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

一切正常。 css class 是我将显示定义为网格的地方，因为无论屏幕大小如何，它都会保持一致。我唯一能想到做的就是返回到函数中，并将 + ';' 添加到网格代码放在一起的末尾，这可能会抛出一些东西，但它仍然会给出相同的错误。我尝试应用 display: grid; 内联，看看它是否因为某些奇怪的原因从 css class 和内联读取是否有问题。

我正在使用 @HostListener 随着大小或方向的变化重新计算网格，到目前为止，我还没有运行遇到 Angular 的问题方式，所以我不明白从哪里开始弄清楚为什么会这样。下面是我如何设置我的组件 classes。

基地Class

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;
    }
}

辅助 class 用于应用程序组件/任何顶级容器

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();
    }
}

我不知道这对帮助找出解决方案有多重要，但我想我会展示事情的进展情况以防万一。有人知道为什么会出现此警告吗？

Answer 1

您需要实施消毒剂来清洁您的 css，或绕过它...

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

至于为什么，这个 blog explains it pretty well, as does the DomSanitizer 文档。

DomSanitizer helps preventing Cross Site Scripting Security bugs (XSS) by sanitizing values to be safe to use in the different DOM contexts.

绑定到 'style.grid' 会引发 'sanitizing unsafe style value' 警告

Binding to 'style.grid' throws 'sanitizing unsafe style value' warning

css

typescript

angular5

css-grid