self.crypto.randomUUID() is not a function

1. Localhost는 secure origin으로 간주한다.
2. Web Cryptography API는 secure origin에서 작동한다.

 

다른 팀원들은 정상작동하는데, 한 팀원에게서만 코드가 작동하지 않는 상황을 만났습니다.

 reviewBtn.addEventListener("click", () => {
  const uuid = self.crypto.randomUUID();
  localStorage.setItem(uuid, { name: 'hi' });
}

// Uncaught TypeError: self.crypto.randomUUID is not a function

 

self.crypto.randomUUID()가 함수가 아니라는 에러를 주는 상황입니다.
브라우저의 버전이나 종류에 문제가 있을 것이라고 생각하였는데,  live-server에 접속할 때 localhost가 아닌 local Ip를 사용하는 것이 문제였습니다.

localhost는 secure origin으로 간주하나, local Ip는 unsecure origin으로 간주되었고, 이 때문에 Web Cryptography API가 작동하지 않았습니다.

 

 

해결방법은 vscode의 extension 세팅에서 Use Local Ip 체크 해제!