ACuriousProgrammer
ACuriousProgrammer
PostsComments
NNuxt
Created by ACuriousProgrammer on 12/6/2024 in #❓・help
how to extend nuxt security headers after build using enviroment vars?
Hi all nuxt noob here, (i am php backend developer normally) I have a nuxt project that is deployed to a static webapp on azure along with a cdn also deployed automatically, i dont know the cdn url before build and i want to add it to allow images from cdn. 
security: {
    headers: {
      contentSecurityPolicy: {
        'img-src': [
          "'self'",
          'data:',
          'https://*.googleapis.com',
          'https://*.gstatic.com',
          'https://*.google.com',
          process.env.NUXT_PUBLIC_IMAGE_CDN
        ],
        'script-src': [
          "'self'",
          'https:',
          "'unsafe-inline'",
          "'unsafe-eval'",
        ],
      }
    }
  }
security: {
    headers: {
      contentSecurityPolicy: {
        'img-src': [
          "'self'",
          'data:',
          'https://*.googleapis.com',
          'https://*.gstatic.com',
          'https://*.google.com',
          process.env.NUXT_PUBLIC_IMAGE_CDN
        ],
        'script-src': [
          "'self'",
          'https:',
          "'unsafe-inline'",
          "'unsafe-eval'",
        ],
      }
    }
  }
thats what i currently have in the nuxt.config.js which doesnt seem to work I found that I can add hooks like ready 
  hooks: {
    ready(nuxt) {
      nuxt.options.security.headers.contentSecurityPolicy['img-src'].push(nuxt.options.runtimeConfig.public.IMAGE_CDN)
    }
  }
  hooks: {
    ready(nuxt) {
      nuxt.options.security.headers.contentSecurityPolicy['img-src'].push(nuxt.options.runtimeConfig.public.IMAGE_CDN)
    }
  }
I tried that from a suggestion from chatgpt but it doesnt work and i cant seem to find how to access the security headers to update them i would appritiate the help
24 replies