@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

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

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

Import

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

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

Ví dụ

Basic

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

User Input

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

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

Special Characters

<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

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

<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 | | --------- | ---------- | | < | < | | > | > | | & | & | | " | " | | ' | ' |

Công nghệ

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

Demo

npx nx serve core-ui

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

Unit Tests

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

License

MIT