css - 绑定(bind)到 '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>

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

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

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

我正在使用 @HostListener 随着大小或方向的变化重新计算网格，到目前为止，我还没有遇到以这种方式运行 Angular 的问题，所以我不这样做了解从哪里开始弄清楚为什么会发生这种情况。以下是我设置组件类的方法。

基类

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

应用程序组件/任何顶级容器的辅助类

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

应用程序组件

@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很好地解释了这一点，DomSanitizer 也是如此。文档。

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