The X-XSS-Protection feature will block FormData

[Ray0907]

How can I implement XSS protection with FormData because I need to upload files via a form? I've checked the xssValidator.mjs file in nuxt-security/dist/runtime/server/middleware, but it appears to only validate text.

[Baroshem]

Hey, this is n out implemented yet.

Check out #364

But our XSS validator should support working with form data so I am open for extending it.

Would you be interested in developing such feature? :)

I can provide all help needed

[Ray0907]

Hey, this is n out implemented yet.

Check out #364

But our XSS validator should support working with form data so I am open for extending it.

Would you be interested in developing such feature? :)

I can provide all help needed

@Baroshem Sure! How can I begin developing for the feature?

[Baroshem]

Awesome to hear @Ray0907 💚

1. Clone the repository.
2. https://github.com/Baroshem/nuxt-security?tab=readme-ov-file#development
3. Try to become more familiar with the repo (like do some changes and see if you understand what changes affect what places).
4. Go to the xssValidator.ts file and try to implement a new addition so that this middleware will work for formData as well. It shouldn't need any API changes (detection should be possible automatically in the middleware and adjusted to work correctly).
5. Write unit tests to test this scenario
6. Write documentation about a new functionality

So I suppose it will be somethings like this (pseudocode):

1. Check if request contains form data (else just do what is being done right now)
2. If it is form data, adjust the xss validator to parse the form data without stringifying it
3. Return result of xss validator

Let me know if you need anything else, happy coding!

[Ray0907]

Awesome to hear @Ray0907 💚

1. Clone the repository.
2. https://github.com/Baroshem/nuxt-security?tab=readme-ov-file#development
3. Try to become more familiar with the repo (like do some changes and see if you understand what changes affect what places).
4. Go to the xssValidator.ts file and try to implement a new addition so that this middleware will work for formData as well. It shouldn't need any API changes (detection should be possible automatically in the middleware and adjusted to work correctly).
5. Write unit tests to test this scenario
6. Write documentation about a new functionality

So I suppose it will be somethings like this (pseudocode):

1. Check if request contains form data (else just do what is being done right now)
2. If it is form data, adjust the xss validator to parse the form data without stringifying it
3. Return result of xss validator

Let me know if you need anything else, happy coding!

@BaroshemI want to check content that isn't of file type, but it seems to be blocked by middleware. Are there any other codes or methods besides using an XSSValidator to block this content?

[Baroshem]

Hey @Ray0907

Maybe other middleware is blocking this one. Not sure about it. You can try to disable middleware after another to see which one is blocking it. What response code do you get?

[Ray0907]

@Baroshem

I'm utilizing formidable to manage file uploads via a form. However, when I activate nuxt-security, the response remains pending until it times out. If I deactivate nuxt-security, it works fine. I've already verified that the validator value is the same as the one read from the body.

[samk-dev]

Hey, thanks for the great work. I am having similar issue as @Ray0907

1. when using $fetch and formData with multipart/form-data; boundary=----WebKitFormBoundary header
2. also when using proxyRequest and formData

in both cases return 401 unauthorized

When I deactivate the module everything works fine.

[Baroshem]

Hey @Ray0907 @samk-dev

These are strange issues to be honest. The only place where the module uses 401 errors is the basic auth. Are you using it?

Have you maybe tried disabling certain middlewares one by one to see which ones could cause this?

[samk-dev]

@Baroshem

I am not using basic auth, and to be honest I didn't do much debug as I needed to finish developing the feature. What I am using for auth is Appwrite and proxying the all requests and responses related to appwrite with proxyRequest and everything works unless an upload was made. I'll dig into it and let you know which middleware - option is causing this.

Thank you

[Baroshem]

Awesome,

Pleade let me know. I will try my best to help you :)

[samk-dev]

Hi @Baroshem I managed to do some debugging and I can confirm that is the xssValidator middleware, once disabled the upload works without a problem. I have tested it with proxyRequest. here's the code

~/server/api/[...].ts

import { AppwriteException } from 'appwrite'
import { joinURL } from 'ufo'

export default defineEventHandler(async (event) => {
  const path = event.path.replace(/^\/api\//, '')
  const target = joinURL('https://cloud.appwrite.io/v1', path)

  try {
    await proxyRequest(event, target)
  } catch (error: any | unknown) {
    if (error instanceof AppwriteException) {
      throw createError({
        statusCode: error.code,
        statusMessage: error.message,
        message: error.name
      })
    } else {
      throw createError(error)
    }
  }
})

~/app.vue

<script lang="ts" setup>
import { Client, Storage, ID } from 'appwrite'
const config = useRuntimeConfig()

const client = new Client()
  .setEndpoint('http://localhost:4000/api')
  .setProject(config.public.appwrite.projectId)

const storage = new Storage(client)

const file = ref<File | null>(null)
const uploadProgress = ref(0)
const onUploadFile = async ($event: Event) => {
  const target = $event.target as HTMLInputElement
  if (target && target.files) {
    file.value = target.files[0]

    try {
      console.log('FILE', file.value)
      const response = await storage.createFile(
        config.public.appwrite.bucket,
        ID.unique(),
        file.value as File,
        undefined,
        (progress) => {
          console.log('PROGRESS', progress)
          uploadProgress.value = progress.progress
        }
      )

      console.log('RESPONSE', response)
    } catch (error: any) {
      console.log(error)
    }
  }
}
</script>

<template>
  <div>
    index page
    <form @submit.prevent="onUploadFile">
      <input id="file" type="file" @change="onUploadFile($event)" />
      <p>{{ uploadProgress.toFixed() }}</p>
    </form>
  </div>
</template>

browser error

server logs: are clean when xssValidator is on the error happens in the browser.

Hope that helps :)

[Baroshem]

Hey @samk-dev thanks for the reproduction!

Yes so it seems that we need to update the existing XSS validator to support the form data as well. Thankfully, there is a PR open by @Ray0907 and I will review it shortly.

For now, could you please make the xssValidator disabled for your app? I will try to release a new version with this support for XSS Validator for form data :)

[samk-dev]

thank you folks for the effort :) I've already disabled the xxs validation for this specific route (from route-rules) since it's not affecting the rest of the app.