Cloak client secret (#4782)

Co-authored-by: Achyuth Ajoy <[email protected]>

Author: tpaksu

changelog/add-4774-cloak-client-secret

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Adds encryption to the exposed `client_secret` to harden the store against card testing attacks

client/checkout/api/index.js

@@ -9,6 +9,7 @@ import {
 	getPaymentRequestAjaxURL,
 	buildAjaxURL,
 } from '../../payment-request/utils';
+import { decryptClientSecret } from '../utils/encryption';
 
 /**
  * Handles generic connections to the server and Stripe.
@@ -243,7 +244,9 @@ export default class WCPayAPI {
 			// If this is a setup intent we're not processing a platform checkout payment so we can
 			// use the regular getStripe function.
 			if ( isSetupIntent ) {
-				return this.getStripe().confirmCardSetup( clientSecret );
+				return this.getStripe().confirmCardSetup(
+					decryptClientSecret( clientSecret )
+				);
 			}
 
 			// For platform checkout we need the capability to switch up the account ID specifically for
@@ -253,12 +256,19 @@ export default class WCPayAPI {
 					publishableKey,
 					locale,
 					accountIdForIntentConfirmation
-				).confirmCardPayment( clientSecret );
+				).confirmCardPayment(
+					decryptClientSecret(
+						clientSecret,
+						accountIdForIntentConfirmation
+					)
+				);
 			}
 
 			// When not dealing with a setup intent or platform checkout we need to force an account
 			// specific request in Stripe.
-			return this.getStripe( true ).confirmCardPayment( clientSecret );
+			return this.getStripe( true ).confirmCardPayment(
+				decryptClientSecret( clientSecret )
+			);
 		};
 
 		const confirmAction = confirmPaymentOrSetup();
@@ -357,7 +367,9 @@ export default class WCPayAPI {
 			}
 
 			return this.getStripe()
-				.confirmCardSetup( response.data.client_secret )
+				.confirmCardSetup(
+					decryptClientSecret( response.data.client_secret )
+				)
 				.then( ( confirmedSetupIntent ) => {
 					const { setupIntent, error } = confirmedSetupIntent;
 					if ( error ) {
@@ -470,7 +482,7 @@ export default class WCPayAPI {
 			'lock_timeout' === confirmPaymentResult.error.code
 		) {
 			const paymentIntentResult = await stripe.retrievePaymentIntent(
-				paymentIntentSecret
+				decryptClientSecret( paymentIntentSecret )
 			);
 			if (
 				! paymentIntentResult.error &&

client/checkout/blocks/upe-fields.js

@@ -22,6 +22,7 @@ import './style.scss';
 import confirmUPEPayment from './confirm-upe-payment.js';
 import { getConfig } from 'utils/checkout';
 import { getTerms } from '../utils/upe';
+import { decryptClientSecret } from '../utils/encryption';
 import { PAYMENT_METHOD_NAME_CARD, WC_STORE_CART } from '../constants.js';
 import enableStripeLinkPaymentMethod from 'wcpay/checkout/stripe-link';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -419,15 +420,16 @@ const ConsumableWCPayFields = ( { api, ...props } ) => {
 		return null;
 	}
 
-	const options = {
-		clientSecret,
-		appearance,
-		fonts: fontRules,
-		loader: 'never',
-	};
-
 	return (
-		<Elements stripe={ stripe } options={ options }>
+		<Elements
+			stripe={ stripe }
+			options={ {
+				clientSecret: decryptClientSecret( clientSecret ),
+				appearance,
+				fonts: fontRules,
+				loader: 'never',
+			} }
+		>
 			<WCPayUPEFields
 				api={ api }
 				paymentIntentId={ paymentIntentId }

client/checkout/classic/upe.js

@@ -13,6 +13,7 @@ import WCPayAPI from '../api';
 import enqueueFraudScripts from 'fraud-scripts';
 import { getFontRulesFromPage, getAppearance } from '../upe-styles';
 import { getTerms, getCookieValue, isWCPayChosen } from '../utils/upe';
+import { decryptClientSecret } from '../utils/encryption';
 import enableStripeLinkPaymentMethod from '../stripe-link';
 import apiRequest from '../utils/request';
 import showErrorCheckout from '../utils/show-error-checkout';
@@ -237,7 +238,7 @@ jQuery( function ( $ ) {
 		}
 
 		elements = api.getStripe().elements( {
-			clientSecret,
+			clientSecret: decryptClientSecret( clientSecret ),
 			appearance,
 			fonts: getFontRulesFromPage(),
 			loader: 'never',

client/checkout/utils/encryption.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import Utf8 from 'crypto-js/enc-utf8';
+import AES from 'crypto-js/aes';
+import Pkcs7 from 'crypto-js/pad-pkcs7';
+import { getConfig } from 'wcpay/utils/checkout';
+
+export const decryptClientSecret = function (
+	encryptedValue,
+	stripeAccountId = null
+) {
+	if (
+		getConfig( 'isClientEncryptionEnabled' ) &&
+		3 < encryptedValue.length &&
+		'pi_' !== encryptedValue.slice( 0, 3 ) &&
+		'seti_' !== encryptedValue.slice( 0, 5 )
+	) {
+		stripeAccountId = stripeAccountId || getConfig( 'accountId' );
+		return Utf8.stringify(
+			AES.decrypt(
+				encryptedValue,
+				Utf8.parse( stripeAccountId.slice( 5 ) ),
+				{
+					iv: Utf8.parse( 'WC'.repeat( 8 ) ),
+					padding: Pkcs7,
+				}
+			)
+		);
+	}
+	return encryptedValue;
+};

client/data/settings/actions.js

@@ -28,6 +28,12 @@ export function updateIsCardPresentEligible( isEnabled ) {
 	return updateSettingsValues( { is_card_present_eligible: isEnabled } );
 }
 
+export function updateIsClientSecretEncryptionEnabled( isEnabled ) {
+	return updateSettingsValues( {
+		is_client_secret_encryption_enabled: isEnabled,
+	} );
+}
+
 export function updatePaymentRequestButtonType( type ) {
 	return updateSettingsValues( { payment_request_button_type: type } );
 }

client/data/settings/hooks.js

@@ -30,6 +30,19 @@ export const useCardPresentEligible = () => {
 	return [ isCardPresentEligible, updateIsCardPresentEligible ];
 };
 
+export const useClientSecretEncryption = () => {
+	const { updateIsClientSecretEncryptionEnabled } = useDispatch( STORE_NAME );
+
+	const isClientSecretEncryptionEnabled = useSelect( ( select ) => {
+		return select( STORE_NAME ).getIsClientSecretEncryptionEnabled();
+	}, [] );
+
+	return [
+		isClientSecretEncryptionEnabled,
+		updateIsClientSecretEncryptionEnabled,
+	];
+};
+
 export const useEnabledPaymentMethodIds = () => {
 	const { updateEnabledPaymentMethodIds } = useDispatch( STORE_NAME );
 

client/data/settings/selectors.js

@@ -23,6 +23,10 @@ export const getIsWCPayEnabled = ( state ) => {
 	return getSettings( state ).is_wcpay_enabled || false;
 };
 
+export const getIsClientSecretEncryptionEnabled = ( state ) => {
+	return getSettings( state ).is_client_secret_encryption_enabled || false;
+};
+
 export const getEnabledPaymentMethodIds = ( state ) => {
 	return getSettings( state ).enabled_payment_method_ids || EMPTY_ARR;
 };

client/data/settings/test/hooks.js

@@ -18,6 +18,7 @@ import {
 	usePlatformCheckoutEnabledSettings,
 	usePlatformCheckoutCustomMessage,
 	usePlatformCheckoutStoreLogo,
+	useClientSecretEncryption,
 } from '../hooks';
 import { STORE_NAME } from '../../constants';
 
@@ -268,6 +269,39 @@ describe( 'Settings hooks tests', () => {
 		} );
 	} );
 
+	describe( 'useClientSecretEncryption()', () => {
+		test( 'returns and updates client secret encryption settings', () => {
+			const clientSecretEncryptionBeforeUpdate = false;
+			const clientSecretEncryptionAfterUpdate = true;
+
+			actions = {
+				updateIsClientSecretEncryptionEnabled: jest.fn(),
+			};
+
+			selectors = {
+				getIsClientSecretEncryptionEnabled: jest.fn(
+					() => clientSecretEncryptionBeforeUpdate
+				),
+			};
+
+			const [
+				isClientEncryptionEnabled,
+				updateIsClientSecretEncryptionEnabled,
+			] = useClientSecretEncryption();
+
+			updateIsClientSecretEncryptionEnabled(
+				clientSecretEncryptionAfterUpdate
+			);
+
+			expect( isClientEncryptionEnabled ).toEqual(
+				clientSecretEncryptionBeforeUpdate
+			);
+			expect(
+				actions.updateIsClientSecretEncryptionEnabled
+			).toHaveBeenCalledWith( clientSecretEncryptionAfterUpdate );
+		} );
+	} );
+
 	describe( 'usePlatformCheckoutEnabledSettings()', () => {
 		test( 'returns platform checkout setting from selector', () => {
 			actions = {

client/data/settings/test/reducer.js

@@ -18,6 +18,7 @@ import {
 	updateIsPlatformCheckoutEnabled,
 	updatePlatformCheckoutCustomMessage,
 	updatePlatformCheckoutStoreLogo,
+	updateIsClientSecretEncryptionEnabled,
 } from '../actions';
 
 describe( 'Settings reducer tests', () => {
@@ -503,4 +504,48 @@ describe( 'Settings reducer tests', () => {
 			} );
 		} );
 	} );
+
+	describe( 'SET_IS_CLIENT_SECRET_ENCRYPTION_ENABLED', () => {
+		test( 'toggle `data.is_client_secret_encryption_enabled`', () => {
+			const oldState = {
+				data: {
+					is_client_secret_encryption_enabled: false,
+				},
+			};
+
+			const state = reducer(
+				oldState,
+				updateIsClientSecretEncryptionEnabled( true )
+			);
+
+			expect( state.data.is_client_secret_encryption_enabled ).toEqual(
+				true
+			);
+		} );
+
+		test( 'leaves other fields unchanged', () => {
+			const oldState = {
+				foo: 'bar',
+				data: {
+					is_client_secret_encryption_enabled: false,
+					baz: 'quux',
+				},
+				savingError: {},
+			};
+
+			const state = reducer(
+				oldState,
+				updateIsClientSecretEncryptionEnabled( true )
+			);
+
+			expect( state ).toEqual( {
+				foo: 'bar',
+				data: {
+					is_client_secret_encryption_enabled: true,
+					baz: 'quux',
+				},
+				savingError: null,
+			} );
+		} );
+	} );
 } );