Merge pull request #1911 from ShyamGadde/fix/od-on-non-https-site

Handle missing Web Crypto API in non-HTTPS contexts

Author: westonruter

plugins/optimization-detective/detect.js

@@ -154,35 +154,52 @@ function getGroupForViewportWidth( viewportWidth, urlMetricGroupStatuses ) {
  * @param {string}               currentETag          - Current ETag.
  * @param {string}               currentUrl           - Current URL.
  * @param {URLMetricGroupStatus} urlMetricGroupStatus - URL Metric group status.
- * @return {Promise<string>} Session storage key.
+ * @param {Logger}               logger               - Logger.
+ * @return {Promise<string|null>} Session storage key for the current URL or null if crypto is not available or caused an error.
  */
 async function getAlreadySubmittedSessionStorageKey(
 	currentETag,
 	currentUrl,
-	urlMetricGroupStatus
+	urlMetricGroupStatus,
+	{ warn, error }
 ) {
-	const message = [
-		currentETag,
-		currentUrl,
-		urlMetricGroupStatus.minimumViewportWidth,
-		urlMetricGroupStatus.maximumViewportWidth || '',
-	].join( '-' );
+	if ( ! window.crypto || ! window.crypto.subtle ) {
+		warn(
+			'Unable to generate sessionStorage key for already-submitted URL since crypto is not available, likely due to to the page not being served via HTTPS.'
+		);
+		return null;
+	}
 
-	/*
-	 * Note that the components are hashed for a couple of reasons:
-	 *
-	 * 1. It results in a consistent length string devoid of any special characters that could cause problems.
-	 * 2. Since the key includes the URL, hashing it avoids potential privacy concerns where the sessionStorage is
-	 *    examined to see which URLs the client went to.
-	 *
-	 * The SHA-1 algorithm is chosen since it is the fastest and there is no need for cryptographic security.
-	 */
-	const msgBuffer = new TextEncoder().encode( message );
-	const hashBuffer = await crypto.subtle.digest( 'SHA-1', msgBuffer );
-	const hashHex = Array.from( new Uint8Array( hashBuffer ) )
-		.map( ( b ) => b.toString( 16 ).padStart( 2, '0' ) )
-		.join( '' );
-	return `odSubmitted-${ hashHex }`;
+	try {
+		const message = [
+			currentETag,
+			currentUrl,
+			urlMetricGroupStatus.minimumViewportWidth,
+			urlMetricGroupStatus.maximumViewportWidth || '',
+		].join( '-' );
+
+		/*
+		 * Note that the components are hashed for a couple of reasons:
+		 *
+		 * 1. It results in a consistent length string devoid of any special characters that could cause problems.
+		 * 2. Since the key includes the URL, hashing it avoids potential privacy concerns where the sessionStorage is
+		 *    examined to see which URLs the client went to.
+		 *
+		 * The SHA-1 algorithm is chosen since it is the fastest and there is no need for cryptographic security.
+		 */
+		const msgBuffer = new TextEncoder().encode( message );
+		const hashBuffer = await crypto.subtle.digest( 'SHA-1', msgBuffer );
+		const hashHex = Array.from( new Uint8Array( hashBuffer ) )
+			.map( ( b ) => b.toString( 16 ).padStart( 2, '0' ) )
+			.join( '' );
+		return `odSubmitted-${ hashHex }`;
+	} catch ( err ) {
+		error(
+			'Unable to generate sessionStorage key for already-submitted URL due to error:',
+			err
+		);
+		return null;
+	}
 }
 
 /**
@@ -354,7 +371,8 @@ export default async function detect( {
 	webVitalsLibrarySrc,
 	urlMetricGroupCollection,
 } ) {
-	const { log, warn, error } = createLogger( isDebug, consoleLogPrefix );
+	const logger = createLogger( isDebug, consoleLogPrefix );
+	const { log, warn, error } = logger;
 
 	if ( isDebug ) {
 		const allUrlMetrics = /** @type Array<UrlMetricDebugData> */ [];
@@ -396,9 +414,13 @@ export default async function detect( {
 		await getAlreadySubmittedSessionStorageKey(
 			currentETag,
 			currentUrl,
-			urlMetricGroupStatus
+			urlMetricGroupStatus,
+			logger
 		);
-	if ( alreadySubmittedSessionStorageKey in sessionStorage ) {
+	if (
+		null !== alreadySubmittedSessionStorageKey &&
+		alreadySubmittedSessionStorageKey in sessionStorage
+	) {
 		const previousVisitTime = parseInt(
 			sessionStorage.getItem( alreadySubmittedSessionStorageKey ),
 			10
@@ -801,10 +823,12 @@ export default async function detect( {
 	setStorageLock( getCurrentTime() );
 
 	// Remember that the URL Metric was submitted for this URL to avoid having multiple entries submitted by the same client.
-	sessionStorage.setItem(
-		alreadySubmittedSessionStorageKey,
-		String( getCurrentTime() )
-	);
+	if ( null !== alreadySubmittedSessionStorageKey ) {
+		sessionStorage.setItem(
+			alreadySubmittedSessionStorageKey,
+			String( getCurrentTime() )
+		);
+	}
 
 	const message = `Sending URL Metric (${ jsonBody.length.toLocaleString() } bytes, ${ Math.round(
 		percentOfBudget