HTTPS에서는 지원되나 HTTP에서는 지원되지 않는 기능들

웹 개발을 하다 보면 브라우저에서 “왜 로컬에선 되는데 올라가면 안 돼?”, 혹은 “HTTPS면 예외인데 HTTP면 막힌다?” 같은 상황을 자주 만나게 된다.

특히 API나 라이브러리 문제라고 생각하고 헤매다가 사실은 보안 정책 차이 때문에 기능 자체가 차단된 경우가 많다.

이 글에서는 FE 개발자가 꼭 알아야 할 HTTPS vs HTTP에서 지원 여부가 갈리는 기능들을 한 번 정리해보려고 한다.

 

왜 이런 문제가 생길까? 🤔

HTTP는 암호화가 없고 도청/변조가 쉬운 프로토콜이다.
그래서 브라우저는 보안에 민감한 API들(사용자 데이터, 클립보드, 위치 등)을 “HTTPS에서만 안전하게 쓰도록” 제한한다.

 

즉,
👉 보안 리스크가 있는 기능은 HTTPS 필수
👉 HTTP에서는 아예 접근 자체를 차단된다.

 

다음은 실제 https에서만 정상 동작하는 기능들의 목록이다.

1. navigator.clipboard — 클립보드 API

HTTPS에서 잘 작동하는 대표적 예시.

// 텍스트 복사
await navigator.clipboard.writeText("Hello from HTTPS!");

// 텍스트 읽기
const txt = await navigator.clipboard.readText();
console.log(txt);

HTTPS에서는 OK, HTTP에서는 권한 요청조차 뜨지 않는다.

 

📌 HTTP에서는 이렇게 떨어짐

Uncaught DOMException: 
Clipboard API has been blocked because 
this feature is not supported in insecure contexts.

즉 사용자 허용 UI가 뜨지도 않는다.
보안상 위험한 입력/출력은 HTTPS만 허용하기 때문이다.

2. Geolocation API — 위치

사용자 위치를 가져오는 기능도 마찬가지이다

navigator.geolocation.getCurrentPosition(
  pos => console.log(pos),
  err => console.error(err)
);

HTTPS에서는 권한 요청 → 위치 제공
HTTP에서는 권한 요청 자체 차단된다.

 

⚠️ Chrome 기준 정책상, HTTP는 무조건 insecure context라 위치 API는 막힌다.

 

3. Service Worker

Service Worker는 PWA의 핵심이지만…
HTTP에선 아예 등록조차 불가하다.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

HTTP에선 사용이 불가하고, 에러가 발생한다

ServiceWorker API is only available in secure contexts

왜냐면 SW는 캐싱/프록시/백그라운드 작동 등
보안과 무관하게 앱 성능에 관여하는 기능이라 HTTPS 고정이다.

 

4. Fetch with Credentials (Opaque Redirects 등)

HTTPS에서는 Credential 포함 요청, Redirect 전후 쿠키 유지 등
보안 설정을 유연하게 지원하지만…

HTTP에서는 브라우저가 민감하게 굴러서 일부 인증 흐름이 예상과 다르게 실패할 수 있다.

fetch("/api", {
  credentials: "include",
});

HTTP에서는

• 쿠키가 안 붙는다
• 리디렉션 보안 정책이 강화돼 실패할 수 있다

즉,
👉 HTTPS 기준을 충족해야
SameSite=None; Secure 쿠키도 기능한다.

 

HTTPS 전용 조건들 정리 🧠

다음 기능들은 HTTPS에서만 동작하거나 HTTP에서 제한/차단된다.

• Clipboard API
  • HTTP 동작 여부: ❌
  • 비고: 클립보드는 사용자 입력/출력과 직접 연결되기 때문에 보안상 위험
  • navigator.clipboard 계열 API는 HTTPS에서만 허용
• Geolocation API
  • HTTP 동작 여부: ❌
  • 비고: 사용자 위치 정보 접근 제한
  • HTTP에서는 권한 요청 UI 자체가 뜨지 않음
• Service Worker
  • HTTP 동작 여부: ❌
  • 비고: PWA의 핵심 요소
  • 캐싱, 프록시, 백그라운드 실행 등으로 인해 HTTPS 필수
• Push API / Notifications
  • HTTP 동작 여부: ❌
  • 비고: 브라우저별 보안 정책이 계속 강화되는 중
  • Service Worker 의존성 때문에 사실상 HTTPS 고정
• Web Bluetooth / Web USB
  • HTTP 동작 여부: ❌
  • 비고: 하드웨어 직접 연결
  • 악용 가능성이 높아 HTTPS 외 환경에서는 차단
• WebRTC (getUserMedia)
  • HTTP 동작 여부: ❌
  • 비고: 카메라 / 마이크 접근
  • HTTPS가 아니면 아예 호출 불가
• Beacon API
  • HTTP 동작 여부: ❗ (조건부)
  • 비고: 일부 브라우저 / 일부 상황에서 HTTPS 전용
  • 인증 정보 포함, 안정적 전송이 필요한 경우 HTTPS 권장
• Subresource Integrity (SRI)
  • HTTP 동작 여부: ❗ (조건부)
  • 비고: 외부 리소스 무결성 검증
  • HTTPS 리소스와 혼용 시 제약 발생 가능

 

개발자가 실제 마주치는 케이스

1) 로컬 테스트에서 잘 되는데 스테이징 HTTP에서 안 될 때

대부분 navigator.clipboard나 getUserMedia 같은 API가 실패한다.

해결법은!
👉 임시로 로컬 HTTPS 환경 만들기
mkcert, localhost SSL 등으로 HTTPS 테스트 필요!

mkcert localhost

https://github.com/FiloSottile/mkcert

GitHub - FiloSottile/mkcert: A simple zero-config tool to make locally trusted development certificates with any names you'd lik

 

2) “보안 에러”가 아닌 “지원 안 함” 에러 메시지

DOMException: Feature is not supported in insecure contexts

이 메시지는 대부분 HTTP에서 차단된 보안 API라는 뜻

 

HTTPS로 바꾸는 게 답인가?

사실상 그렇다.
대부분 브라우저 정책이 HTTPS 퍼스트니까.

👉 무료 HTTPS를 사용하도록 하자

• Cloudflare SSL
• Let’s Encrypt
• Vercel / Netlify 기본 HTTPS

HTTP만 남겨 둘 이유가 없다.

 

정리 — HTTPS 필수 기능 체크리스트 ✔️

• 클립보드 접근 필요? → HTTPS
• 위치 정보 필요? → HTTPS
• 카메라/마이크? → HTTPS
• 오프라인/캐시 전략? (SW) → HTTPS
• 인증 쿠키 완전 지원? → HTTPS

내용을 한줄로 요약해보자면...

HTTP 개발 환경은 디버깅/시연 수준, 프로덕션/유저 환경은 무조건 HTTPS다.

참고자료 및 링크 📎

• Clipboard API (Mozilla / MDN)
  https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
• Geolocation API (MDN)
  https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
• Service Worker introduction (MDN)
  https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
• HTTPS Everywhere trend (Google Web Fundamentals)
  https://web.dev/why-https-matters/