vue-dompurify-html

# vue-dompurify-html `vue-dompurify-html`は、Vue.jsの組み込みディレクティブである`v-html`に代わる安全な選択肢を提供するVue.jsディレクティブです。DOMPurifyライブラリを活用して、HTMLコンテンツがレンダリングされる前にサニタイズし、クロスサイトスクリプティング（XSS）脆弱性の防止を支援します。 ## 機能 - **安全なHTMLレンダリング**: DOMに挿入する前に、DOMPurifyでHTML文字列を自動的にクリーンアップします。 - **ドロップイン置換**: Vue 2およびVue 3プロジェクトで`v-html`の直接の代替として使用できます。 - **設定可能**: カスタムDOMPurify設定オプションをサポートし、サニタイズルールを調整できます。 - **TypeScriptサポート**: 開発者体験を向上させるためのTypeScript定義を含みます。 ## インストール npmまたはyarnでパッケージをインストールします： ```bash npm install vue-dompurify-html # または yarn add vue-dompurify-html ``` ## 使用方法 ### Vue 3 アプリケーションのエントリファイルでディレクティブをグローバルに登録します： ```javascript import { createApp } from 'vue' import App from './App.vue' import VueDOMPurifyHTML from 'vue-dompurify-html' const app = createApp(App) app.use(VueDOMPurifyHTML) app.mount('#app') ``` 次に、テンプレートで使用します： ```html <template> <div v-dompurify-html="htmlContent"></div> </template> ``` ### Vue 2 Vue 2の場合は、パッケージをインポートしてプラグインとして登録します： ```javascript import Vue from 'vue' import VueDOMPurifyHTML from 'vue-dompurify-html' Vue.use(VueDOMPurifyHTML) ``` ## 設定 DOMPurifyの設定オプションをディレクティブに直接渡すことができます： ```html <div v-dompurify-html="{ content: htmlContent, options: { USE_PROFILES: { html: true } } }"></div> ``` または、プラグイン登録時にグローバルデフォルトを設定できます： ```javascript app.use(VueDOMPurifyHTML, { default: { USE_PROFILES: { html: true } } }) ``` ## ライセンス このプロジェクトはMITライセンスの下でライセンスされています。詳細は[LICENSE](LICENSE)ファイルを参照してください。 ## コントリビューション コントリビューションを歓迎します！プルリクエストを送信する前に、[コントリビューションガイドライン](CONTRIBUTING.md)をお読みください。 ## 謝辞 このパッケージは、VueアプリケーションでHTMLをより安全にレンダリングする必要性に触発され、DOMPurifyチームの優れた成果の上に構築されています。