Security Trust Pipe

Pipe hỗ trợ đánh dấu một giá trị là an toàn (trusted) để sử dụng trong template Angular, bypassing cơ chế Security mặc định của framework.

Cài đặt

npm install @libs-ui/pipes-security-trust

Cách sử dụng

Import LibsUiPipesSecurityTrustPipe vào component của bạn:

import { LibsUiPipesSecurityTrustPipe } from '@libs-ui/pipes-security-trust';
import { CommonModule } from '@angular/common';

@Component({
  standalone: true,
  imports: [CommonModule, LibsUiPipesSecurityTrustPipe],
  // ...
})
export class MyComponent {
  htmlContent = '<span style="color: blue">Nội dung xanh</span>';
}

Sử dụng trong template (luôn đi kèm với pipe async do trả về Promise):

<!-- Trusted HTML -->
<div [innerHTML]="htmlContent | LibsUiPipesSecurityTrustPipe:'html' | async"></div>

<!-- Trusted Style -->
<div [style.background]="gradient | LibsUiPipesSecurityTrustPipe:'style' | async"></div>

<!-- Trusted URL -->
<a [href]="link | LibsUiPipesSecurityTrustPipe:'url' | async">Link</a>

<!-- Resource URL -->
<iframe [src]="videoUrl | LibsUiPipesSecurityTrustPipe:'resourceUrl' | async"></iframe>

API

| Tham số | Kiểu dữ liệu | Mặc định | Mô tả | | -------------- | --------------------------------------------------------- | ----------- | ------------------------------------------------- | | type | 'html' \| 'style' \| 'script' \| 'url' \| 'resourceUrl' | undefined | Loại nội dung cần trust. | | useXssFilter | boolean | true | Có áp dụng xssFilter cho loại html hay không. |

Lưu ý bảo mật

Pipe này bypass cơ chế bảo mật của Angular. Chỉ sử dụng với các nội dung mà bạn hoàn toàn tin tưởng. Mặc định xssFilter được bật cho loại html để tăng thêm một lớp bảo mật.