1 - React 최적화 中 발생

<aside> 🚫 https로 접속하면 에러가 발생하고 http로 접속하면 정상적으로 동작하는 경우

</aside>

SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

webpackHotDevClient.js File 62 Line

// Connect to WebpackDevServer via a socket.
var connection = new WebSocket(
  url.format({
    protocol: 'ws',
    hostname: window.location.hostname,
    port: window.location.port,
    // Hardcoded in WebpackDevServer
    pathname: '/sockjs-node',
  })
);

`protocol: window.location.protocol === 'https:' ? 'wss' : 'ws'`

참고 사이트

React app error: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS

2 - SRC Security Error

<aside> 🚫 src의 값이 내 파일이 아닌 외부에서 가져오는 경우 보안 오류가 발생하는 경우

</aside>

SecurityError: Failed to execute ‘getImagedata’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data.

crossOrigin=""* Attribute 추가