Vue3 で Markdown を HTML として安全に表示する

Question

つまり、私が作成した「カスタム マークダウン」を含む文字列のセットがあります。私の目的は、これらの文字列をフロントエンドで HTML にレンダリングすることです。次の文字列があるとします:

リーリー

私は次のようなことを期待していました:

リーリー

ここで行うことは、いくつかの基本的な正規表現を使用することです:

リーリー

これは正常に動作し、正しい文字列を返します。次に、印刷するには、テンプレートで次のようにします:

リーリー

私の問題は、ある時点でユーザーがこれらの文字列を自分で入力できるようにして、これを他のユーザーにも表示できるようにしたいということです。したがって、確かに XSS 攻撃に対して脆弱です。

これを回避する代替手段はありますか? https://github.com/Vannsl/vue-3-sanitize を調べてみると、div、span、br# が許可されているようです。 ## タグに対して適切なアプローチを使用し、すべてのタグのプロパティを class のみを許可するように設定しています。これで十分安全ですか?他に何かすべきことはありますか?

この場合、バックエンドでクリーンアップする必要はないと思いますね。つまり、サーバー内の文字列に

が含まれていたとしても、Web ブラウザーは悪意のあるコードを実行できません。

Answer 1

私の問題は、ある時点でユーザーがこれらの文字列を自分で入力できるようにしたいことです。

それでは、投稿で言及した文字列をユーザーが入力するためのフォーム入力はありますか? 「はい」の場合、私の提案は、ユーザー入力をバックエンドに渡す前に、まずユーザー入力をサニタイズできることです。したがって、バックエンド自体に悪意のあるコードを保存すべきではありません。

したがって、 string.replace() メソッドを使用します。最初に元の悪意のあるタグを置き換えることができます。入力文字列から 、 などを抽出し、データベースに保存します。

実行できる手順:

• 許可されていない文字/文字列の正規表現を含む blacklist 変数を作成します。
• string.replace() を使用して、文字列内に出現するすべての使用可能な文字を、ブラックリスト正規表現に従って空の文字列に置き換えます。
• クリーンアップされた文字列をデータベースに保存します。

これにより、バックエンドからの文字列を心配する必要がなく、害を及ぼさずに v-html 経由で文字列をバインドできます。