bug: webui not loading in firefox with cookies and localStorage disabled

[ivan386]

Describe the bug
I try to open webui and browser show me nothing.

My browser Firefox in private mod. All cookies disabled in settings. It is block access to local storage.

In console i see errors:

First error:

17:08:30.946 Uncaught DOMException: The operation is insecure.
    value i18nextLocalStorageBackend.js:50
    e i18nextLocalStorageBackend.js:60
    value i18nextChainedBackend.js:19
    value i18nextChainedBackend.js:49
    n i18next.js:1925
    value i18next.js:2361
    61455 i18n.js:19
    Webpack 4
        __webpack_require__
        <anonymous>
        <anonymous>
        <anonymous>
main.20056d59.js:2
    value i18nextLocalStorageBackend.js:50
    e i18nextLocalStorageBackend.js:60
    value i18nextChainedBackend.js:19
    forEach self-hosted:203
    value i18nextChainedBackend.js:49
    n i18next.js:1925
    value i18next.js:2361
    61455 i18n.js:19
    Webpack 4
        __webpack_require__
        <анонимный>
        <анонимный>
        <анонимный>

Error happen here in code (i18nextLocalStorageBackend.js:50):

function getDefaults() {
  return {
    prefix: 'i18next_res_',
    expirationTime: 7 * 24 * 60 * 60 * 1000,
    defaultVersion: undefined,
    versions: {},
    store: typeof window !== 'undefined' ? window.localStorage : null /* error on this line */
  };
}

Second error:

17:08:30.988 Uncaught (in promise) DOMException: The operation is insecure.
    n money-clip.m.js:32
2 main.20056d59.js:2

Error happen here in code (money-clip.m.js:32):

function createStore(dbName, storeName) {
    const dbp = idbReady().then(() => {
        const request = indexedDB.open(dbName); /* error on this line */
        request.onupgradeneeded = () => request.result.createObjectStore(storeName);
        return promisifyRequest(request);
    });
    return (txMode, callback) => dbp.then((db) => callback(db.transaction(storeName, txMode).objectStore(storeName)));
}

To Reproduce
Steps to reproduce the behavior:

1. Disable all cookies in Firefox
2. Open webui in private mod

Expected behavior
Web UI is shown

Desktop (please complete the following information):

• OS: Windows 7
• Browser Firefox
• Version 115.5.0esr (64-разрядный)

[welcome]

Thank you for submitting your first issue to this repository! A maintainer will be here shortly to triage and review.
In the meantime, please double-check that you have provided all the necessary information to make this process easy! Any information that can help save additional round trips is useful! We currently aim to give initial feedback within two business days. If this does not happen, feel free to leave a comment.
Please keep an eye on how this issue will be labeled, as labels give an overview of priorities, assignments and additional actions requested by the maintainers:

• "Priority" labels will show how urgent this is for the team.
• "Status" labels will show if this is ready to be worked on, blocked, or in progress.
• "Need" labels will indicate if additional input or analysis is required.

Finally, remember to use https://discuss.ipfs.io if you just need general support.

[whizzzkid]

Thanks for submitting this issue @ivan386 looks like an issue with the underlying https://github.com/i18next/i18next-localstorage-backend package. Did you also disable access to localstorage? the package uses localStorage to store defaults and not cookies. Can you try enabling localStorage to see if it works?

[ivan386]

@whizzzkid localstorage are blocked with cookie blocking. When i disable protection which allows cookie and localstorage it works fine.

In first place you can wrap around line with localStorage in try{}catch(e){}. Will it works with second error i don't know.

[github-actions]

Oops, seems like we needed more information for this issue, please comment with more details or this issue will be closed in 7 days.

[whizzzkid]

Thanks for the update @ivan386, I am still not sure if this can be entertained as a bug on ipfs-webui, how critical is using ipfs-webui with cookies disabled?

Maybe, this: #2192 fixes your concern (based on: https://github.com/i18next/i18next-localstorage-backend/tree/e04dc1ff60e521e39caf13a875e7eb76d19fcd20?tab=readme-ov-file#cache-backend-options)

