nuxt-security: Cross-Origin-Resource-Policy header Error on Paypal Checkout

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.

About this issue

Original URL
State: closed
Created 8 months ago
Comments: 16 (7 by maintainers)

Most upvoted comments

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.

espensgr on Oct 25, 2023

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.

geekyshow1 on Nov 4, 2023