경고 : 안전하지 않은 스타일 값 URL 삭제

경고 : 안전하지 않은 스타일 값 URL 삭제

---

Angular 2 앱의 구성 요소 템플릿에서 DIV의 배경 이미지를 설정하고 싶습니다. 그러나 콘솔에 다음 경고가 계속 표시되고 원하는 효과를 얻지 못합니다 ... Angular2의 보안 제한으로 인해 동적 CSS 배경 이미지가 차단되는지 또는 HTML 템플릿이 손상되었는지 확실하지 않습니다.

이것은 내 콘솔에 표시되는 경고입니다 (img URL을 /img/path/is/correct.png다음과 같이 변경했습니다 .

경고 : 안전하지 않은 스타일 값 URL 삭제 (SafeValue는 [property] = binding : /img/path/is/correct.png를 사용해야 함 ( http://g.co/ng/security#xss 참조 )) ( http : // 참조 ) g.co/ng/security#xss ).

문제는 DomSanitizationServiceAngular2를 사용하여 템플릿에 주입 된 내용을 삭제하는 것입니다 . 내 템플릿에있는 HTML은 다음과 같습니다.

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

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

다음은 구성 요소입니다 ...

Import {
    DomSanitizationService,
    SafeHtml,
    SafeUrl,
    SafeStyle
} from '@angular/platform-browser';

@Component({
               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;
                }

            }
        }
    }
}

예를 들어 [src] = "image"를 사용하여 템플릿에 바인딩 한 경우 다음과 같이하십시오.

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

및 image사용하여 전달 된 bypassSecurityTrustUrl모든 것이 잘 작동하는 것 같았다 ... 깡통 사람이 내가 잘못을하고있는 중이 야 무엇을보고?

---

전체 url문을 다음과 bypassSecurityTrustStyle같이 래핑해야 합니다 .

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

그리고

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

그렇지 않으면 유효한 스타일 속성으로 표시되지 않습니다.

---

선형 그라데이션이있는 배경 이미지 ( *ngFor)

전망:

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

수업:

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

---

이것을 사용하면 <div [ngStyle]="{'background-image':'url('+imageUrl+')'}"></div>문제가 해결되었습니다.

---

확인 이 Angular2 편리 파이프 : 사용법 :

1. 에 SafePipe코드 교체 DomSanitizationService와 함께DomSanitizer

2. SafePipe당신 의 경우를 제공 하십시오NgModule

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

---

Angular 7의 이미지 태그에 동적 URL을 추가하는 동안 동일한 문제가 발생했습니다. 많이 검색하여이 솔루션을 찾았습니다.

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 :)

---

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.

---

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.

---

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

constructor(
    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
  SCRIPT: 3
  URL: 4
  RESOURCE_URL: 5
}

참고URL : https://stackoverflow.com/questions/38593515/warning-sanitizing-unsafe-style-value-url