meta (security) — 메타 태그 도감

올바른 사용

가능하면 HTTP 응답 헤더가 우선 (meta는 fallback)

referrer policy는 meta로 OK

CSP는 strict-origin 또는 더 엄격한 값

Permissions-Policy로 카메라·마이크 등 권한 제어

Referrer Policy

<meta name="referrer" content="strict-origin-when-cross-origin" />

같은 출처는 전체 URL, 외부는 origin만. SEO와 보안의 균형.

CSP (Content Security Policy)

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; script-src 'self' 'sha256-...'; img-src 'self' data: https:; style-src 'self' 'unsafe-inline'"
/>

XSS 방어. 인라인 스크립트는 해시 또는 nonce로 허용.

Permissions Policy

<meta
  http-equiv="Permissions-Policy"
  content="camera=(), microphone=(), geolocation=(self)"
/>

카메라·마이크 차단, 위치는 자체 출처만.

자주 보는 안티패턴

CSP 누락으로 XSS 위험

referrer no-referrer로 모든 신호 끔 (SEO 손해)

X-Frame-Options 누락 — clickjacking

meta 보안만 박고 HTTP 헤더 미설정

CSP 누락

<head>
  <title>...</title>
  <!-- CSP meta 없음 -->
</head>

XSS 공격에 무방비. 사용자 입력이 그대로 script로 실행 가능.

referrer no-referrer

<meta name="referrer" content="no-referrer" />

모든 referrer 신호 끔. 분석·SEO 신호 손실.

해설

보안 관련 meta 태그들의 묶음 카드. 개별 태그가 아닌 보안 의도의 meta 그룹으로 정리. 가능한 한 HTTP 응답 헤더로 설정하는 게 정석이고, meta는 fallback 또는 정적 사이트에서의 대안.

SEO 관점에서 referrer policy가 직접 영향. no-referrer는 모든 referrer 헤더를 끄는데 — 검색엔진의 유입 경로 분석과 일부 SEO 신호 전달에 손해. strict-origin-when-cross-origin이 보안과 SEO의 균형점.

GEO 관점에서 AI 크롤러도 referrer 헤더를 참조해 어디서 온 트래픽인지 인지. CSP는 사이트의 신뢰도에 간접 신호.

A11y 관점에서 직접 영향은 없다. 다만 위치 정보·카메라·마이크 권한 제어는 사용자 동의 UI에 영향.

자주 보는 안티패턴: CSP 누락(XSS에 무방비 — 사용자 입력이 DOM에 삽입되는 모든 곳이 위험), referrer를 no-referrer로(SEO 분석 손실), X-Frame-Options 누락(iframe에 사이트가 박혀 clickjacking 가능 — frame-ancestors로 CSP에서 처리 권장), meta 보안만 박고 HTTP 헤더 미설정(meta는 일부 정책만 지원 — 완전한 보안은 헤더).

1. Referrer Policy — 다른 사이트로 갈 때 어떤 referrer 정보를 보낼지 결정:

no-referrer: 안 보냄 (SEO 손실)
strict-origin-when-cross-origin: 같은 출처는 전체 URL, 외부는 origin만 (균형)
unsafe-url: 모든 URL (보안 약함)

2. Content Security Policy (CSP) — XSS 방어의 핵심. 어느 출처의 스크립트·이미지·스타일 허용인지 명시. 정적 사이트에는 meta로 가능하지만 — 동적 nonce가 필요하면 HTTP 헤더가 필수.

3. Permissions Policy (구 Feature Policy) — 브라우저 권한 기능 제어. 카메라·마이크·위치·가속도계 등을 허용/거부. 사용자에게 불필요한 권한 요청 차단.

4. X-Frame-Options / frame-ancestors — clickjacking 방어. 사이트가 iframe에 박히는 걸 차단. 모던에서는 CSP의 frame-ancestors로 통합.

5. Strict-Transport-Security (HSTS) — HTTP 자동 차단 → HTTPS 강제. meta로는 안 됨, 반드시 HTTP 헤더.

6. X-Content-Type-Options: nosniff — MIME 타입 추측 차단. meta로는 안 됨, 반드시 HTTP 헤더.

가능한 한 HTTP 응답 헤더가 우선. Next.js의 next.config.js headers() 또는 Cloudflare·Vercel의 헤더 설정이 가장 견고. Cloudflare 환경에서는 Transform Rules나 Workers로 헤더 추가 표준.

이 사이트(soyoyu.cc)의 보안 헤더 점검 — securityheaders.com 같은 도구로 외부 점검. A+ 등급이 목표. CSP·HSTS·X-Frame-Options·Referrer-Policy·Permissions-Policy가 기본 5종.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설