Cross-Origin-Resource-Policy header Error on Paypal Checkout

[geekyshow1]

Hi, i am adding Paypal Checkout Button on a Nuxt Project. Following Official Paypal Documentation https://developer.paypal.com/sdk/js/configuration/#link-addthesdk
In this document There are two ways to add checkout button:-

1. Using Script Tag
1.1 Add Script Tag

<script setup>
useHead({
  // // Paypal SDK to show Paypal button on Payment Page
  script:[{ src: `https://www.paypal.com/sdk/js?client-id=${paypalClientID}&components=buttons,marks&currency=USD&disable-funding=card` }, ],
  noscript: [{ children: 'JavaScript is required' }]
})
</script>

1.2 Add a div where the Button will render

<template>
<div id="paypal-button-container"></div>
</template>

2. Using Module
2.1 Install Module https://www.npmjs.com/package/@paypal/paypal-js
2.2 Write below code

<script setup>
import { loadScript } from "@paypal/paypal-js";
let paypal;
try {
    paypal = await loadScript({ clientId: paypalClientID, currency: "EUR"});
    console.log(paypal);
} catch (error) {
    console.error("failed to load the PayPal JS SDK script", error);
}
if (paypal) {
    try {
        await paypal.Buttons().render("#paypal-button-container");
    } catch (error) {
        console.error("failed to render the PayPal Buttons", error);
    }
}
</script>

2.3 Add a div where the Button will render

<template>
<div id="paypal-button-container"></div>
</template>

Everything works fine until i install Nuxt Security
No matter which method i use to add Paypal whether it Script or module it throws error on console as below

The resource at “https://www.paypal.com/sdk/js?client-id=xyz-1234-abc&components=buttons,marks&currency=USD&disable-funding=card” was blocked due to its Cross-Origin-Resource-Policy header (or lack thereof). See https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)

Loading failed for the <script> with source “https://www.paypal.com/sdk/js?client-id=xyz-1234-abc&components=buttons,marks&currency=USD&disable-funding=card”.

When i disable or uninstall nuxt security it started to work again. I greatly appreciate your help.

[Baroshem]

Hey, could you tell me which version of Nuxt Security are you using?

0.14.4 or 1.0.0-rc.2?

[Baroshem]

Interestingly, I am receiving a different error after trying your example:

ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 400

And I managed to resolve that by setting the Cross-Origin-Embedder-Policy to unsafe none for certain route:

export default defineNuxtConfig({
  modules: ['nuxt-security'],

  routeRules: {
    '/test': {
      headers: {
        'Cross-Origin-Embedder-Policy': 'unsafe-none'
      }
    }
  }
})

This solved the issue on my side. If this wont help, please provide maybe a reproduction repo so that I could test it out as I cant reproduce the exact issue :)

[geekyshow1]

Thanks for quick response Kindly follow https://stackblitz.com/edit/nuxt-starter-qyhpuh?file=pages%2Findex.vue,pages%2Fpayment.vue,app.vue,nuxt.config.ts
Please check on Google Chrome and Firefox I saw both browser throw different errors. The error which you mentioned is on google chrome and the one i mentioned was on firefox.

[Baroshem]

Hey,

Thanks for the reproduction. It seems that Firefox is throwing different errors than Chrome indeed. This is something that is really difficult to handle from the package side.

But you should be able to solve it in your application by using the following code:

export default defineNuxtConfig({
  modules: ['nuxt-security'],

  routeRules: {
    '/payment': {
      headers: {
        'Cross-Origin-Embedder-Policy': 'unsafe-none',
        'Cross-Origin-Resource-Policy': 'cross-origin'
      }
    }
  }
})

The above solution should fix both Chrome and Firefox issues for you embedding the Paypal checkout :)

[geekyshow1]

Have you tested it on reproduction code? I think its still throwing the error on both browser.

[Baroshem]

I have tested it locally with these headers. Keep in mind that Stackblitz does not work perfectly well with Security headers so maybe isn't working because of that.

Have you tried it in your app?

[vejja]

Hi @geekyshow1
in the script property of useHead, could you try adding crossorigin: 'anonymous' ?

such as:

script:[
{ src: `https://www.paypal.com/sdk/js?client-id=${paypalClientID}&components=buttons,marks&currency=USD&disable-funding=card`,
crossorigin: 'anonymous' }
]

[espensgr]

I got that same error in another website with Matomo, and solved that with crossOriginEmbedderPolicy: 'credentialless'.
A PR with types and documentation for this is merged in the new 1.0.0-rc.3, but you can read about it here.

[Baroshem]

@geekyshow1

Any more details about your issue?

[geekyshow1]

I am not able to use Nuxt Security becoz i do not have way to add crossorigin when using Paypal module loadScript(). I also dont know whether @vejja suggestion will resolve the issue or not. I just wanted to give it a try. I don't think paypal will address this issue. I can't ignore any of these two module neither nuxt security nor paypal pg. So i will keep looking for a solution until the project deadline. If you guys come up with a solution please post it here as non of the above solution worked.

[vejja]

Just looked at the PayPal code quickly and I think you could use loadCustomScript() instead of loadScript(). But you’ll have to write additional JS code.

Did you try the useHead method instead? It’s easier and it solves the issue on the Stackblitz example.

[geekyshow1]

Yes it does resolve the issue however it requires below setting as well

export default defineNuxtConfig({
  modules: ['nuxt-security'],
  routeRules: {
    '/payment': {
      headers: {
        'Cross-Origin-Embedder-Policy': 'unsafe-none',
        'Cross-Origin-Resource-Policy': 'cross-origin',
      },
    },
  },
  security: {
    headers: {
      contentSecurityPolicy: {
        'img-src': [
          "'self'",
          'data:',
          'https://paypal.com',
          'https://www.paypalobjects.com',
        ],
      },
      strictTransportSecurity: 'max-age=0;',
    },
  },
});

I am also sharing useHead this may help someone else

useHead({
  // Paypal SDK to show Paypal button on Payment Page
  script: [
    {
      src: `https://www.paypal.com/sdk/js?client-id=YOURCLIENTID&components=buttons,marks&currency=USD&disable-funding=card`,
      crossorigin: 'anonymous',
    },
  ],
  noscript: [{ children: 'JavaScript is required' }],
});

I think i should close this issue as you guys are not responsible to maintain or modify paypal module.

[vejja]

Great to know it works for you now !
My 2 cents if you absolutely need to use javascript instead of useHead:
If you look at the loadScript() code in the PayPal SDK, you will see that it's a simple wrapper around loadCustomScript() with some default values that you can copy in your own code.
The difference is that loadCustomScript() allows you to set the attributes of the tag, so you should be able to insert the crossorigin attribute there.

[Baroshem]

Great to hear! If you dont mind, I would like to add your code sample to the FAQ section of the documentation so that future users will have a solution right away :)

[geekyshow1]

Yes please go ahead It's my honor if it could help other.

[geekyshow1]

I am closing this issue if someone need help regarding loadScript crossorigin kindly follow Paypal Module issue paypal/paypal-js#434