{"id":3431,"date":"2022-08-30T14:56:58","date_gmt":"2022-08-30T12:56:58","guid":{"rendered":"https:\/\/blog.tomayac.com\/2022\/08\/30\/things-not-available-when-someone-blocks-all-cookies\/"},"modified":"2022-08-30T14:56:58","modified_gmt":"2022-08-30T12:56:58","slug":"things-not-available-when-someone-blocks-all-cookies","status":"publish","type":"post","link":"https:\/\/tomayac.com\/wordpress\/2022\/08\/30\/things-not-available-when-someone-blocks-all-cookies\/","title":{"rendered":"Things not available when someone blocks all cookies"},"content":{"rendered":"\n\t\t\t<p>The other day, I received a harmless-looking\n<a href=\"https:\/\/github.com\/tomayac\/SVGcode\/issues\/86\">Issue<\/a> for my app\n<a href=\"https:\/\/svgco.de\/\">SVGcode<\/a>\n(<a href=\"https:\/\/blog.tomayac.com\/2021\/11\/22\/releasing-svgcode\/index.html\">announcement blog post<\/a>). The Issue\nread:<\/p>\n<blockquote>\n<p><strong>Crash when opened with cookies blocked<\/strong><\/p>\n<p>Hey I block cookies by default. Unfortunately your website doesn\u2019t handle that\nnicely despite it not needing (IMO) cookies to operate. I'm getting this\nerror, because blocking cookies also blocks localStorage.<\/p>\n<p><code>Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.<\/code>\nPlease add fallback to js provided localStorage, because it makes the app\nunusable.<\/p>\n<\/blockquote>\n<p>I don't use cookies in the app at all, but for sure, when I disabled cookies in\nChrome, the app wasn't usable.<\/p>\n<p><img src=\"https:\/\/blog.tomayac.com\/images\/chrome-block-cookies.png\" alt=\"Chrome Settings with all cookies blocked.\" \/><\/p>\n<p>All I <em>am<\/em> using is some innocent <code>localStorage<\/code> and IndexedDB to persist user\nsettings like the values of the sliders or the chosen color scheme.<\/p>\n<p>Turns out, with all cookies blocked, Chrome disables a lot of (all?) APIs that\ncan be used to persist data and thus potentially profile users. Here are the\nones that I found:<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/localStorage\"><code>localStorage<\/code><\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/sessionStorage\"><code>sessionStorage<\/code><\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/IndexedDB_API\">IndexedDB<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CacheStorage\">CacheStorage<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/webdatabase\/\">Web SQL<\/a> (obsolete)<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Service_Worker_API\">Service Workers<\/a><\/li>\n<li><a href=\"https:\/\/web.dev\/file-system-access\/#accessing-the-origin-private-file-system\">Origin Private File System<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/requestFileSystem\"><code>webkitRequestFileSystem()<\/code><\/a>\n(obsolete)<\/li>\n<\/ul>\n<p>The code sample below shows all these APIs and the error messages they throw\nwhen you try to use them with cookies blocked.<\/p>\n<pre class=\"language-js\"><code class=\"language-js\">localStorage<span class=\"token punctuation\">;<\/span><br \/><span class=\"token comment\">\/\/ Uncaught DOMException: Failed to read the 'localStorage' property from Window: Access is denied for this document.<\/span><br \/><br \/>sessionStorage<span class=\"token punctuation\">;<\/span><br \/><span class=\"token comment\">\/\/ Uncaught DOMException: Failed to read the 'sessionStorage' property from 'Window: Access is denied for this document.<\/span><br \/><br \/><span class=\"token keyword\">await<\/span> caches<span class=\"token punctuation\">.<\/span><span class=\"token function\">open<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'test'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/><span class=\"token comment\">\/\/ Uncaught DOMException: An attempt was made to break through the security policy of the user agent.<\/span><br \/><br \/><span class=\"token keyword\">const<\/span> openRequest <span class=\"token operator\">=<\/span> indexedDB<span class=\"token punctuation\">.<\/span><span class=\"token function\">open<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'test'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>openRequest<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">onerror<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>  console<span class=\"token punctuation\">.<\/span><span class=\"token function\">error<\/span><span class=\"token punctuation\">(<\/span>openRequest<span class=\"token punctuation\">.<\/span>error<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br \/><span class=\"token comment\">\/\/ DOMException: The user denied permission to access the database.<\/span><br \/><br \/><span class=\"token function\">openDatabase<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'test'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'1'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">'test'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/><span class=\"token comment\">\/\/ Uncaught DOMException: An attempt was made to break through the security policy of the user agent.<\/span><br \/><br \/><span class=\"token keyword\">await<\/span> navigator<span class=\"token punctuation\">.<\/span>serviceWorker<span class=\"token punctuation\">.<\/span><span class=\"token function\">register<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/><span class=\"token comment\">\/\/ Uncaught DOMException: Failed to register a ServiceWorker for scope ('https:\/\/example.com\/') with script ('https:\/\/example.com\/'): The user denied permission to use Service Worker.<\/span><br \/><br \/><span class=\"token keyword\">await<\/span> navigator<span class=\"token punctuation\">.<\/span>storage<span class=\"token punctuation\">.<\/span><span class=\"token function\">getDirectory<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/><span class=\"token comment\">\/\/ Uncaught DOMException: Storage directory access is denied.<\/span><br \/><br \/><span class=\"token function\">webkitRequestFileSystem<\/span><span class=\"token punctuation\">(<\/span><br \/>  window<span class=\"token punctuation\">.<\/span><span class=\"token constant\">PERSISTENT<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">err<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> console<span class=\"token punctuation\">.<\/span><span class=\"token function\">error<\/span><span class=\"token punctuation\">(<\/span>err<span class=\"token punctuation\">)<\/span><br \/><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/><span class=\"token comment\">\/\/ DOMException: An ongoing operation was aborted, typically with a call to abort().<\/span><br \/><br \/><span class=\"token function\">webkitRequestFileSystem<\/span><span class=\"token punctuation\">(<\/span><br \/>  window<span class=\"token punctuation\">.<\/span><span class=\"token constant\">TEMPORARY<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>  <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">err<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> console<span class=\"token punctuation\">.<\/span><span class=\"token function\">error<\/span><span class=\"token punctuation\">(<\/span>err<span class=\"token punctuation\">)<\/span><br \/><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/><span class=\"token comment\">\/\/ DOMException: An ongoing operation was aborted, typically with a call to abort().<\/span><\/code><\/pre>\n<p>Did I miss anything? If so, please let me know!<\/p>\n<p><img src=\"https:\/\/blog.tomayac.com\/images\/chrome-cookie-errors.png\" alt=\"Console errors when trying to access localStorage, sessionStorage, the Cache API, IndexedDB, and Web SQL.\" \/><\/p>\n<p>The fix for the Issue was annoying, but simple. Always\n<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/try...catch\"><code>try...catch<\/code><\/a>\nany potentially blocked calls:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/tomayac\/SVGcode\/commit\/b9d2c59bc579c103b8ac154432d65eec9688e853\">Commit <code>b9d2c59<\/code><\/a><\/li>\n<li><a href=\"https:\/\/github.com\/tomayac\/SVGcode\/commit\/036ddd27cbcc7923b0f8da7072a34a0e3de764b1\">Commit <code>036ddd2<\/code><\/a><\/li>\n<\/ul>\n<p><img src=\"https:\/\/blog.tomayac.com\/images\/svgcode-errors.png\" alt=\"SVGcode app with blocked cookies working and showing caught exceptions in the DevTools console.\" \/><\/p>\n<p>Please <a href=\"https:\/\/github.com\/tomayac\/SVGcode\/issues\/\">report<\/a> any other errors you\nencounter (I don't care for the analytics script failing). And thanks,\n<a href=\"https:\/\/github.com\/JakubekWeg\">@JakubekWeg<\/a> for caring enough to having opened\nthis Issue! Jakub is the proof that users exist who block any and all cookies.\nCheck your error logs, you might be losing users, too!<\/p>\n<p>(On a tangent, <a href=\"https:\/\/developer.mozilla.org\/en-US\/\">MDN<\/a> is completely broken\nwith cookies blocked, too. I was about to report this problem (because I care\nand love MDN \ud83d\ude0d), when I discovered a\n<a href=\"https:\/\/github.com\/mdn\/yari\/pull\/6352\">PR<\/a> is already under way that fixes the\n<a href=\"https:\/\/github.com\/mdn\/yari\/issues\/6758\">Issue<\/a>. Thanks,\n<a href=\"https:\/\/github.com\/bershanskiy\">@bershanskiy<\/a>!)<\/p>\n<p><img src=\"https:\/\/blog.tomayac.com\/images\/mdn-error.png\" alt=\"MDN with blocked cookies\" \/><\/p>\n\n\t\t\t<p>\n\t\t\t\t<img alt=\"Thomas Steiner\" width=\"32\" height=\"32\" src=\"https:\/\/blog.tomayac.com\/feed.php?dl=https%3A%2F%2Fblog.tomayac.com%2F2022%2F08%2F30%2Fthings-not-available-when-someone-blocks-all-cookies%2F&dp=%2F2022%2F08%2F30%2Fthings-not-available-when-someone-blocks-all-cookies%2F&dt=Things%20not%20available%20when%20someone%20blocks%20all%20cookies\" alt=\"\">\n\t\t\t\t<br\/>This post appeared first on <a href=\"https:\/\/blog.tomayac.com\/2022\/08\/30\/things-not-available-when-someone-blocks-all-cookies\/\">https:\/\/blog.tomayac.com\/2022\/08\/30\/things-not-available-when-someone-blocks-all-cookies\/<\/a>.\n\t\t\t<\/p>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\t\t\tThe other day, I received a harmless-looking<br \/>\nIssue for my app<br \/>\nSVGcode<br \/>\n(announcement blog post). The Issue<br \/>\nread:<\/p>\n<p>Crash when opened with cookies blocked<br \/>\nHey I block cookies by default. Unfortunately your website doesn\u2019t handle that<br \/>\nnicely despite it&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"intlwemo_wallet_address":"","footnotes":""},"categories":[],"tags":[],"class_list":["post-3431","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/comments?post=3431"}],"version-history":[{"count":6,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3431\/revisions"}],"predecessor-version":[{"id":3476,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3431\/revisions\/3476"}],"wp:attachment":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/media?parent=3431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/categories?post=3431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/tags?post=3431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}