Skip to content

Commit d5679ec

Browse files
westonruterwestonruter
committed
Make already-submitted sessionStorage key optional if crypto not available
1 parent a66325a commit d5679ec

File tree

1 file changed

+57
-50
lines changed

1 file changed

+57
-50
lines changed

‎plugins/optimization-detective/detect.js

+57-50
Original file line numberDiff line numberDiff line change
@@ -154,39 +154,52 @@ function getGroupForViewportWidth( viewportWidth, urlMetricGroupStatuses ) {
154154
* @param {string} currentETag - Current ETag.
155155
* @param {string} currentUrl - Current URL.
156156
* @param {URLMetricGroupStatus} urlMetricGroupStatus - URL Metric group status.
157-
* @return {Promise<string>} Session storage key.
157+
* @param {Logger} logger - Logger.
158+
* @return {Promise<string|null>} Session storage key for the current URL or null if crypto is not available or caused an error.
158159
*/
159160
async function getAlreadySubmittedSessionStorageKey(
160161
currentETag,
161162
currentUrl,
162-
urlMetricGroupStatus
163+
urlMetricGroupStatus,
164+
{ warn, error }
163165
) {
164166
if ( ! window.crypto || ! window.crypto.subtle ) {
165-
throw new Error( 'Web Crypto API is unavailable' );
167+
warn(
168+
'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.'
169+
);
170+
return null;
166171
}
167172

168-
const message = [
169-
currentETag,
170-
currentUrl,
171-
urlMetricGroupStatus.minimumViewportWidth,
172-
urlMetricGroupStatus.maximumViewportWidth || '',
173-
].join( '-' );
174-
175-
/*
176-
* Note that the components are hashed for a couple of reasons:
177-
*
178-
* 1. It results in a consistent length string devoid of any special characters that could cause problems.
179-
* 2. Since the key includes the URL, hashing it avoids potential privacy concerns where the sessionStorage is
180-
* examined to see which URLs the client went to.
181-
*
182-
* The SHA-1 algorithm is chosen since it is the fastest and there is no need for cryptographic security.
183-
*/
184-
const msgBuffer = new TextEncoder().encode( message );
185-
const hashBuffer = await crypto.subtle.digest( 'SHA-1', msgBuffer );
186-
const hashHex = Array.from( new Uint8Array( hashBuffer ) )
187-
.map( ( b ) => b.toString( 16 ).padStart( 2, '0' ) )
188-
.join( '' );
189-
return `odSubmitted-${ hashHex }`;
173+
try {
174+
const message = [
175+
currentETag,
176+
currentUrl,
177+
urlMetricGroupStatus.minimumViewportWidth,
178+
urlMetricGroupStatus.maximumViewportWidth || '',
179+
].join( '-' );
180+
181+
/*
182+
* Note that the components are hashed for a couple of reasons:
183+
*
184+
* 1. It results in a consistent length string devoid of any special characters that could cause problems.
185+
* 2. Since the key includes the URL, hashing it avoids potential privacy concerns where the sessionStorage is
186+
* examined to see which URLs the client went to.
187+
*
188+
* The SHA-1 algorithm is chosen since it is the fastest and there is no need for cryptographic security.
189+
*/
190+
const msgBuffer = new TextEncoder().encode( message );
191+
const hashBuffer = await crypto.subtle.digest( 'SHA-1', msgBuffer );
192+
const hashHex = Array.from( new Uint8Array( hashBuffer ) )
193+
.map( ( b ) => b.toString( 16 ).padStart( 2, '0' ) )
194+
.join( '' );
195+
return `odSubmitted-${ hashHex }`;
196+
} catch ( err ) {
197+
error(
198+
'Unable to generate sessionStorage key for already-submitted URL due to error:',
199+
err
200+
);
201+
return null;
202+
}
190203
}
191204

192205
/**
@@ -358,7 +371,8 @@ export default async function detect( {
358371
webVitalsLibrarySrc,
359372
urlMetricGroupCollection,
360373
} ) {
361-
const { log, warn, error } = createLogger( isDebug, consoleLogPrefix );
374+
const logger = createLogger( isDebug, consoleLogPrefix );
375+
const { log, warn, error } = logger;
362376

363377
if ( isDebug ) {
364378
const allUrlMetrics = /** @type Array<UrlMetricDebugData> */ [];
@@ -396,26 +410,17 @@ export default async function detect( {
396410
}
397411

398412
// Abort if the client already submitted a URL Metric for this URL and viewport group.
399-
let alreadySubmittedSessionStorageKey;
400-
try {
401-
alreadySubmittedSessionStorageKey =
402-
await getAlreadySubmittedSessionStorageKey(
403-
currentETag,
404-
currentUrl,
405-
urlMetricGroupStatus
406-
);
407-
} catch ( err ) {
408-
if ( err.message === 'Web Crypto API is unavailable' ) {
409-
error(
410-
'Unable to create session storage key: Web Crypto API is not available. This API is only available in secure contexts (HTTPS). Detection cannot proceed. If you are testing locally, ensure you use HTTPS or run on localhost.'
411-
);
412-
} else {
413-
error( 'Unable to create session storage key: ' + err.message );
414-
}
415-
return;
416-
}
417-
418-
if ( alreadySubmittedSessionStorageKey in sessionStorage ) {
413+
const alreadySubmittedSessionStorageKey =
414+
await getAlreadySubmittedSessionStorageKey(
415+
currentETag,
416+
currentUrl,
417+
urlMetricGroupStatus,
418+
logger
419+
);
420+
if (
421+
null !== alreadySubmittedSessionStorageKey &&
422+
alreadySubmittedSessionStorageKey in sessionStorage
423+
) {
419424
const previousVisitTime = parseInt(
420425
sessionStorage.getItem( alreadySubmittedSessionStorageKey ),
421426
10
@@ -818,10 +823,12 @@ export default async function detect( {
818823
setStorageLock( getCurrentTime() );
819824

820825
// Remember that the URL Metric was submitted for this URL to avoid having multiple entries submitted by the same client.
821-
sessionStorage.setItem(
822-
alreadySubmittedSessionStorageKey,
823-
String( getCurrentTime() )
824-
);
826+
if ( null !== alreadySubmittedSessionStorageKey ) {
827+
sessionStorage.setItem(
828+
alreadySubmittedSessionStorageKey,
829+
String( getCurrentTime() )
830+
);
831+
}
825832

826833
const message = `Sending URL Metric (${ jsonBody.length.toLocaleString() } bytes, ${ Math.round(
827834
percentOfBudget

0 commit comments

Comments
 (0)