fix(plus): load stripe.js for fraud prevention (#9318)

This is a new requirement by Mozilla's Subscription Platform (SubPlat).

Co-authored-by: Claas Augner <[email protected]>

client/src/plus/offer-overview/offer-overview-subscribe/index.tsx

@@ -15,6 +15,9 @@ import { useOnlineStatus } from "../../../hooks";
 import { useGleanClick } from "../../../telemetry/glean-context";
 import { OFFER_OVERVIEW_CLICK } from "../../../telemetry/constants";
 import LogInLink from "../../../ui/atoms/login-link";
+import React from "react";
+
+const Stripe = React.lazy(() => import("./stripe"));
 
 export enum Period {
   Month,
@@ -167,6 +170,7 @@ function OfferDetails({
     }).format(monthlyPrice / 100);
   return (
     <section className="subscribe-detail" id={offerDetails.id}>
+      <Stripe></Stripe>
       <h3>{offerDetails.name}</h3>
       <div className="sub-info">
         {(displayMonthlyPrice && (

client/src/plus/offer-overview/offer-overview-subscribe/stripe.tsx

@@ -0,0 +1,4 @@
+import "@stripe/stripe-js";
+export default function Stripe() {
+  return <></>;
+}

libs/constants/index.js

@@ -69,6 +69,8 @@ export const CSP_SCRIPT_SRC_VALUES = [
   "assets.codepen.io",
   "production-assets.codepen.io",
 
+  "https://js.stripe.com",
+
   /*
    * Inline scripts (defined in `client/public/index.html`).
    *
@@ -104,6 +106,7 @@ export const CSP_DIRECTIVES = {
 
     "www.google-analytics.com",
     "stats.g.doubleclick.net",
+    "https://api.stripe.com",
   ],
   "font-src": ["'self'"],
   "frame-src": [
@@ -122,6 +125,7 @@ export const CSP_DIRECTIVES = {
     "www.youtube-nocookie.com",
     "codepen.io",
     "survey.alchemer.com",
+    "https://js.stripe.com",
   ],
   "img-src": [
     "'self'",

package.json

@@ -72,6 +72,7 @@
     "@mozilla/glean": "2.0.5",
     "@sentry/integrations": "^7.75.1",
     "@sentry/node": "^7.75.1",
+    "@stripe/stripe-js": "^2.1.10",
     "@use-it/interval": "^1.0.0",
     "@vscode/ripgrep": "^1.15.6",
     "@webref/css": "^6.0.0",

yarn.lock

@@ -2460,6 +2460,11 @@
   dependencies:
     "@sinonjs/commons" "^2.0.0"
 
+"@stripe/stripe-js@^2.1.10":
+  version "2.1.10"
+  resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-2.1.10.tgz#d5f0a85def710e7a798e18e9950c4ef619dab917"
+  integrity sha512-h79zhwvxAJVAvtVjtMoz++DtwI7GdcEItmTC0P2gciZoFUeAO6XX9DL+UXm9uADiEaUvTKqrExYwtBTlMYAaPA==
+
 "@supabase/functions-js@^2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@supabase/functions-js/-/functions-js-2.1.5.tgz#ed1b85f499dfda21d40fe39b86ab923117cb572b"