try sanitize-html x vue

インストール

npm i sanitize-html
npm i -D @types/sanitize-html

使うときは直接コンポーネントでインポートするんじゃなくて、外だししてから使う。
もしくは使用するコンポーネントを絞ってクローズさせるのもいいかもね。

sanitize-html.ts

import _sanitize from "sanitize-html";

// eslint-disable-next-line @typescript-eslint/no-unused-vars
type Options = _sanitize.IOptions;

export const sanitize = (body: string, options?: Options): string => {
  return _sanitize(body, options);
};

しっぽくん

使用する側はこんな感じにしてみた。
optionsは適当。
テストでdiv以外を突っ込んでみると削除されてレンダーされていることがわかる。

HTMLMail.vue

<template>
  <h2>HTMLMailViewer</h2>
  <p>rawHtml: {{ sanitizeHtml }}</p>
  <div v-html="sanitizeHtml"></div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

import { sanitize } from "@/plugins";

export default defineComponent({
  name: "HTMLMailComponent",
  props: {
    html: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const sanitizeHtml = sanitize(props.html, {
      allowedTags: ["div"],
    });

    return { sanitizeHtml };
  },
});
</script>

しっぽくん

実際に運用するときはplugins側である程度許可するtagを決めてあげて、使う側でプラスアルファで許可してあげると楽かも。

しっぽくん

スタイルとか他の要素が混じってくるとどうなるのかはしらない。
既存のスタイルと衝突するのかな？

このスクラップは2021/08/05にクローズされました