source

RC.1에서는 바인딩 구문을 사용하여 일부 스타일을 추가할 수 없습니다.

manycodes 2023. 9. 3. 16:23
반응형

RC.1에서는 바인딩 구문을 사용하여 일부 스타일을 추가할 수 없습니다.

스타일:

<div [style.background-image]="\'url(\' + image + \')\'">Background</div>
<div [style.transform]="rotate(7deg)"

더 이상 추가되지 않음

업데이트(2.0.0 최종)

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'safeHtml'})
export class SafeHtml implements PipeTransform {
  constructor(private sanitizer:DomSanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustStyle(html);
    // return this.sanitizer.bypassSecurityTrustHtml(html);
    // return this.sanitizer.bypassSecurityTrustScript(html);
    // return this.sanitizer.bypassSecurityTrustUrl(html);
    // return this.sanitizer.bypassSecurityTrustResourceUrl(html);
  }
}

https://angular.io/api/platform-browser/DomSanitizer 도 참조하십시오.

<div [innerHTML]="someHtml | safeHtml"

갱신하다

DomSanitizationService로 이름이 변경됩니다.DomSanitizerRC.6에서

원래의

이것은 RC.2에서 수정되어야 합니다.

Angular2 개발자 가이드 - 보안을 참조


Angular2는 CSS 값과 같은 속성 바인딩을 도입했습니다.[innerHTML]=...그리고.[src]="..."RC.1에서

https://github.com/angular/angular/issues/8491#issuecomment-217467582 도 참조하십시오.

다음을 사용하여 값을 신뢰할 수 있음DomSanitizer.bypassSecurityTrustStyle(...)

import {DomSanitizer} from '@angular/platform-browser';
...
constructor(sanitizer: DomSanitizationService) {
  this.backgroundImageStyle = sanitizer.bypassSecurityTrustStyle('url(' + this.image + ')');
  // for HTML
  // this.backgroundImageStyle = sanitizer.bypassSecurityTrustHtml(...);

}

신뢰할 수 없는 일반 문자열 대신 이 값으로 바인딩합니다.

이것은 또한 다음과 같은 파이프로 포장될 수 있습니다.

@Pipe({name: 'safeStyle'})
export class Safe {
  constructor(private sanitizer:Sanitizer){}

  transform(style) {
    return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustHtml(style);
    // return this.sanitizer.bypassSecurityTrustScript(value);
    // return this.sanitizer.bypassSecurityTrustUrl(value);
    // return this.sanitizer.bypassSecurityTrustResourceUrl(value);
  }
}
<div [ngStyle]="someStyle | safeStyle"></div>

와 함께

someHtml = `<a href="#" onClick="alert(document.cookie);">click to see the awesome</a>`;

그래도 여전히 작동 중입니다 :-[ (진행 중인 작업입니다)

플런커 예제(Angular 2.0.0-rc-1)

참고 항목 Angular 2 보안 추적 문제

https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html .

힌트{{...}}

다음을 사용하여 삭제된 콘텐츠를 바인딩할 수 없습니다.prop="{{sanitizedContent}}"왜냐면{{}}stringyfs 값이 할당되기 전에 값을 지정하여 검사를 중단합니다.

내용을 신뢰하기 위해 sanitizer를 무시하는 것은 보안 문제가 될 수 있습니다.Angular는 전용 sanitizing 라이브러리가 아니기 때문에 어떠한 위험도 감수하지 않는 것은 의심스러운 콘텐츠에 대한 지나친 열정입니다.예를 들어 거의 모든 속성을 제거합니다.DOM Purify라는 전용 라이브러리에 검사를 위임할 수 있습니다.Angular와 함께 DOM Purify를 쉽게 사용할 수 있도록 만든 래퍼 라이브러리가 있습니다.

https://github.com/TinkoffCreditSystems/ng-dompurify

또한 HTML을 선언적으로 검사하기 위한 파이프가 있습니다.

<div [innerHtml]="value | dompurify"></div>

DOMPurify는 HTML/SVG를 삭제하는 데는 좋지만 CSS는 그렇지 않습니다.따라서 CSS를 처리하기 위해 Angular의 CSS sanitizer를 제공할 수 있습니다.

import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
import {SANITIZE_STYLE} from '@tinkoff/ng-dompurify';

@NgModule({
    // ...
    providers: [
        {
            provide: SANITIZE_STYLE,
            useValue: ɵ_sanitizeStyle,
        },
    ],
    // ...
})
export class AppModule {}

내부 - 헨스ɵ접두사, 하지만 이것이 앵글 팀이 자신의 패키지에서도 사용하는 방법입니다.

언급URL : https://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added-using-binding-syntax

반응형