HTTP 개발 주소에서 브라우저 기능이 실행되지 않아요

로컬에서는 실행되던 Service Worker, 위치, 알림, 카메라·마이크 기능이 다른 HTTP 개발 주소에서 막힐 때 사용합니다. 브라우저 예외 설정부터 바꾸지 말고 현재 문서가 보안 컨텍스트인지, HTTPS 페이지가 HTTP 리소스를 요청했는지 먼저 구분합니다.

먼저 기록할 값

브라우저 개발자 도구의 Console에서 오류 원문과 실패한 API 이름을 기록합니다. 같은 화면에서 아래 값도 확인합니다.

({  origin: location.origin,  protocol: location.protocol,  isSecureContext: window.isSecureContext,});

개발 주소와 운영 주소에서 각각 실행해 결과를 나눠 둡니다. Console과 Network 기록을 공유할 때는 Cookie, Token, 개인정보와 비공개 URL 매개변수를 제거합니다.

보안 컨텍스트 오류인지 확인합니다

다음 조건이면 Only secure origins are allowed 문서를 확인합니다.

• Console에 Only secure origins are allowed 또는 보안 컨텍스트가 필요하다는 오류가 표시됩니다.
• 일반 HTTP 호스트에서 window.isSecureContext가 false입니다.
• 실패한 기능이 Service Worker, 위치, 알림, 카메라·마이크처럼 보안 컨텍스트를 요구합니다.

운영 주소는 HTTPS에서 다시 확인해야 합니다. chrome://flags/#unsafely-treat-insecure-origin-as-secure는 특정 개발 Origin을 임시로 시험하는 설정이며, HTTP 연결에 인증이나 암호화를 추가하지 않습니다. 방문자에게 이 설정을 바꾸도록 안내하거나 운영 해결책으로 사용하지 않습니다.

Mixed Content와 구분합니다

페이지 자체는 HTTPS인데 스크립트·스타일·iframe·API 요청의 주소가 HTTP라면 보안 컨텍스트 오류와 다른 문제일 수 있습니다. Console 또는 Network에 Mixed Content와 차단된 리소스 URL이 표시되면 Mixed Content 리소스 차단을 확인합니다.

수정 후 다시 확인합니다

1. 같은 Origin에서 window.isSecureContext를 다시 확인합니다.
2. Console에 같은 오류 원문이 남아 있는지 확인합니다.
3. Network에서 실패한 요청의 프로토콜과 차단 이유를 확인합니다.
4. 임시 Chrome 예외를 사용했다면 제거한 뒤 HTTPS 운영 주소에서 기능을 다시 실행합니다.

보안 검사를 끄거나 인증서 오류를 무시한 결과는 정상 동작으로 기록하지 않습니다. 보안 컨텍스트 판정을 통과한 뒤에도 기능이 실패하면 해당 API의 권한과 구현 오류를 따로 확인합니다.