title: React Dev Build: The Operation Is Insecure With Safari or Any Mobile Browser
body: <p>I have a React app. The app works as expected everywhere except, Safari for Mac and any mobile browser. All the solutions I find online are outdated and not relevant to my versions.</p>
  <p>I've tried playing with the browserlist to no avail as well. The workarounds I've seen for webpackHotDevClient have been implemented in the release I have.</p>
  <pre><code>SecurityError: The operation is insecure.
  ./node_modules/react-dev-utils/webpackHotDevClient.js
  node_modules/react-dev-utils/webpackHotDevClient.js:60
  __webpack_require__
  /app/webpack/bootstrap:784
  </code></pre>
  <p><strong>webpackHotDevClient.js:60</strong></p>
  <pre><code>var connection = new WebSocket(
    url.format({
      protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',
      hostname: process.env.WDS_SOCKET_HOST || window.location.hostname,
      port: process.env.WDS_SOCKET_PORT || window.location.port,
      // Hardcoded in WebpackDevServer
      pathname: process.env.WDS_SOCKET_PATH || '/sockjs-node',
      slashes: true,
    })
  );
  </code></pre>
  <p><strong>package.json</strong></p>
  <pre><code>{
    &quot;name&quot;: &quot;my-app&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;3&quot;: &quot;^2.1.0&quot;,
      &quot;-&quot;: &quot;0.0.1&quot;,
      &quot;@fortawesome/fontawesome-svg-core&quot;: &quot;^1.2.28&quot;,
      &quot;@fortawesome/free-brands-svg-icons&quot;: &quot;^5.13.0&quot;,
      &quot;@fortawesome/free-regular-svg-icons&quot;: &quot;^5.13.0&quot;,
      &quot;@fortawesome/free-solid-svg-icons&quot;: &quot;^5.13.0&quot;,
      &quot;@fortawesome/react-fontawesome&quot;: &quot;^0.1.9&quot;,
      &quot;@testing-library/jest-dom&quot;: &quot;^4.2.4&quot;,
      &quot;@testing-library/react&quot;: &quot;^9.3.2&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^7.1.2&quot;,
      &quot;bootstrap&quot;: &quot;^4.5.0&quot;,
      &quot;classnames&quot;: &quot;^2.2.6&quot;,
      &quot;jquery&quot;: &quot;^3.5.1&quot;,
      &quot;node-sass&quot;: &quot;^4.14.1&quot;,
      &quot;react&quot;: &quot;^16.13.1&quot;,
      &quot;react-dom&quot;: &quot;^16.13.1&quot;,
      &quot;react-router-dom&quot;: &quot;^5.2.0&quot;,
      &quot;react-scripts&quot;: &quot;3.4.1&quot;,
      &quot;reactstrap&quot;: &quot;^8.4.1&quot;,
      &quot;typescript&quot;: &quot;^3.9.5&quot;,
      &quot;yargs-parser&quot;: &quot;^18.1.3&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: &quot;react-app&quot;
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    }
  }
  </code></pre>
  <p><code>npm --version</code> 6.14.5</p>