Angular 2
신뢰할 수있는 값에 대한 위생 처리 무시

AngularJS CSS firebase HTML ionic2 ionic-framework JavaScript jQuery Node.js TypeScript

매개 변수

Params	세부
선택자	html로 컴포넌트를 참조하는 태그 이름
템플릿 (templateUrl)	`<selector>` 태그가있을 때마다 삽입 될 html을 나타내는 문자열입니다. templateUrl은 동일한 동작을하는 html 파일의 경로입니다.
파이프	이 컴퍼넌트에 의해 사용되는 파이프의 배열.

비고

슈퍼 중요!

SANITIZING을 비활성화하면 XSS (교차 사이트 스크립팅) 및 기타 공격 벡터의 위험에 빠집니다. 당신이 100 % 얻는 것을 당신이 신뢰하는지 확인하십시오.

파이프를 사용하면 다음과 같이 속성 값만 변경됩니다.

<tag [attribute]="expression or variable reference | pipeName">

이 방법으로 파이프를 사용할 수 없습니다.

<tag attribute="expression or variable reference | pipeName">

또는 이쪽으로

<tag attribute={{expression or variable reference | pipeName}}

파이프를 통한 위생 처리 무시 (코드 재사용)

프로젝트는 여기 Angular2 빠른 시작 가이드의 구조를 따릅니다.

RootOfProject
|
+-- app
|   |-- app.component.ts
|   |-- main.ts
|   |-- pipeUser.component.ts
|   \-- sanitize.pipe.ts
|
|-- index.html
|-- main.html
|-- pipe.html

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

bootstrap(AppComponent);

그러면 프로젝트의 루트에서 index.html 파일을 찾아서 빌드합니다.

app.component.ts

import { Component } from '@angular/core';
import { PipeUserComponent } from './pipeUser.component';

@Component({
    selector: 'main-app',
    templateUrl: 'main.html',
    directives: [PipeUserComponent]
})

export class AppComponent { }

이것은 사용되는 다른 구성 요소를 그룹화하는 최상위 구성 요소입니다.

pipeUser.component.ts

import { Component } from '@angular/core';
import { IgnoreSanitize } from "./sanitize.pipe";

@Component({
    selector: 'pipe-example',
    templateUrl: "pipe.html",
    pipes: [IgnoreSanitize]
})

export class PipeUserComponent{
    constructor () { }        
    unsafeValue: string = "unsafe/picUrl?id=";
    docNum: string;

    getUrl(input: string): any {
        if(input !== undefined) {
            return this.unsafeValue.concat(input);
            // returns : "unsafe/picUrl?id=input"
        } else {
            return "fallback/to/something";
        }
    }
}

이 구성 요소는 파이프가 작업 할보기를 제공합니다.

sanitize.pipe.ts

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

@Pipe({
    name: 'sanitaryPipe'
})
export class IgnoreSanitize implements PipeTransform {

   constructor(private sanitizer: DomSanitizationService){}

   transform(input: string) : any {
       return this.sanitizer.bypassSecurityTrustUrl(input);
   }

}

이것은 파이프 형식을 설명하는 논리입니다.

index.html

<head>
    Stuff goes here...
</head>
<body>
    <main-app> 
        main.html will load inside here.
    </main-app>
</body>

main.html

<othertags> 
</othertags>

<pipe-example>  
    pipe.html will load inside here.
</pipe-example>

<moretags>
</moretags>

pipe.html

<img [src]="getUrl('1234') | sanitaryPipe">
<embed [src]="getUrl() | sanitaryPipe">

앱이 실행되는 동안 html을 검사한다면 다음과 같이 보일 것입니다.

<head>
    Stuff goes here...
</head>

<body>

    <othertags> 
    </othertags>
    
    <img [src]="getUrl('1234') | sanitaryPipe">
    <embed [src]="getUrl() | sanitaryPipe">
    
    <moretags>
    </moretags>

</body>

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow