@libs-ui/pipes-escape-html 0.2.355-9 → 0.2.356-0
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 +159 -2
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,3 +1,160 @@
|
|
|
1
|
-
# pipes-escape-html
|
|
1
|
+
# @libs-ui/pipes-escape-html
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> Pipe để escape các ký tự HTML đặc biệt, ngăn chặn XSS attacks khi hiển thị nội dung không tin cậy.
|
|
4
|
+
|
|
5
|
+
## Giới thiệu
|
|
6
|
+
|
|
7
|
+
`LibsUiPipesEscapeHtmlPipe` là một standalone Angular pipe để escape các ký tự HTML đặc biệt, giúp ngăn chặn XSS (Cross-Site Scripting) attacks khi hiển thị nội dung từ user input hoặc nguồn không tin cậy.
|
|
8
|
+
|
|
9
|
+
### Tính năng
|
|
10
|
+
|
|
11
|
+
- Escape các ký tự HTML đặc biệt: `<`, `>`, `&`, `"`, `'`
|
|
12
|
+
- Xử lý null/undefined một cách an toàn
|
|
13
|
+
- Ngăn chặn XSS attacks
|
|
14
|
+
- OnPush Change Detection
|
|
15
|
+
- Standalone
|
|
16
|
+
- Angular Signals compatible
|
|
17
|
+
|
|
18
|
+
## Khi nào sử dụng
|
|
19
|
+
|
|
20
|
+
- Hiển thị nội dung HTML từ user input để tránh XSS attacks
|
|
21
|
+
- Escape các ký tự đặc biệt như `<`, `>`, `&`, `"`, `'` trong text
|
|
22
|
+
- Hiển thị code snippets hoặc HTML examples trong UI
|
|
23
|
+
- Render an toàn nội dung từ API hoặc database
|
|
24
|
+
|
|
25
|
+
## Cài đặt
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
# npm
|
|
29
|
+
npm install @libs-ui/pipes-escape-html
|
|
30
|
+
|
|
31
|
+
# yarn
|
|
32
|
+
yarn add @libs-ui/pipes-escape-html
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Import
|
|
36
|
+
|
|
37
|
+
```typescript
|
|
38
|
+
import { LibsUiPipesEscapeHtmlPipe } from '@libs-ui/pipes-escape-html';
|
|
39
|
+
|
|
40
|
+
@Component({
|
|
41
|
+
standalone: true,
|
|
42
|
+
imports: [LibsUiPipesEscapeHtmlPipe],
|
|
43
|
+
})
|
|
44
|
+
export class YourComponent {}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Ví dụ
|
|
48
|
+
|
|
49
|
+
### Basic
|
|
50
|
+
|
|
51
|
+
```html
|
|
52
|
+
<div>
|
|
53
|
+
{{ '
|
|
54
|
+
<script>
|
|
55
|
+
alert('xss');
|
|
56
|
+
</script>
|
|
57
|
+
' | LibsUiPipesEscapeHtmlPipe }}
|
|
58
|
+
</div>
|
|
59
|
+
<!-- Output: <script>alert("xss")</script> -->
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### User Input
|
|
63
|
+
|
|
64
|
+
```typescript
|
|
65
|
+
export class CommentComponent {
|
|
66
|
+
userComment = '<img src=x onerror="alert(1)">';
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
```html
|
|
71
|
+
<div class="user-comment">
|
|
72
|
+
<p>{{ userComment | LibsUiPipesEscapeHtmlPipe }}</p>
|
|
73
|
+
</div>
|
|
74
|
+
<!-- Output: <img src=x onerror="alert(1)"> -->
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### Special Characters
|
|
78
|
+
|
|
79
|
+
```html
|
|
80
|
+
<div>
|
|
81
|
+
{{ '
|
|
82
|
+
<div class="test">Hello & "World"</div>
|
|
83
|
+
' | LibsUiPipesEscapeHtmlPipe }}
|
|
84
|
+
</div>
|
|
85
|
+
<!-- Output: <div class="test">Hello & "World"</div> -->
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Null Handling
|
|
89
|
+
|
|
90
|
+
```typescript
|
|
91
|
+
export class ExampleComponent {
|
|
92
|
+
nullValue = null;
|
|
93
|
+
undefinedValue = undefined;
|
|
94
|
+
}
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
```html
|
|
98
|
+
<div>
|
|
99
|
+
{{ nullValue | LibsUiPipesEscapeHtmlPipe }}
|
|
100
|
+
<!-- Output: '' -->
|
|
101
|
+
{{ undefinedValue | LibsUiPipesEscapeHtmlPipe }}
|
|
102
|
+
<!-- Output: '' -->
|
|
103
|
+
</div>
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
## API
|
|
107
|
+
|
|
108
|
+
### LibsUiPipesEscapeHtmlPipe
|
|
109
|
+
|
|
110
|
+
#### Parameters
|
|
111
|
+
|
|
112
|
+
| Property | Type | Default | Description |
|
|
113
|
+
| -------- | ----------------------------- | ------- | ------------------------------ |
|
|
114
|
+
| `value` | `string \| null \| undefined` | - | Chuỗi cần escape HTML entities |
|
|
115
|
+
|
|
116
|
+
#### Returns
|
|
117
|
+
|
|
118
|
+
| Type | Description |
|
|
119
|
+
| -------- | ---------------------------------- |
|
|
120
|
+
| `string` | Chuỗi đã được escape HTML entities |
|
|
121
|
+
|
|
122
|
+
## Escaped Characters
|
|
123
|
+
|
|
124
|
+
Pipe escape các ký tự HTML đặc biệt sau:
|
|
125
|
+
|
|
126
|
+
| Character | Escaped To |
|
|
127
|
+
| --------- | ---------- |
|
|
128
|
+
| `<` | `<` |
|
|
129
|
+
| `>` | `>` |
|
|
130
|
+
| `&` | `&` |
|
|
131
|
+
| `"` | `"` |
|
|
132
|
+
| `'` | `'` |
|
|
133
|
+
|
|
134
|
+
## Công nghệ
|
|
135
|
+
|
|
136
|
+
| Technology | Version | Purpose |
|
|
137
|
+
| --------------- | ------- | ---------------- |
|
|
138
|
+
| Angular | 18+ | Framework |
|
|
139
|
+
| Angular Signals | - | State management |
|
|
140
|
+
| TailwindCSS | 3.x | Styling |
|
|
141
|
+
|
|
142
|
+
## Demo
|
|
143
|
+
|
|
144
|
+
```bash
|
|
145
|
+
npx nx serve core-ui
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
- Local: `http://localhost:4500/pipes/escape-html`
|
|
149
|
+
- Production: `https://libs-ui.mobio.vn/pipes/escape-html`
|
|
150
|
+
|
|
151
|
+
## Unit Tests
|
|
152
|
+
|
|
153
|
+
```bash
|
|
154
|
+
npx nx test pipes-escape-html
|
|
155
|
+
npx nx test pipes-escape-html --coverage
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
## License
|
|
159
|
+
|
|
160
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/pipes-escape-html",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.356-0",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
|
-
"@libs-ui/utils": "0.2.
|
|
6
|
+
"@libs-ui/utils": "0.2.356-0"
|
|
7
7
|
},
|
|
8
8
|
"sideEffects": false,
|
|
9
9
|
"module": "fesm2022/libs-ui-pipes-escape-html.mjs",
|