The following code shows an <iframe sandbox... pointing to a page that opens a test websocket with a message on successful open. It works correctly on Chrome and Edge printing the It worked! message immediately.
On Firefox it fails with Uncaught DOMException: The operation is insecure. and no further reasoning.
<!DOCTYPE html>
<html lang="en">
<body>
<iframe
sandbox="allow-scripts"
src="https://firefox-wss-example.tiiny.site/"></iframe>
</body>
</html>
The linked websocket page source code is simply as follows:
<!DOCTYPE html>
<html lang="en">
<body>
<script>
const ws = new WebSocket('wss://demo.piesocket.com/v3/channel_1?notify_self');
ws.addEventListener('open', () => {
console.log('It worked!');
});
</script>
</body>
</html>
I have tried a mixture of wss:// and ws://, as well as permissive CORS headers, but none of my attempts fix the issue on Firefox despite having an appropriate setup. I am starting to think this is a Firefox 97 bug but am unsure of how to verify.
Why does this snippet work on most browsers but fails on Firefox?