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