iframe 임베딩 검사

페이지 임베딩 여부는 무엇으로 결정되나요?

빠른 설정 가이드: 응답 헤더 구성

사이트 소유자라면 응답 헤더를 통해 직접 임베딩을 제어할 수 있습니다.

참고: CSP의 frame-ancestors는 X-Frame-Options를 대체합니다. 두 헤더가 모두 존재할 경우 CSP가 우선 적용되므로, frame-ancestors 사용을 권장합니다.

서버는 어떻게 iframe 요청임을 감지하나요?

• Sec-Fetch-Dest: document — 최상위 탐색(일반적인 페이지 이동, 프레임 외부)
• Sec-Fetch-Dest: iframe — 요청이 <iframe> 요소 내부에서 로드됨
• Sec-Fetch-Dest: frame — 레거시 <frame>(프레임셋) 내부에서 로드됨
• Sec-Fetch-Dest: embed / object — <embed> 또는 <object> 요소 내부에서 로드됨

서버 설정 예시: iframe 임베딩 차단

아래 코드 스니펫은 각 서버 또는 프레임워크에서 <iframe> 임베딩을 완전히 차단하는 설정 방법(X-Frame-Options: DENY + CSP frame-ancestors 'none')을 안내합니다. 이는 위 퀵 가이드 중에서 가장 엄격한 설정법입니다.

server {
    location / {
        add_header X-Frame-Options "DENY" always;
        add_header Content-Security-Policy "frame-ancestors 'none'" always;
    }
}

<IfModule mod_headers.c>
    Header always set X-Frame-Options "DENY"
    Header always set Content-Security-Policy "frame-ancestors 'none'"
</IfModule>

app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'DENY');
  res.setHeader('Content-Security-Policy', "frame-ancestors 'none'");
  next();
});

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'Content-Security-Policy', value: "frame-ancestors 'none'" },
        ],
      },
    ];
  },
};

class SetFrameOptions
{
    public function handle(Request $request, Closure $next): Response
    {
        $response = $next($request);
        $response->headers->set('X-Frame-Options', 'DENY');
        $response->headers->set('Content-Security-Policy', "frame-ancestors 'none'");

        return $response;
    }
}

export default {
  async fetch(request) {
    const response = await fetch(request);
    const headers = new Headers(response.headers);
    headers.set('X-Frame-Options', 'DENY');
    headers.set('Content-Security-Policy', "frame-ancestors 'none'");
    return new Response(response.body, { status: response.status, headers });
  },
};

내 사이트나 간단한 허용 목록에서만 임베딩을 허용해야 한다면 어떻게 해야 할까요? DENY를 SAMEORIGIN으로, 'none'을 'self' 또는 명시적 출처 목록으로 교체하면 됩니다. 나머지 설정은 동일하게 유지됩니다.

주요 플랫폼 주의사항

일반적인 헤더 규칙 외에도 주요 플랫폼들마다 고유한 특수 사항이 존재합니다. 헤더 정보만으로 단순히 ‘차단됨’ 또는 ‘임베드 가능’이라고 단정 짓기 전에 꼭 확인해보시길 권장합니다.

일반적인 사용 사례

• 통합 코드 작성 전, 타사 위젯·대시보드·문서 등의 자사 제품 임베드 가능성 여부를 명확히 판단하는 데 사용됩니다.
• 자사 사이트가 의도한 `X-Frame-Options` 또는 CSP `frame-ancestors` 정책이 정상적으로 전송되는지 검증하는 데 사용됩니다.
• 클릭재킹 방어 디버깅: iframe 내에서 페이지가 `about:blank`로 표시되거나 접근 거부 메시지를 출력하는 원인을 파악하세요.
• 콘텐츠 수집 또는 포털 연동 시 후보 URL을 일괄 검사하고, 세션 기록을 활용하여 결과를 재확인하세요.
• 외부 종속성에 대한 프레임 정책 문서를 작성하여 보안 검토나 침투 테스트에 대비하세요.

자주 묻는 질문(FAQ)