Merge pull request #18920 from mozilla/polish-add-hsts-headers

fix(next): resolve CSP and console errors

Author: StaberindeZA

apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/error/page.tsx

@@ -80,7 +80,7 @@ export default async function CheckoutError({
         {
           // Once more conditionals are added, move this to a separate component
           cart.errorReasonId ===
-          CartErrorReasonId.CART_ELIGIBILITY_STATUS_SAME ? (
+            CartErrorReasonId.CART_ELIGIBILITY_STATUS_SAME ? (
             <Image
               src={checkIcon}
               alt="check-icon"

apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/start/page.tsx

@@ -172,7 +172,7 @@ export default async function Checkout({
           className={clsx(
             'font-semibold text-grey-600 text-lg mt-10 mb-5',
             !session?.user?.email &&
-              'cursor-not-allowed relative focus:border-blue-400 focus:outline-none focus:shadow-input-blue-focus after:absolute after:content-[""] after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:opacity-50 after:z-10 select-none'
+            'cursor-not-allowed relative focus:border-blue-400 focus:outline-none focus:shadow-input-blue-focus after:absolute after:content-[""] after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:opacity-50 after:z-10 select-none'
           )}
           data-testid="header-prefix"
         >
@@ -201,7 +201,7 @@ export default async function Checkout({
         className={clsx(
           'font-semibold text-grey-600 text-start',
           !session?.user?.email &&
-            'cursor-not-allowed relative focus:border-blue-400 focus:outline-none focus:shadow-input-blue-focus after:absolute after:content-[""] after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:opacity-50 after:z-10 select-none'
+          'cursor-not-allowed relative focus:border-blue-400 focus:outline-none focus:shadow-input-blue-focus after:absolute after:content-[""] after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:opacity-50 after:z-10 select-none'
         )}
       >
         {l10n.getString(

apps/payments/next/app/[locale]/[offeringId]/[interval]/location/page.tsx

@@ -40,9 +40,9 @@ export default async function Location({
   const taxAddress =
     providedCountryCode && providedPostalCode
       ? {
-          countryCode: providedCountryCode,
-          postalCode: providedPostalCode,
-        }
+        countryCode: providedCountryCode,
+        postalCode: providedPostalCode,
+      }
       : undefined;
 
   const fxaUid = session?.user?.id;

apps/payments/next/middleware.ts

@@ -26,25 +26,14 @@ export function middleware(request: NextRequest) {
   const PROFILE_DEFAULT_IMAGES_URL = process.env.PROFILE_DEFAULT_IMAGES_URL;
   const PROFILE_UPLOADED_IMAGES_URL = process.env.PROFILE_UPLOADED_IMAGES_URL;
 
-  /*
-   * CSP Notes
-   *  - Next.js next/image currently causes an inline style CSP error.
-   *    There is a work around available, however at this time, we've opted
-   *    to use 'unsafe-inline' to match what's in fxa-payments-server
-   *    https://github.com/vercel/next.js/issues/45184
-   */
   const nonce = Buffer.from(crypto.randomUUID()).toString('base64');
   const cspHeader = `
     default-src 'self';
     connect-src 'self' https://api.stripe.com ${PAYPAL_API_URL};
-    frame-src https://js.stripe.com https://hooks.stripe.com ${PAYPAL_API_URL} ${PAYPAL_SCRIPT_URL};
-    script-src 'self' 'nonce-${nonce}' 'strict-dynamic' https: http: 'unsafe-inline' ${
-    process.env.NODE_ENV === 'production' ? '' : `'unsafe-eval'`
-  } https://js.stripe.com ${PAYPAL_SCRIPT_URL};
-    script-src-elem 'self' 'nonce-${nonce}' 'strict-dynamic' https: http: 'unsafe-inline' ${
-    process.env.NODE_ENV === 'production' ? '' : `'unsafe-eval'`
-  } https://js.stripe.com;
-    style-src 'self' 'unsafe-inline';
+    frame-src https://*.js.stripe.com https://js.stripe.com https://hooks.stripe.com ${PAYPAL_API_URL} ${PAYPAL_SCRIPT_URL};
+    script-src 'self' 'nonce-${nonce}' ${process.env.NODE_ENV === 'production' ? '' : `'unsafe-eval'`
+    } https://*.js.stripe.com https://js.stripe.com ${PAYPAL_SCRIPT_URL};
+    style-src 'self' 'unsafe-hashes' 'sha256-0hAheEzaMe6uXIKV4EehS9pu1am1lj/KnnzrOYqckXk=' 'sha256-GsQC5AaXpdCaKTyWbxBzn7nitfp0Otwn7I/zu0rUKOs=' 'sha256-zlqnbDt84zf1iSefLU/ImC54isoprH/MRiVZGskwexk=';
     img-src 'self' blob: data: ${accountsStaticCdn} ${PAYPAL_OBJECTS} ${PROFILE_CLIENT_URL} ${PROFILE_DEFAULT_IMAGES_URL} ${PROFILE_UPLOADED_IMAGES_URL};
     font-src 'self';
     object-src 'none';

apps/payments/next/next.config.js

@@ -89,6 +89,19 @@ const nextConfig = {
       },
     ],
   },
+  async headers() {
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          {
+            key: 'Strict-Transport-Security',
+            value: 'max-age=63072000; includeSubDomains; preload'
+          }
+        ],
+      },
+    ]
+  },
 };
 
 /**

libs/payments/ui/src/lib/client/components/BaseButton/index.tsx

@@ -2,6 +2,8 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+import { forwardRef } from "react";
+
 export enum ButtonVariant {
   Primary,
   Secondary,
@@ -14,7 +16,7 @@ interface BaseButtonProps
   variant?: ButtonVariant;
 }
 
-export function BaseButton({ children, variant, ...props }: BaseButtonProps) {
+export const BaseButton = forwardRef(function BaseButton({ children, variant, ...props }: BaseButtonProps, ref: React.Ref<HTMLButtonElement>) {
   let variantStyles = '';
   switch (variant) {
     case ButtonVariant.Primary:
@@ -33,8 +35,9 @@ export function BaseButton({ children, variant, ...props }: BaseButtonProps) {
     <button
       {...props}
       className={`flex items-center justify-center h-12 rounded-md p-4 z-10 cursor-pointer aria-disabled:relative aria-disabled:after:absolute aria-disabled:after:content-[''] aria-disabled:after:top-0 aria-disabled:after:left-0 aria-disabled:after:w-full aria-disabled:after:h-full aria-disabled:after:bg-white aria-disabled:after:opacity-50 aria-disabled:after:z-30 aria-disabled:border-none ${props.className} ${variantStyles}`}
+      ref={ref}
     >
       {children}
     </button>
   );
-}
+})

libs/payments/ui/src/lib/client/components/SelectTaxLocation/index.tsx

@@ -25,13 +25,13 @@ type SaveActionSignature = (
   postalCode: string
 ) => Promise<
   | {
-      ok: false;
-      error: string | { message: string; data: any };
-    }
+    ok: false;
+    error: string | { message: string; data: any };
+  }
   | {
-      ok: true;
-      data: any;
-    }
+    ok: true;
+    data: any;
+  }
   | void
 >;
 

libs/payments/ui/src/lib/client/components/SubmitButton/index.tsx

@@ -8,19 +8,20 @@ import Image from 'next/image';
 import { useFormStatus } from 'react-dom';
 import spinnerWhiteImage from '@fxa/shared/assets/images/spinnerwhite.svg';
 import { BaseButton, ButtonVariant } from '../BaseButton';
+import { forwardRef } from 'react';
 
 interface SubmitButtonProps {
   children: React.ReactNode;
   variant: ButtonVariant;
 }
 
-export function SubmitButton({
+export const SubmitButton = forwardRef(function SubmitButton({
   children,
   disabled,
   className,
   variant,
   ...otherProps
-}: SubmitButtonProps & React.HTMLProps<HTMLButtonElement>) {
+}: SubmitButtonProps & React.HTMLProps<HTMLButtonElement>, ref: React.Ref<HTMLButtonElement>) {
   const { pending } = useFormStatus();
 
   return (
@@ -30,6 +31,7 @@ export function SubmitButton({
       disabled={pending || disabled}
       type="submit"
       className={className}
+      ref={ref}
     >
       {pending ? (
         <>
@@ -45,4 +47,4 @@ export function SubmitButton({
       )}
     </BaseButton>
   );
-}
+})