fix: create more reliable infinite loop protection

In some contexts, the navigator may say cookies are enabled, but setting
the actual cookie does nothing. So we set a temporary cookie, check that
it was set, and only if that works will we proceed.

Also refactored the code to make early exits possible.

Author: kentcdodds

src/index.ts

@@ -50,32 +50,44 @@ export function getHintUtils<Hints extends Record<string, ClientHint<any>>>(
 	 */
 	function getClientHintCheckScript() {
 		return `
-const cookies = document.cookie.split(';').map(c => c.trim()).reduce((acc, cur) => {
-	const [key, value] = cur.split('=');
-	acc[key] = value;
-	return acc;
-}, {});
-let cookieChanged = false;
-const hints = [
-${Object.values(hints)
-	.map((hint) => {
-		const cookieName = JSON.stringify(hint.cookieName)
-		return `{ name: ${cookieName}, actual: String(${hint.getValueCode}), value: cookies[${cookieName}] != null ? cookies[${cookieName}] : encodeURIComponent("${hint.fallback}") }`
-	})
-	.join(',\n')}
-];
-for (const hint of hints) {
-	document.cookie = encodeURIComponent(hint.name) + '=' + encodeURIComponent(hint.actual) + '; Max-Age=31536000; path=/';
-	if (decodeURIComponent(hint.value) !== hint.actual) {
-		cookieChanged = true;
+// This block of code allows us to check if the client hints have changed and
+// force a reload of the page with updated hints if they have so you don't get
+// a flash of incorrect content.
+function checkClientHints() {
+	if (!navigator.cookieEnabled) return;
+
+	// set a short-lived cookie to make sure we can set cookies
+	document.cookie = "canSetCookies=1; Max-Age=60; SameSite=Lax";
+	const canSetCookies = document.cookie.includes("canSetCookies=1");
+	document.cookie = "canSetCookies=; Max-Age=-1; path=/";
+	if (!canSetCookies) return;
+
+	const cookies = document.cookie.split(';').map(c => c.trim()).reduce((acc, cur) => {
+		const [key, value] = cur.split('=');
+		acc[key] = value;
+		return acc;
+	}, {});
+
+	let cookieChanged = false;
+	const hints = [
+	${Object.values(hints)
+		.map((hint) => {
+			const cookieName = JSON.stringify(hint.cookieName)
+			return `{ name: ${cookieName}, actual: String(${hint.getValueCode}), value: cookies[${cookieName}] != null ? cookies[${cookieName}] : encodeURIComponent("${hint.fallback}") }`
+		})
+		.join(',\n')}
+	];
+	for (const hint of hints) {
+		document.cookie = encodeURIComponent(hint.name) + '=' + encodeURIComponent(hint.actual) + '; Max-Age=31536000; path=/';
+		if (decodeURIComponent(hint.value) !== hint.actual) {
+			cookieChanged = true;
+		}
 	}
+	if (cookieChanged) window.location.reload();
 }
-// if the cookie changed, reload the page, unless the browser doesn't support
-// cookies (in which case we would enter an infinite loop of reloads)
-if (cookieChanged && navigator.cookieEnabled) {
-	window.location.reload();
-}
-			`
+
+checkClientHints();
+`
 	}
 
 	return { getHints, getClientHintCheckScript }