🧨 문제 상황

localhost와 배포 환경에서는 발생한 적 없는 문제가 발생했다.

반응형 작업을 위해 모바일 환경에서 테스트를 진행하면서, Safari로 로컬 IP를 통해 접속한 상황이었고 위와 같은 TypeError: crypto.randomUUID is not a function 에러가 발생했다.

🔒 원인

로컬 IP로 접속한 경우, Secure Origin으로 간주되지 않아서 발생한 문제이다.

crypto.randomUUID()는 secure contexts(HTTPS) 내에서 이용이 가능하다.

Secure context: This feature is available only in secure contexts(HTTPS), in some or all supporting browsers.

Crypto: randomUUID() method - Web APIs | MDN

localhost는 Secure Origin으로 다뤄지기 때문에 문제가 없었고, 배포 환경에서는 HTTPS를 사용하기 때문에 문제가 발생하지 않았다.

📍Secure Origin?

• HTTPS, localhost, 또는 파일 프로토콜(file://)처럼 안전한 환경에서 실행되는 것을 의미한다.
• localhost는 Secure Origin으로 간주되지만, 192.168.x.x 같은 local IP는 Secure Origin으로 간주되지 않는다.

🔓 해결방법

만약 local IP나 Secure Origin으로 간주되지 않는 HTTP 연결을 통해서 작업을 진행해야 하는 경우라면, uuid를 생성하는 다른 라이브러리를 사용하거나 직접 uuid를 생성할 수 있는 코드를 작성하여 해결할 수 있다.

UUID 생성할 수 있는 다른 라이브러리 -> npm: uuid

🔍 알게된 점

• crypto는 secure contexts 에서 사용이 가능하다.
• localhost는 secure origin으로 다뤄진다.

나의 경우 이번 문제는 반응형 테스트 자체에는 영향을 미치지 않는 문제였으므로, 추가적인 조치를 진행하지는 않았다.

---

참고
self.crypto.randomUUID() is not a function
Crypto module not loading randomUUID() when viewing a local network IP address
[Javascript] crypto.randomUUID is not a function 오류