각도 5 DomSanitizer는 하이퍼 링크

Question

와 나는 WYSIWYG 편집기 (CKEditor)를 사용하고 내가 알아 내려고 노력하고 있어요하는 각도 (5)에 DomSanitizer을 사용하기에 적합한 방법이다 각도 5.

와 내용을 렌더링하는 것을 시도하고있다 내가 직면하고있는 문제는 하이퍼 링크가 결과로 생기는 HTML에서 작동하지 않는다는 것입니다 ("클릭 가능하지 않음").

public getSafeContent(): SafeHtml { 
    return this.sanitizer.bypassSecurityTrustHtml(this.page.content); 
} 

내 템플릿에이 방법을 사용하여 : :이 그대로 모든 인라인 스타일과 HTML를 렌더링

<div [innerHTML]="getSafeContent()"></div> 

을 내가는 SafeHTML의 내용을 반환하려면 다음 타이프 스크립트 코드를 사용하고

, 하이퍼 링크는 작동하지 않습니다.

내가 대신이 일을 시도 :

그 하이퍼 링크 결과

public getSafeContent(): SafeHtml { 
    return this.sanitizer.sanitize(SecurityContext.HTML, this.page.content); 
} 

실제로 작동하지만 인라인 스타일은 아니다.

위생 처리 된 콘텐츠로 작업 할 수있는 스타일과 하이퍼 링크를 모두 얻을 수있는 방법이 있습니까?

업데이트

이 페이지는 크롬 개발 도구의 모습입니다 :

<div _ngcontent-c22="" class="row"> 
    <div _ngcontent-c22="" class="col-lg-12"> 

     <div _ngcontent-c22=""> 
      <p><a href="http://www.google.com">google</a></p> 
     </div> 
    </div> 
</div> 

와 구글 링크를 클릭 할 수 없습니다.

Answer 1

bypassSecurityTrustHtml은 콘텐츠에 <script> 태그를 허용합니다. URL의 경우 bypassSecurityTrustUrl이 필요합니다. 여기를 참조하십시오 : https://angular.io/api/platform-browser/DomSanitizer#bypassSecurityTrustUrl. ,

은 내가 bypassXXX 방법을 적재 한 번도 안 써봤, 그래서 당신이 bypassSecurityTrustUrl(bypassSecurityTrustHtml(myContent)) 같은 일을 할 수 있을지는 모르지만 각 방법은 문자열을 사용하지만 (유형 SafeHtml/SafeUrl의) 객체를 반환 아마 이후 추측 것 따라서 문자열을 기대하는 스택 함수 호출에 대한 입력으로 사용할 수 없습니다.

따라서 콘텐츠를 구문 분석하고 각 URL을 bypassSecurityTrustUrl으로 전달한 다음 모든 것을 다시 함께 결합해야 할 수도 있습니다.

업데이트

난 그냥 살균 방법 바라 보았다. 나는이 시도하지 않은,하지만이 같은 작동 될 수 있습니다 sanitize 이후

this.sanitizer.sanitize(SecurityContext.HTML, this.sanitizer.bypassSecurityTrustUrl(myContent)); 

가 입력으로 SafeValue 수 있습니다. 내부의 bypassSecurityTrustUrl은 URL을 삭제하고 SafeUrl을 반환합니다. 외부 바코드는 포장을 풀고 입력으로 사용하여 HTML을 안전하게 만듭니다. 내가 말했듯이, 나는 그것을 시도하지 않았지만 이론적으로 좋아 보인다.

Answer 2

이 나를 위해 작동합니다

구성 요소 :

content = '<b>Hello World</b><p style=\'font-size:14pt\'> 
<a href=\'http://www.google.com\'>Go to Google</a></p>Test123'; 

public getSafeContent(): SafeHtml { 
    return this.sanitizer.bypassSecurityTrustHtml(this.content); 
} 

HTML :

<div [innerHTML]="getSafeContent()"></div> 

링크의 작품과 인라인 스타일