@libs-ui/pipes-security-trust 0.2.355-9 → 0.2.356-1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +53 -2
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,3 +1,54 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Security Trust Pipe
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
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.
|
|
4
|
+
|
|
5
|
+
## Cài đặt
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @libs-ui/pipes-security-trust
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Cách sử dụng
|
|
12
|
+
|
|
13
|
+
Import `LibsUiPipesSecurityTrustPipe` vào component của bạn:
|
|
14
|
+
|
|
15
|
+
```typescript
|
|
16
|
+
import { LibsUiPipesSecurityTrustPipe } from '@libs-ui/pipes-security-trust';
|
|
17
|
+
import { CommonModule } from '@angular/common';
|
|
18
|
+
|
|
19
|
+
@Component({
|
|
20
|
+
standalone: true,
|
|
21
|
+
imports: [CommonModule, LibsUiPipesSecurityTrustPipe],
|
|
22
|
+
// ...
|
|
23
|
+
})
|
|
24
|
+
export class MyComponent {
|
|
25
|
+
htmlContent = '<span style="color: blue">Nội dung xanh</span>';
|
|
26
|
+
}
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Sử dụng trong template (luôn đi kèm với pipe `async` do trả về Promise):
|
|
30
|
+
|
|
31
|
+
```html
|
|
32
|
+
<!-- Trusted HTML -->
|
|
33
|
+
<div [innerHTML]="htmlContent | LibsUiPipesSecurityTrustPipe:'html' | async"></div>
|
|
34
|
+
|
|
35
|
+
<!-- Trusted Style -->
|
|
36
|
+
<div [style.background]="gradient | LibsUiPipesSecurityTrustPipe:'style' | async"></div>
|
|
37
|
+
|
|
38
|
+
<!-- Trusted URL -->
|
|
39
|
+
<a [href]="link | LibsUiPipesSecurityTrustPipe:'url' | async">Link</a>
|
|
40
|
+
|
|
41
|
+
<!-- Resource URL -->
|
|
42
|
+
<iframe [src]="videoUrl | LibsUiPipesSecurityTrustPipe:'resourceUrl' | async"></iframe>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## API
|
|
46
|
+
|
|
47
|
+
| Tham số | Kiểu dữ liệu | Mặc định | Mô tả |
|
|
48
|
+
| -------------- | --------------------------------------------------------- | ----------- | ------------------------------------------------- |
|
|
49
|
+
| `type` | `'html' \| 'style' \| 'script' \| 'url' \| 'resourceUrl'` | `undefined` | Loại nội dung cần trust. |
|
|
50
|
+
| `useXssFilter` | `boolean` | `true` | Có áp dụng `xssFilter` cho loại `html` hay không. |
|
|
51
|
+
|
|
52
|
+
## Lưu ý bảo mật
|
|
53
|
+
|
|
54
|
+
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.
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/pipes-security-trust",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.356-1",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
6
|
"@angular/platform-browser": ">=18.0.0",
|
|
7
|
-
"@libs-ui/utils": "0.2.
|
|
7
|
+
"@libs-ui/utils": "0.2.356-1"
|
|
8
8
|
},
|
|
9
9
|
"sideEffects": false,
|
|
10
10
|
"module": "fesm2022/libs-ui-pipes-security-trust.mjs",
|