Connecting to a chain on `ws` localhost with polkadot.js app fails when running in brave browser

Question

I know this question is more related to the usage of Brave browser, but the chance of getting a relevant answer would be less in brave forums where the general understanding of polkatot-js is less

Connecting to a chain on wson localhost fails when running in Brave browser, it used to work up to at least last week but now it get stuck on Initializing connection:

The chain is still running, I verified the connection with both Firefox and Chromium with a link like this: https://polkadot.js.org/apps/?rpc=ws%3A%2F%2F127.0.0.1%3A9943#/accounts

The part of the question relevant in this forum is: Is there anything in the polkadotjs app changed recently which could cause this?

Update:

Here is a transcribed version of above logs if that is a clue:

WS endpoint= ws://127.0.0.1:9943
polkadot.01.10080f3a.js:1 WebSocket connection to 'ws://127.0.0.1:9943/' failed: 
connect @ polkadot.01.10080f3a.js:1
main.3405627c.js:2 EventisTrusted: truebubbles: falsecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: WebSocket {url: 'ws://127.0.0.1:9943/', readyState: 3, bufferedAmount: 0, onopen: null, onerror: null, …}defaultPrevented: falseeventPhase: 0path: []returnValue: truesrcElement: WebSocket {url: 'ws://127.0.0.1:9943/', readyState: 3, bufferedAmount: 0, onopen: null, onerror: null, …}target: WebSocket {url: 'ws://127.0.0.1:9943/', readyState: 3, bufferedAmount: 0, onopen: null, onerror: null, …}timeStamp: 711.3999999985099type: "error"[[Prototype]]: Event
(anonymous) @ main.3405627c.js:2
polkadot.02.9fdc1d48.js:1 2022-11-19 09:32:02          API-WS: disconnected from ws://127.0.0.1:9943: 1006:: Abnormal Closure
m @ polkadot.02.9fdc1d48.js:1
polkadot.01.10080f3a.js:1 Uncaught (in promise) EventisTrusted: truebubbles: falsecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: WebSocket {url: 'ws://127.0.0.1:9943/', readyState: 3, bufferedAmount: 0, onopen: null, onerror: null, …}defaultPrevented: falseeventPhase: 0path: []returnValue: truesrcElement: WebSocket {url: 'ws://127.0.0.1:9943/', readyState: 3, bufferedAmount: 0, onopen: null, onerror: null, …}target: WebSocket {url: 'ws://127.0.0.1:9943/', readyState: 3, bufferedAmount: 0, onopen: null, onerror: null, …}timeStamp: 711.3999999985099type: "error"[[Prototype]]: Event
polkadot.01.10080f3a.js:1 WebSocket connection to 'ws://127.0.0.1:9943/' failed: 
connect @ polkadot.01.10080f3a.js:1

