CODEWITHSUNDEEP
nuxt.jsxssnuxt3.jsdompurify
wizzer711
wizzer711

Reputation: 21

Nuxt3 SSR, nuxt-security or isomorphic dompurify for v-html security

I currently have a site which I am running using Nuxt3 running as SSR. I am using Strapi as my CMS to pass content to Nuxt via the Nuxt Strapi Module (https://strapi.nuxtjs.org/).

My content has some fields which are markdown, so I am currently using Markdown It (https://github.com/markdown-it/markdown-it) to parse any markdown and display via v-html tags.

I am however conscious of keeping my site secure as I have read all the potential issues with using v-html.

I am currently using nuxt-security (https://nuxt.com/modules/security), in particular the contentSecurityPolicy section to help stop XSS issues etc.

Being SSR and not SSG I know that DOMPurify wouldn't necessarily work, however I have found Isomorphic DOMPurify (https://github.com/kkomelin/isomorphic-dompurify).

So my question is, are both enough by themselves to keep my site secure or is one recommended over the other, or do I infact need to use both together.

My current nuxt-security config is:

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]
      }
    },
},

Then populating the two env variables with any urls I wish to let through. I have tested this with some simple alerts & external images and it stops anything running/displaying.

Then I also tried a Isomorphic DOMPurify function which I ran my CMS content through:

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.");
  }
}

Both indeed appear to work.

Upvotes: 1

Views: 467

Answers (1)

kissu
kissu

Reputation: 46774

Security is an endless pit and if someone wants to make something mean to you, he might just do it at some point. It's more a matter of time/money rather than an "is it possible". He could for example attack the server itself or use a vulnerability in one of the packages you're using etc etc...

Although, this is probably definitely enough and should be good in terms of security. Don't overthink it because it's an endless pit. Also, you are probably ahead of a lot of people by using those 2 modules together.

I am not a professional security expert but this sounds totally fine to me. Also, you are the one to use Strapi right? Hence, you have even less attack vector than if someone else would input some content in it.

PS: I didn't know that we needed an isomorphic DOMpurify, TIL.

Upvotes: 0

Related Questions