[Code-Server] 오류 'crypto.subtle‘ is not available so webviews will not work 해결 - Jupyter Extension 에러 해결

 

code-server를 이용해서 vsocde ide를 서버에 dockerfile을 만들고 띄우는 작업을 하는 도중 jupyter extension을 사용할 때 로딩만 계속되고 나오지 않는 현상이 나왔다.

https://github.com/coder/code-server

 

(아래 처럼 계속 로딩 중)

 

그래서 콘솔을 확인해 보니 다음과 같은 ERROR가 나오는 것을 확인했다.

 

<ip>와 <port>는 가렸습니다 

ERR 'crypto.subtle' is not available so webviews will not work. This is likely because the editor is not running in a secure context (https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts).: Error: 'crypto.subtle' is not available so webviews will not work. This is likely because the editor is not running in a secure context (https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts).
    at Jut (http://<ip>:<port>/stable-952523f288b1351f622a19507eb699b97c1d6410/static/out/vs/code/browser/workbench/workbench.js:34:52018)
    at kot.mountTo (http://<ip>:<port>/stable-952523f288b1351f622a19507eb699b97c1d6410/static/out/vs/code/browser/workbench/workbench.js:3170:13257)
    at zK.nb (http://<ip>:<port>/stable-952523f288b1351f622a19507eb699b97c1d6410/static/out/vs/code/browser/workbench/workbench.js:1736:1337)
    at zK.createWebview (http://<ip>:<port>/stable-952523f288b1351f622a19507eb699b97c1d6410/static/out/vs/code/browser/workbench/workbench.js:1736:836)
    at http://<ip>:<port>/stable-952523f288b1351f622a19507eb699b97c1d6410/static/out/vs/code/browser/workbench/workbench.js:1883:7281
    at YK.wc (http://<ip>:<port>/stable-952523f288b1351f622a19507eb699b97c1d6410/static/out/vs/code/browser/workbench/workbench.js:1883:7722)
    at YK.Cc (http://<ip>:<port>/stable-952523f288b1351f622a19507eb699b97c1d6410/static/out/vs/code/browser/workbench/workbench.js:1883:11336)
    at YK.yc (http://<ip>:<port>/stable-952523f288b1351f622a19507eb699b97c1d6410/static/out/vs/code/browser/workbench/workbench.js:1883:10023)
    at YK.setModel (http://<ip>:<port>/stable-952523f288b1351f622a19507eb699b97c1d6410/static/out/vs/code/browser/workbench/workbench.js:1883:3996)
    at lW.setInput (http://<ip>:<port>/stable-952523f288b1351f622a19507eb699b97c1d6410/static/out/vs/code/browser/workbench/workbench.js:1397:23911)

 

GPT한테 물어보니 이런 에러라고 한다.

이 오류는 code-server에서 서비스 워커(Service Worker) 등록 시 자체 서명된 SSL 인증서로 인해 발생하는 문제입니다. 브라우저는 보안상 신뢰할 수 없는 인증서로 제공되는 서비스 워커를 등록하지 않으므로, 자체 서명된 인증서를 사용하는 경우 SSL 인증서 오류로 인해 이 문제가 발생할 수 있습니다.

 

그래서 내가 ip로 들어가다 보니 SSL이 필요하다는 것 같다.

나는 머 그런 걸 설정할 돈이 없다 보니 어떻게 하다 고민하다가. 다른 글로는 ngrok을 써서 하기도 했지만, 나는 그냥 좀 더 쉬운 방법을 찾고자 했다.

 

https://cajava.tistory.com/57

https://cajava.tistory.com/58

[Code-Server] 임시 SSL 적용하기

 

해결 방법

그렇게 열심히 chatgpt, cursor, perplexity 전부 다 물어봐도 찾을 수 없었다...

결국 구글에서 검색을 통해서 찾게 되었다. 이런 거 보면 AI가 검색 자체를 대체하기에는 한계가 있어 보인다.

내가 이 문제에 대해 정확히 전문 지식이 없어서, 질문이 모호해졌고, 그러다보니 답이 이상하게 받으면서 점점 결과물이  산으로 가는 경험을 했다.

 

저 위의 글에서는 2가지 방법을 말해준다.

첫 번째 방법은 역방향 프락시를 구축

이 방법은 테스트를 더 해봐야겠다. (적용이 안된다)

- 이 방법을 하려면 container 때 생성된 cert 을 다시 윈도우나 맥으로 다운로드하고 설치해야 가능한 것 같다(아마도)

https://passwd.tistory.com/entry/Chrome-%EC%9D%B8%EC%A6%9D%EC%84%9C-%EB%93%B1%EB%A1%9D

두 번째 방법은 Chrome 구성설정을 변경

1. chrome://flags에 들어가기
2. Insecure origins treated as secure를 Enable 하기
3. 접속 주소 입력 (http:<ip>:<port> 
4. chorme 다시 시작

 

저렇게 했을 때 jupyter extension 이 정상적으로 작동한다.

 

다른 분들은 삽질을 덜하시길 바란다... 결국 자동으로 하는 방법은 ssl 없이는 찾지 못하고 시간만 날린 것 같다 ㅠ