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
로 이름이 변경됩니다.DomSanitizer
RC.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)
및 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
'source' 카테고리의 다른 글
문자열 외부 키로 인한 Larvel MariaDB 구문 오류 (0) | 2023.09.03 |
---|---|
무한 루프를 구현할 때 (1) 대 (;;) 대 (C)로 이동하는 동안 사용하는 것에 차이가 있습니까? (0) | 2023.09.03 |
엔티티 프레임워크 코어를 사용하여 엔티티 모델 암호화 (0) | 2023.08.29 |
Swift에서 HTTP 요청 + 기본 인증을 하는 방법 (0) | 2023.08.29 |
각도 5: "컨트롤 컨테이너 공급자 없음" (0) | 2023.08.29 |