iframe 沙箱中的 WebSocket 在 Firefox 上失败，但在 Edge/Chrome 上有效答案

【问题标题】：WebSocket within iframe sandbox fails on Firefox, but works on Edge/Chromeiframe 沙箱中的 WebSocket 在 Firefox 上失败，但在 Edge/Chrome 上有效
【发布时间】：2022-08-15 07:04:35
【问题描述】：

以下代码显示了一个 <iframe sandbox... 指向一个页面，该页面打开一个测试 websocket，并显示成功打开的消息。它在 Chrome 和 Edge 上正常工作，立即打印 It worked! 消息。

在 Firefox 上，它以 Uncaught DOMException: The operation is insecure. 失败，没有进一步的理由。

<!DOCTYPE html>
<html lang=\"en\">
  <body>
    <iframe
      sandbox=\"allow-scripts\"
      src=\"https://firefox-wss-example.tiiny.site/\"></iframe>
  </body>
</html>

链接的websocket页面源码简单如下：

<!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>

我尝试了wss:// 和ws:// 的混合，以及允许的CORS 标头，但是尽管有适当的设置，我的尝试都没有解决Firefox 上的问题。我开始认为这是一个 Firefox 97 错误，但不确定如何验证。

为什么这个 sn-p 在大多数浏览器上都可以工作，但在 Firefox 上却失败了？

我在最新的 Firefox 中看到完全相同的问题，没有错误的原因......在其他浏览器中工作正常

标签： javascript html firefox websocket

【解决方案1】：

我以前经历过这个，花了几周的时间进行调查，我发现：Firefox 在blob:// 协议下运行沙盒JavaScript，and you're only allowed to upgrade to WebSocket from http:// and https:// connections。 blob:// 也不是。

虽然在他们的文档中不是很清楚，但您可以查看websocket upgrade implementation 以及this issue about CSP inheritance 以更好地理解它，但这基本上是 Firefox 选择实施沙盒的方式。

我们从未找到解决此问题的方法，唯一的方法是放弃沙盒，或放弃 Firefox 对此特定功能的支持。

另一方面，基于 Chromium 的浏览器将脚本文件保存在本地（如果它存储在临时目录或虚拟文件系统中，我不能 100% 有把握地说），并且仍然使用http:// 协议来访问它们，这种方式您可以升级到ws:// 或wss://。这些浏览器也可能继承 CSP，因为它们保留了开瓶器实例。

【讨论】：