WARNING: sanitizing unsafe style value url


Typescript Problem Overview

I want to set the background image of a DIV in a Component Template in my Angular 2 app. However I keep getting the following warning in my console and I don't get the desired effect... I am unsure if the dynamic CSS background image is being blocked due to security restrictions in Angular2 or if my HTML template is broken.

This is the warning I see in my console (I have changed my img url to /img/path/is/correct.png :

> WARNING: sanitizing unsafe style value url(SafeValue must use [property]=binding: /img/path/is/correct.png (see http://g.co/ng/security#xss)) (see http://g.co/ng/security#xss).

The thing is I do sanitize what is injected into my template using the DomSanitizationService in Angular2. Here is my HTML that I have in my template:

        <div class="header"
             [style.background-image]="'url(' + image + ')'">

        <div class="zone">
                    <h1 [innerHTML]="header"></h1>
                <div class="zone__content">
                       *ngFor="let contentSegment of content"

Here is the component...

Import {
} from '@angular/platform-browser';

               selector: 'example',
               templateUrl: 'src/content/example.component.html'
export class CardComponent implements OnChanges {

    public header:SafeHtml;
    public content:SafeHtml[];
    public image:SafeStyle;
    public isActive:boolean;
    public isExtended:boolean;

    constructor(private sanitization:DomSanitizationService) {

    ngOnChanges():void {
        map(this.element, this);

        function map(element:Card, instance:CardComponent):void {
            if (element) {
                instance.header = instance.sanitization.bypassSecurityTrustHtml(element.header);

                instance.content = _.map(instance.element.content, (input:string):SafeHtml => {
                    return instance.sanitization.bypassSecurityTrustHtml(input);

                if (element.image) {
                    /* Here is the problem... I have also used bypassSecurityTrustUrl */ 
                    instance.image = instance.sanitization.bypassSecurityTrustStyle(element.image);
                } else {
                    instance.image = null;


Please note that when I just bound to the template using [src]="image", for example:

<div *ngIf="image">
    <img [src]="image">

and image was passed using bypassSecurityTrustUrl everything seemed to work well... can anyone see what I am doing wrong?

Typescript Solutions

Solution 1 - Typescript

You have to wrap the entire url statement in the bypassSecurityTrustStyle:

<div class="header" *ngIf="image" [style.background-image]="image"></div>

And have

this.image = this.sanitization.bypassSecurityTrustStyle(`url(${element.image})`);

Otherwise it is not seen as a valid style property

Solution 2 - Typescript

Use this <div [ngStyle]="{'background-image':'url('+imageUrl+')'}"></div> this solved the problem for me.

Solution 3 - Typescript

If background image with linear-gradient (*ngFor)


<div [style.background-image]="getBackground(trendingEntity.img)" class="trending-content">


import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';

constructor(private _sanitizer: DomSanitizer) {}

getBackground(image) {
    return this._sanitizer.bypassSecurityTrustStyle(`linear-gradient(rgba(29, 29, 29, 0), rgba(16, 16, 23, 0.5)), url(${image})`);

Solution 4 - Typescript

I got the same issue while adding dynamic url in Image tag in Angular 7. I searched a lot and found this solution.

First, write below code in the component file.

constructor(private sanitizer: DomSanitizer) {}
public getSantizeUrl(url : string) {
    return this.sanitizer.bypassSecurityTrustUrl(url);

Now in your html image tag, you can write like this.

<img class="image-holder" [src]=getSantizeUrl(item.imageUrl) />

You can write as per your requirement instead of item.imageUrl

I got a reference from this site.dynamic urls. Hope this solution will help you :)

Solution 5 - Typescript

Check this handy pipe for Angular2: Usage:

  1. in the SafePipe code, substitute DomSanitizationService with DomSanitizer

  2. provide the SafePipe if your NgModule

  3. <div [style.background-image]="'url(' + your_property + ')' | safe: 'style'"></div>

Solution 6 - Typescript

Based on the docs at https://angular.io/api/platform-browser/DomSanitizer, the right way to do this seems to be to use sanitize. At least in Angular 7 (don't know if this changed from before). This worked for me:

import { Component, OnInit, Input, SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

    private sanitizer: DomSanitizer
) { }

this.sanitizer.sanitize(SecurityContext.STYLE, 'url(' + this.image + ')');

Re SecurityContext, see https://angular.io/api/core/SecurityContext. Basically it's just this enum:

enum SecurityContext {
  NONE: 0
  HTML: 1
  STYLE: 2
  URL: 4

Solution 7 - Typescript

There is an open issue to only print this warning if there was actually something sanitized: https://github.com/angular/angular/pull/10272

I didn't read in detail when this warning is printed when nothing was sanitized.

Solution 8 - Typescript

In my case, I got the image URL before getting to the display component and want to use it as the background image so to use that URL I have to tell Angular that it's safe and can be used.

In .ts file

userImage: SafeStyle;
    this.userImage = this.sanitizer.bypassSecurityTrustStyle('url(' + sessionStorage.getItem("IMAGE") + ')');

In .html file

<div mat-card-avatar class="nav-header-image" [style.background-image]="userImage"></div>

Solution 9 - Typescript

For anyone who is already doing what the warning suggests you do, before the upgrade to Angular 5, I had to map my SafeStyle types to string before using them in the templates. After Angular 5, this is no longer the case. I had to change my models to have an image: SafeStyle instead of image: string. I was already using the [style.background-image] property binding and bypassing security on the whole url.

Hope this helps someone.

Solution 10 - Typescript

In my case, I needed the functionality of sanitizing in more than one component. Implementing a pipe was the most suitable and elegant way for solving this problem.


  name: 'sanitizer'
export class SanitizerPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) {}

  transform(value: any, args?: any): any {
    return this.sanitizer.bypassSecurityTrustUrl(value);

Using the pipe:

<img [src]="pictureSrc | sanitizer" alt="selected picture">


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMark SandmanView Question on Stackoverflow
Solution 1 - TypescriptPoul KruijtView Answer on Stackoverflow
Solution 2 - TypescriptiRedia EbikadeView Answer on Stackoverflow
Solution 3 - TypescriptSwapnil PatwaView Answer on Stackoverflow
Solution 4 - TypescriptArjunView Answer on Stackoverflow
Solution 5 - TypescriptSimoneMSRView Answer on Stackoverflow
Solution 6 - TypescriptDovev HefetzView Answer on Stackoverflow
Solution 7 - TypescriptGünter ZöchbauerView Answer on Stackoverflow
Solution 8 - TypescriptSantosh PisiniView Answer on Stackoverflow
Solution 9 - TypescriptJake SmithView Answer on Stackoverflow
Solution 10 - TypescriptteranshilView Answer on Stackoverflow