However, I am not sure how the translation options behave in such scenario, the changes will definitely not persist but to counter that you can use ?lng=<lang> in the URL as described here in the original PR: #1658

[whizzzkid]

@ivan386 can you try https://bafybeie6bwkdwvksivqa2xn33kufg7jjgzdcnen6olfa6dwblj2k3xfgl4.on.fleek.co/

[ivan386]

@whizzzkid same errors

00:12:46.779 Uncaught DOMException: The operation is insecure.
    32821 i18n.js:30
    Webpack 4
main.c684dc3e.js:2
00:12:46.789 Uncaught (in promise) DOMException: The operation is insecure.
    n money-clip.m.js:32
2 main.c684dc3e.js:2

i18n.js:30

        { // LocalStorageBackend
          defaultVersion: version,
          expirationTime: (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') ? 1 : 7 * 24 * 60 * 60 * 1000,
          store: typeof window !== 'undefined' && 'localStorage' in window ? window.localStorage : null /* error on this line */
        },

money-clip.m.js:32

function createStore(dbName, storeName) {
    const dbp = idbReady().then(() => {
        const request = indexedDB.open(dbName); /* error on this line */
        request.onupgradeneeded = () => request.result.createObjectStore(storeName);
        return promisifyRequest(request);
    });
    return (txMode, callback) => dbp.then((db) => callback(db.transaction(storeName, txMode).objectStore(storeName)));
}

localStorage exist in window

00:19:05.120 'localStorage' in window
00:19:05.170 true

but if i try to get it

00:26:52.819 window.localStorage
00:26:52.849 Uncaught DOMException: The operation is insecure.
    <anonymous> debugger eval code:1
debugger eval code:1:1

[whizzzkid]

@ivan386 I updated #2192 to not load localStorage backend entirely. Please try once again: https://bafybeih4ludx4qgmotk44fjt66elhbnxnziknvhrbvkg3pvz4ira7rwwti.on.fleek.co/

[ivan386]

@whizzzkid same errors

18:03:52.693 Uncaught DOMException: The operation is insecure.
    32821 i18n.js:32
    Webpack 4
main.df1fdf8c.js:2
    32821 i18n.js:32
    Webpack 4
18:03:52.705 Uncaught (in promise) DOMException: The operation is insecure.
    n money-clip.m.js:32
2 main.df1fdf8c.js:2

i18n.js:

if (typeof window !== 'undefined' && 'localStorage' in window) {
  i18nBackend = [LocalStorageBackend, ...i18nBackend]
  i18nBackendOptions = [
    { // LocalStorageBackend
      defaultVersion: version,
      expirationTime: (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') ? 1 : 7 * 24 * 60 * 60 * 1000,
      store: typeof window !== 'undefined' && 'localStorage' in window ? window.localStorage : null /* error on this line */
    },
    ...i18nBackendOptions
  ]
}

money-clip.m.js:

function createStore(dbName, storeName) {
    const dbp = idbReady().then(() => {
        const request = indexedDB.open(dbName); /* error on this line */
        request.onupgradeneeded = () => request.result.createObjectStore(storeName);
        return promisifyRequest(request);
    });
    return (txMode, callback) => dbp.then((db) => callback(db.transaction(storeName, txMode).objectStore(storeName)));
}

maybe you can change part in i18n.js

window.localStorage

to

(()=>{try{return window.localStorage}catch(e){}})()

[github-actions]

Oops, seems like we needed more information for this issue, please comment with more details or this issue will be closed in 7 days.

[github-actions]

This issue was closed because it is missing author input.

[SgtPooki]

@ivan386 can you confirm that the latest in #2192 works for you?

[SgtPooki]

I can reproduce this error by explicitly setting Block for https://bafybeih4ludx4qgmotk44fjt66elhbnxnziknvhrbvkg3pvz4ira7rwwti.on.fleek.co/#/welcome in firefox settings:

However, I don't think we have the bandwidth to work around someone explicitly disabling functionality this app requires to function (translations, etc..)

I would recommend adding an exception to allow webui.ipfs.io or whichever URL you're using to access the webui

If someone can figure out a way to support browsers where these functionalities are disabled without hindering functionality for more common usecases, I'm all for approving a PR.