Nuxt3 SSR、nuxt-security 或同构 dompurify 用于 v-html 安全性

Question

我目前有一个使用 Nuxt3 作为 SSR 运行的网站。我使用 Strapi 作为我的 CMS，通过 Nuxt Strapi 模块将内容传递到 Nuxt (https://strapi.nuxtjs.org/)。

我的内容有一些 Markdown 字段，所以我目前正在使用 Markdown It (https://github.com/markdown-it/markdown-it) 来解析任何 Markdown 并通过 v-html 标签显示。

然而，我意识到要保证我的网站安全，因为我已经阅读了使用 v-html 的所有潜在问题。

我目前正在使用 nuxt-security (https://nuxt.com/modules/security)，特别是

contentSecurityPolicy

部分来帮助阻止 XSS 问题等。

作为 SSR 而不是 SSG，我知道 DOMPurify 不一定有效，但是我发现了同构 DOMPurify (https://github.com/kkomelin/isomorphic-dompurify)。

所以我的问题是，两者都足以保证我的网站安全，还是推荐其中一个而不是另一个，或者我实际上需要同时使用两者。

我当前的 nuxt-security 配置是：

security: {
    headers: {
      crossOriginEmbedderPolicy: 'unsafe-none',
      contentSecurityPolicy: {
        'img-src': ["'self'", 'data:', process.env.CSP_IMG_SRC],
        'script-src': ["'self'", 'https:', "'unsafe-inline'", process.env.CSP_SCRIPT_SRC]
      }
    },
},

然后用我希望通过的任何 url 填充两个环境变量。我已经用一些简单的警报和外部图像对此进行了测试，它会停止任何运行/显示的内容。

然后我还尝试了同构 DOMPurify 函数，通过它运行我的 CMS 内容：

export function purifyData(data: string | DataObject | null | Strapi4Response): string | DataObject | null | Strapi4Response {
  if (typeof data === "string") {
    // Sanitize string directly
    return DOMPurify.sanitize(data);
  } else if (typeof data === "object") {
    // Iterate and sanitize properties of data object
    for (const key in data) {
      if (typeof data[key] === "string") {
        data[key] = DOMPurify.sanitize(data[key]);
      } else if (typeof data[key] === "object") {
        data[key] = purifyData(data[key]);
      }
    }
    return data;
  } else {
    throw new Error("Invalid data type. Please provide a string or an object.");
  }
}

两者确实都有效。

Answer 1

安全是一个无止境的深坑，如果有人想对你做点什么，他可能会在某个时候这么做。这更多的是时间/金钱的问题，而不是“是否可能”的问题。例如，他可以攻击服务器本身或利用您正在使用的软件包之一中的漏洞等等......

尽管如此，这可能绝对足够了，并且在安全性方面应该很好。别想太多，因为这是一个无尽的坑。此外，通过同时使用这两个模块，您可能领先于很多人。

我不是专业的安全专家，但这对我来说听起来完全没问题。另外，你是使用 Strapi 的人吧？因此，与其他人在其中输入一些内容相比，您的攻击向量甚至更少。

---

PS：我不知道我们需要一个同构的 DOMpurify，TIL。