HTML allow 속성 정리

iframe, video 태그에서 브라우저 권한을 제어하는 법

웹 페이지에서 외부 콘텐츠를 포함할 때 특정 브라우저 기능에 대한 권한 제어가 필요한 경우가 있습니다.

예를 들어 카메라, 마이크, 위치 정보, 자동 재생 같은 기능은 보안과 사용자 경험에 직접적인 영향을 줍니다. 이때 사용하는 것이 allow 속성입니다.

allow 속성이란?

allow 속성은 HTML에서 iframe 같은 태그에 사용할 수 있으며, 브라우저 기능의 사용 권한을 명시적으로 허용할 수 있도록 합니다.

<iframe src="..." allow="autoplay; microphone; camera"></iframe>

• 여러 권한은 세미콜론(;)으로 구분합니다.

• 특정 기능을 원하는 출처에만 허용할 수도 있습니다.

<iframe src="..." allow="microphone https://example.com"></iframe>

자주 사용하는 allow 권한 목록

권한	의미
autoplay	미디어의 자동 재생을 허용
microphone	마이크 사용 허용
camera	카메라 사용 허용
encrypted-media	DRM 보호 미디어 재생 허용
fullscreen	전체 화면 모드 허용
geolocation	위치 정보 접근 허용
picture-in-picture	PIP 모드 허용
speaker-selection	오디오 출력 장치 선택 허용
xr-spatial-tracking	WebXR 공간 추적 기능 허용

기본 예시

<iframe
  src="https://example.com/recorder"
  allow="camera; microphone; fullscreen"
></iframe>

위 예시는 iframe 내부 페이지에서 카메라, 마이크, 전체 화면 기능을 사용할 수 있도록 허용합니다.

allow 값에 대한 범위 제어

allow 속성은 단순한 키워드뿐 아니라 정책 제약도 함께 설정할 수 있습니다.

값	의미
*	모든 출처에 대해 허용
'self'	현재 문서와 같은 출처에 대해서만 허용
'none'	어떤 출처에도 허용하지 않음
https://example.com	특정 출처에 대해서만 허용

예시

<!-- 모든 출처에서 마이크와 카메라 허용 -->
<iframe allow="microphone *; camera *"></iframe>

<!-- 동일 출처에서만 전체 화면 허용 -->
<iframe allow="fullscreen 'self'"></iframe>

<!-- 어떤 출처에도 위치 정보 허용하지 않음 -->
<iframe allow="geolocation 'none'"></iframe>

보안 주의사항

• allow 속성은 카메라, 마이크, 위치 정보처럼 민감한 권한에 접근을 허용할 수 있으므로 신중하게 설정해야 합니다.

• 가능하다면 'self' 또는 특정 도메인만 허용하는 방식이 좋습니다.

• 권한을 allow 속성으로 허용해도, 사용자가 브라우저 권한 요청을 거부하면 실제 권한은 부여되지 않습니다.

• 외부 서비스를 iframe으로 삽입할 때는 필요한 권한만 최소한으로 허용하는 것이 좋습니다.

정리

allow 속성은 iframe 내부 콘텐츠가 사용할 수 있는 브라우저 기능을 제어하는 장치입니다.

기능을 넓게 열어두면 편리하지만, 보안상 위험도 함께 커질 수 있습니다. 따라서 필요한 권한만 명확히 허용하고, 가능하면 출처 범위를 제한하는 것이 좋습니다.