EventisTrusted: truebubbles: falsecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: WebSocketbinaryType: "blob"bufferedAmount: 0extensions: ""onclose: nullonerror: nullonmessage: nullonopen: nullprotocol: ""readyState: 3url: "ws://127.0.0.1:9943/"[[Prototype]]: WebSocketdefaultPrevented: falseeventPhase: 0path: []returnValue: truesrcElement: WebSocketbinaryType: "blob"bufferedAmount: 0extensions: ""onclose: nullonerror: nullonmessage: nullonopen: nullprotocol: ""readyState: 3url: "ws://127.0.0.1:9943/"[[Prototype]]: WebSockettarget: WebSocketbinaryType: "blob"bufferedAmount: 0extensions: ""onclose: nullonerror: nullonmessage: nullonopen: nullprotocol: ""readyState: 3url: "ws://127.0.0.1:9943/"[[Prototype]]: WebSockettimeStamp: 711.3999999985099type: "error"[[Prototype]]: EventAT_TARGET: 2BUBBLING_PHASE: 3CAPTURING_PHASE: 1NONE: 0bubbles: (...)cancelBubble: (...)cancelable: (...)composed: (...)composedPath: ƒ composedPath()currentTarget: (...)defaultPrevented: (...)eventPhase: (...)initEvent: ƒ initEvent()path: (...)preventDefault: ƒ preventDefault()returnValue: (...)srcElement: (...)stopImmediatePropagation: ƒ stopImmediatePropagation()stopPropagation: ƒ stopPropagation()target: (...)timeStamp: (...)type: (...)constructor: ƒ Event()AT_TARGET: 2BUBBLING_PHASE: 3CAPTURING_PHASE: 1NONE: 0arguments: nullcaller: nulllength: 1name: "Event"prototype: Event {…}[[Prototype]]: ƒ ()[[Scopes]]: Scopes[0]Symbol(Symbol.toStringTag): "Event"get bubbles: ƒ bubbles()get cancelBubble: ƒ cancelBubble()set cancelBubble: ƒ cancelBubble()get cancelable: ƒ cancelable()get composed: ƒ composed()get currentTarget: ƒ currentTarget()get defaultPrevented: ƒ defaultPrevented()get eventPhase: ƒ eventPhase()get path: ƒ path()get returnValue: ƒ returnValue()set returnValue: ƒ returnValue()get srcElement: ƒ srcElement()get target: ƒ target()get timeStamp: ƒ timeStamp()get type: ƒ type()[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()
(anonymous) @ main.3405627c.js:2

Answer 1

Disable Brave Shields or stop blocking trackers and adds for polkadot.js and the error will stop.

Answer 2

I got the same error API-WS: disconnected from ws://127.0.0.1:9944: 1006:: Abnormal Closure in this commit when trying to access http://localhost:3000 on my host machine to access an ink! DApp that I was running from within a Docker container.

To fix it I had to modify the Docker Compose file here by explicitly exposing port mappings from the Docker container to the host machine with:

ports:
  - "0.0.0.0:8080:8080"
  ...

instead of just

ports:
  - "8080:8080"
  ...

It was also necessary to remove network_mode: host here in that docker-compose.yml file too.

I've since changed the code to use docker run instead of docker compose in the latest commits here so I need to similarly publish the ports to the host machine:

docker run -it -d \
  ...
  --publish 0.0.0.0:8080:8080
  ...

Note: Whilst this change resolved the error and allowed me to access the Flipper DApp at http://locahost:3000 when running my node with substrate-contracts-node with:

substrate-contracts-node \
    --dev \
    --alice \
    --name "ink-test" \
    --base-path "/tmp/ink" \
    --force-authoring \
    --port 30333 \
    --rpc-port 9933 \
    --ws-port 9944 \
    --ws-external \
    --rpc-methods Unsafe \
    --rpc-external \
    --rpc-cors all \
    --prometheus-external \
    --telemetry-url "wss://telemetry.polkadot.io/submit/ 0" \
    -lsync=debug,runtime::contracts=debug

It didn't also allow me to access https://contracts-ui.substrate.io/?rpc=ws://127.0.0.1:9944, which also returned the same error API-WS: disconnected from ws://127.0.0.1:9944: 1006:: Abnormal Closure.

I was able to solve that error by using --unsafe-ws-external and --unsafe-rpc-external when running the substrate-contracts-node`.

I was also able to access https://polkadot.js.org/apps/?rpc=ws://127.0.0.1:9944#/explorer.

Note: As others have mentioned, if you are using Brave browser, even if you make the changes shown above you will still get error API-WS: disconnected from ws://127.0.0.1:9944: 1006:: Abnormal Closure unless you either:

• click the Brave shield icon and you open "Advanced controls" and select "Allow all trackers & ads", or;
• click to disable "Shields are up" to turn them off completely, as shown below

Answer 3

This could happen if the browser does not allow insecure websocket connections from a https (secure) website. It should be possible to look into the site settings for https://polkadot.js.org/ and allow insecure content.