npm package: @libs-ui/pipes-escape-html
Description: > 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.
Latest version: 0.2.356-23

# @libs-ui/pipes-escape-html

> 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.

## Giới thiệu

`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.

### Tính năng

- Escape các ký tự HTML đặc biệt: `<`, `>`, `&`, `"`, `'`
- Xử lý null/undefined một cách an toàn
- Ngăn chặn XSS attacks
- OnPush Change Detection
- Standalone
- Angular Signals compatible

## Khi nào sử dụng

- Hiển thị nội dung HTML từ user input để tránh XSS attacks
- Escape các ký tự đặc biệt như `<`, `>`, `&`, `"`, `'` trong text
- Hiển thị code snippets hoặc HTML examples trong UI
- Render an toàn nội dung từ API hoặc database

## Cài đặt

```bash
# npm
npm install @libs-ui/pipes-escape-html

# yarn
yarn add @libs-ui/pipes-escape-html
```

## Import

```typescript
import { LibsUiPipesEscapeHtmlPipe } from '@libs-ui/pipes-escape-html';

@Component({
  standalone: true,
  imports: [LibsUiPipesEscapeHtmlPipe],
})
export class YourComponent {}
```

## Ví dụ

### Basic

```html
<div>
  {{ '
  <script>
    alert('xss');
  </script>
  ' | LibsUiPipesEscapeHtmlPipe }}
</div>
<!-- Output: &lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt; -->
```

### User Input

```typescript
export class CommentComponent {
  userComment = '<img src=x onerror="alert(1)">';
}
```

```html
<div class="user-comment">
  <p>{{ userComment | LibsUiPipesEscapeHtmlPipe }}</p>
</div>
<!-- Output: &lt;img src=x onerror=&quot;alert(1)&quot;&gt; -->
```

### Special Characters

```html
<div>
  {{ '
  <div class="test">Hello & "World"</div>
  ' | LibsUiPipesEscapeHtmlPipe }}
</div>
<!-- Output: &lt;div class=&quot;test&quot;&gt;Hello &amp; &quot;World&quot;&lt;/div&gt; -->
```

### Null Handling

```typescript
export class ExampleComponent {
  nullValue = null;
  undefinedValue = undefined;
}
```

```html
<div>
  {{ nullValue | LibsUiPipesEscapeHtmlPipe }}
  <!-- Output: '' -->
  {{ undefinedValue | LibsUiPipesEscapeHtmlPipe }}
  <!-- Output: '' -->
</div>
```

## API

### LibsUiPipesEscapeHtmlPipe

#### Parameters

| Property | Type                          | Default | Description                    |
| -------- | ----------------------------- | ------- | ------------------------------ |
| `value`  | `string \| null \| undefined` | -       | Chuỗi cần escape HTML entities |

#### Returns

| Type     | Description                        |
| -------- | ---------------------------------- |
| `string` | Chuỗi đã được escape HTML entities |

## Escaped Characters

Pipe escape các ký tự HTML đặc biệt sau:

| Character | Escaped To |
| --------- | ---------- |
| `<`       | `&lt;`     |
| `>`       | `&gt;`     |
| `&`       | `&amp;`    |
| `"`       | `&quot;`   |
| `'`       | `&#x27;`   |

## Công nghệ

| Technology      | Version | Purpose          |
| --------------- | ------- | ---------------- |
| Angular         | 18+     | Framework        |
| Angular Signals | -       | State management |
| TailwindCSS     | 3.x     | Styling          |

## Demo

```bash
npx nx serve core-ui
```

- Local: `http://localhost:4500/pipes/escape-html`
- Production: `https://libs-ui.mobio.vn/pipes/escape-html`

## Unit Tests

```bash
npx nx test pipes-escape-html
npx nx test pipes-escape-html --coverage
```

## License

MIT