Angular 2의 링크에 접두사 "unsafe"를 추가하지 않으려면 어떻게 해야 합니까?

Angular 2의 링크에 접두사 "unsafe"를 추가하지 않으려면 어떻게 해야 합니까?

이 질문에는 이미 다음과 같은 답이 있습니다.

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

마감됨6년 전에.

Angular 2를 사용하면 링크에 접두사 "unsafe:"를 추가하지 않도록 설정할 수 있습니다.Angular 2에서 기본적으로 화이트리스트에 없는 프로토콜에 대한 링크를 설정해야 하지만 내부 응용 프로그램에 필요하기 때문에 결과적으로 잘못된 링크가 됩니다.

    <a href="unsafe:Notes://MYSERVER/C1256D3B004057E8" ..

이전 Angular에는 compileProvider가 있었습니다.aHref 위생관리화이트리스트입니다. 하지만 Angular 2에서 유사한 것을 찾을 수 없습니다.

사용DomSanitizer:

import {DomSanitizer} from '@angular/platform-browser';
...
constructor(private sanitizer:DomSanitizer){}
...
let sanitizedUrl = this.sanitizer.bypassSecurityTrustUrl('Notes://MYSERVER/C1256D3B004057E8');

또는 sanitized url을 반환하는 메서드를 만듭니다.

sanitize(url:string){
    return this.sanitizer.bypassSecurityTrustUrl(url);
}

템플릿에서 다음 작업을 수행합니다.

<a [href]="sanitize('Notes://MYSERVER/C1256D3B004057E8')" ..

데모 플렁크

또 다른 방법은 파이프 서비스를 만들어 안전하지 않은 URL을 안전한 URL로 변경할 수 있으므로 모든 구성 요소에서 코드를 다시 작성할 필요가 없습니다.다음 파이프 서비스를 만듭니다.safe-url.pipe.ts:

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

@Pipe({
  name: 'safeUrl'
})
export class SafeUrlPipe implements PipeTransform {
  constructor(private domSanitizer: DomSanitizer) {}
  transform(url) {
    return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

그런 다음 보기에 사용합니다.

예:<a [href]="'Notes://MYSERVER/C1256D3B004057E8' | safeUrl"></a>

참고: app.module.ts 파일에 이 파이프 서비스를 삽입하는 것을 잊지 마십시오.

import { SafeUrlPipe } from './shared/safe-url.pipe'; // Make sure your safe-url.pipe.ts file path is matching.

@NgModule({ declarations: [SafeUrlPipe],...});

언급URL : https://stackoverflow.com/questions/37432609/how-can-i-avoid-adding-prefix-unsafe-to-a-link-by-angular-2