Stripe blocked by 'Cross-Origin-Embedder-Policy'

[fabricioOak]

After configuring @nuxt/security module, my Stripe requests are being blocked by the Cross-Origin-Embedder-Policy. While reading the documentation, I tried to configure it on a per-route basis as shown below:

security: {
    headers: {
      // Default config!
      contentSecurityPolicy: {
        'base-uri': ["'self'"],
        'font-src': ["'self'", 'https:', 'data:'],
        'form-action': ["'self'"],
        'frame-ancestors': ["'self'"],
        'img-src': ["'self'", 'data:'],
        'object-src': ["'none'"],
        'script-src-attr': ["'none'"],
        'style-src': ["'self'", 'https:', "'unsafe-inline'"],
        'upgrade-insecure-requests': process.env.NODE_ENV !== 'development'
      },
      crossOriginResourcePolicy: 'cross-origin',
      crossOriginOpenerPolicy: 'unsafe-none',
      crossOriginEmbedderPolicy: 'require-corp'
    }
  },
  routeRules: {
    '/account': {
      headers: {
        'Cross-Origin-Embedder-Policy': 'unsafe-none'
      }
    }
  },

However, the policy only changes when I refresh the page. Is there any other configuration I should do within the module or Nuxt itself, or is this a limitation?

[Baroshem]

Heyo,

Thanks for reporting this question.

Could you try any of the answers provided by Alex here #138 (comment)?

Maybe some of them will help you solve the issue.

I will try to look for answers as well :)

[Baroshem]

Also, this could be helpful

https://stripe.com/docs/connect/get-started-connect-embedded-components?locale=fr-FR#csp-and-http-header-requirements

[fabricioOak]

Adding proxy to the route:

Tryied with https://connect-js.stripe.com and https://js.stripe.com

nitro: {
    routeRules: {
      '/account': {
        proxy: 'https://connect-js.stripe.com'
      },
   }
}

Results in

I also updated my csp and didn't have results, considering that I configured correctly:

contentSecurityPolicy: {
        'base-uri': ["'self'"],
        'font-src': ["'self'", 'https:', 'data:'],
        'form-action': ["'self'"],
        'frame-ancestors': ["'self'"],
        'img-src': ["'self'", 'data:', 'https://*.stripe.com'],
        'object-src': ["'none'"],
        'script-src-attr': ["'none'"],
        'script-src': [
          "'self'",
          'https://connect-js.stripe.com',
          'https://js.stripe.com',
          "'unsafe-inline'"
        ],
        'frame-src': ['https://connect-js.stripe.com', 'https://js.stripe.com'],
        'style-src': [
          "'self'",
          'https:',
          "'unsafe-inline'",
          'sha256-0hAheEzaMe6uXIKV4EehS9pu1am1lj/KnnzrOYqckXk='
        ],
      },

Only when I update the page and the HTML document is fully loaded, that my routeRules works and I get my Cross-Origin-Embedder-Policy set to unsafe-none instead of require-corp

[Baroshem]

Hmm, could you provide more details about your stack like Nuxt version and maybe your nuxt config?

It sounds to me a bit like an issue with Nuxt itself but not sure.

[Baroshem]

@danielroe

Could you share some light feom Nuxt perspective?

Can this be an issue with the implementation of route rules on the security module side or is it an issue on the framework side?

[fabricioOak]

Hmm, could you provide more details about your stack like Nuxt version and maybe your nuxt config?

It sounds to me a bit like an issue with Nuxt itself but not sure.

Using the latest version "nuxt": "npm:nuxt3@latest", or Nuxt 3.7.4-28256404.e9001902 with Nitro 2.6.4-28243740.058bacf to be more specific and I cannot share the hole nuxt config.

[fabricioOak]

Also create a side project and tested the url changes

export default defineEventHandler((event) => {
  console.log('=========New request=========: ' + getRequestURL(event))
})

Correct me if I'm wrong, but this shoud be executed on every route change, right? But my middleware only trigger when I refresh or access manually the url, NuxtLink does not trigger this only if I use the anchor a tag. Is this the normal behavior?

[Baroshem]

I think that if you want to trigger something on each route change, you should be looking into -> https://nuxt.com/docs/guide/directory-structure/middleware instead

[Baroshem]

The route rules should take place and only register one header value. It shouldnt be like that.

Have you tried to remove the require corp from the security config and just leave the route rules?

Maybe there is a bug there.

[Baroshem]

Any additional info @fabricioOak ?

[fabricioOak]

Tried to use only

The route rules should take place and only register one header value. It shouldnt be like that.

Have you tried to remove the require corp from the security config and just leave the route rules?

Maybe there is a bug there.

I tried that

  routeRules: {
    '/**': {
      headers: {
        'Cross-Origin-Embedder-Policy': 'require-corp',
      }
    },
    '/account/**': {
      headers: {
        'Cross-Origin-Embedder-Policy': 'unsafe-none'
      },
    },
  },
security: {
    headers: {
      contentSecurityPolicy: {
        'base-uri': ["'self'"],
        'font-src': ["'self'", 'https:', 'data:'],
        'form-action': ["'self'"],
        'frame-ancestors': ["'self'"],
        'img-src': ["'self'", 'data:'],
        'object-src': ["'none'"],
        'script-src-attr': ["'none'"],
        'style-src': ["'self'", 'https:', "'unsafe-inline'"],
        'upgrade-insecure-requests': process.env.NODE_ENV !== 'development'
      }'
    }
  },

But still the headers don't change and stripe is blocked.
Maybe setting /** to have the require corp is somehow overwriting the others. But I'll keep testing and see if I can bypas this and probably do some improviments for the docs.

[fabricioOak]

@Baroshem, I spoke with Daniel, and one alternative is to use a middleware to make navigation to that route act as an external one.

You can achieve this by either using the 'external' attribute on the NuxtLink components or by creating a middleware like this:

export default defineNuxtRouteMiddleware((to) => {
  const routesForExternalLinks = ['/account']; // Or any other route you want

  if (
    process.client &&
    !useNuxtApp().isHydrating &&
    to.path &&
    routesFor externalLinks.includes(to.path)
  ) {
    window.location.href = to.fullPath;
    return;
  }
});

[Baroshem]

Interesting discovery @fabricioOak !

Woule you be open for writing some documentation about it? I think it could fit well in the FAQ section of the docs.

If you target branch 1.0.0-rc.1 there will be a new and updated documentation and there you could copy the previous element and just replace the text, code, and maybe a link to your example.

I think this could be very useful for the community who could be looking for similiar issue.

When they will search the documentation with search bar, they will be able to find this faq section by keywords like navigation.

[Baroshem]

https://github.com/Baroshem/nuxt-security/blob/chore/1.0.0-rc.1/docs/content/1.documentation/5.advanced/2.faq.md