---
title: X-Frame-Options
slug: Web/HTTP/Headers/X-Frame-Options
translation_of: Web/HTTP/Headers/X-Frame-Options
---
<div>{{HTTPSidebar}}</div>

<p>The <strong><code>X-Frame-Options</code></strong> <a href="/en-US/docs/Web/HTTP">HTTP</a> 응답 헤더는 해당 페이지를 {{HTMLElement("frame")}} 또는{{HTMLElement("iframe")}}, {{HTMLElement("object")}} 에서 렌더링할 수 있는지 여부를 나타내는데 사용됩니다. 사이트 내 콘텐츠들이 다른 사이트에 포함되지 않도록 하여 {{interwiki("wikipedia", "clickjacking")}} 공격을 막기 위해 이 헤더를 사용합니다.</p>

<p>이 설정은 사용자가  <code>X-Frame-Options</code>를 지원하는 브라우저를 통해 페이지에 접근할 경우에만 보안됩니다.</p>

<div class="note"><strong>참고:</strong> {{HTTPHeader("Content-Security-Policy")}} HTTP 헤더에는 브라우저를 지원하기 위해 이 헤더를 <a href="https://www.w3.org/TR/CSP2/#frame-ancestors-and-frame-options">사용하지 않도록 하는</a> {{HTTPHeader("Content-Security-Policy/frame-ancestors", "frame-ancestors")}} 지시문이 있습니다.</div>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">Header type</th>
   <td>{{Glossary("Response header")}}</td>
  </tr>
  <tr>
   <th scope="row">{{Glossary("Forbidden header name")}}</th>
   <td>no</td>
  </tr>
 </tbody>
</table>

<h2 id="Syntax">Syntax</h2>

<p><code>X-Frame-Options</code> 과 관련해서는 다음의 3가지 설정이 가능합니다.</p>

<pre class="syntaxbox">X-Frame-Options: deny
X-Frame-Options: sameorigin
X-Frame-Options: allow-from https://example.com/
</pre>

<h3 id="Directives">Directives</h3>

<p><code>deny</code>는 같은 사이트 내에서 frame을 통한 접근도 막습니다.<br>
 <code>sameorigin</code>를 명시할 경우에는 frame에 포함된 페이지가 페이지를 제공하는 사이트와 동일한할 경우 계속 사용할 수 있습니다.</p>

<dl>
 <dt><code>deny</code></dt>
 <dd>어떠한 사이트에서도 frame 상에서 보여질 수 없습니다.</dd>
 <dt><code>sameorigin</code></dt>
 <dd>동일한 사이트의 frame에서만 보여집니다. 해당 스펙 안에서 브라우저 벤더가 최상위(top level), 혹은 부모(parent), 모든 체인(whole chain)에서 적용할지를 결정하도록 맡겨집니다. 하지만 모든 조상(ancestor)이 동일한 사이트에서 제공되지 않으면 이 옵션은 그다지 유용하지 않다고 논의되고 있습니다. (참고 {{bug(725490)}}). 상세 지원사항에 대한 참고 {{anch("Browser compatibility")}}.</dd>
 <dt><code>allow-from <em>uri</em></code></dt>
 <dd>지정된 특정 uri의 frame 에서만 보여집니다. 파이어폭스에서는 <code>sameorigin</code> 과 동일한 문제를 겪고 있습니다. 즉 동일한 사이트에 있는지에 대해서 frame의 조상(ancestor)을 확인하지 않습니다.</dd>
</dl>

<h2 id="예시">예시</h2>

<div class="note">
<p><strong>Note:</strong> 메타 테그 설정은 무용지물이다! 이를테면, <code>&lt;meta http-equiv="X-Frame-Options" content="deny"&gt;</code> 태그는 아무런 영향을 미치지 않는다. 따라서 사용하지 말자! 오직 아래의 예제처럼 HTTP 헤더 설정을 통해서만 <code>X-Frame-Options</code>이 동작한다.</p>
</div>

<h3 id="Apache_설정">Apache 설정</h3>

<p>아파치에서 모든 페이지에 <code>X-Frame-Options</code> 헤더를 전송하려면, 사이트 설정에 다음의 설정을 추가합니다.</p>

<pre>Header always set X-Frame-Options "sameorigin"
</pre>

<p>아파치에서 <code>X-Frame-Options</code> 거부(deny)하려면, 사이트 설정에 다음의 설정을 추가합니다.</p>

<pre>Header set X-Frame-Options "deny"
</pre>

<p>아파치에서 특정 호스트(host)에서 <code>X-Frame-Options</code> 를 허용하려면(<code>allow-from)</code>, 사이트 설정에 다음의 설정을 추가합니다.</p>

<pre>Header set X-Frame-Options "allow-from https://example.com/"
</pre>

<h3 id="nginx_설정">nginx 설정</h3>

<p>nginx에서 <code>X-Frame-Options</code> 헤더를 전송하려면 http, server, location 설정에 아래 설정을 추가합니다.</p>

<pre>add_header X-Frame-Options sameorigin;
</pre>

<h3 id="IIS_설정">IIS 설정</h3>

<p>ISS에서 <code>X-Frame-Options</code> 헤더를 전송하려면, 사이트의 <code>Web.config</code> 파일에 다음을 추가합니다.</p>

<pre class="brush: xml">&lt;system.webServer&gt;
  ...

  &lt;httpProtocol&gt;
    &lt;customHeaders&gt;
      &lt;add name="X-Frame-Options" value="sameorigin" /&gt;
    &lt;/customHeaders&gt;
  &lt;/httpProtocol&gt;

  ...
&lt;/system.webServer&gt;
</pre>

<h3 id="HAProxy_설정">HAProxy 설정</h3>

<p>HAProxy에서 <code>X-Frame-Options</code> 헤더를 전송하려면, front-end, listen, 혹은 backend 설정에 다음을 추가합니다.</p>

<pre>rspadd X-Frame-Options:\ sameorigin</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Title</th>
  </tr>
  <tr>
   <td>{{RFC("7034")}}</td>
   <td>HTTP Header Field X-Frame-Options</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{Compat("http.headers.X-Frame-Options")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a class="external" href="https://blogs.msdn.com/b/ie/archive/2009/01/27/ie8-security-part-vii-clickjacking-defenses.aspx">ClickJacking Defenses - IEBlog</a></li>
 <li><a href="https://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx">Combating ClickJacking with X-Frame-Options - IEInternals</a></li>
 <li><a href="https://tools.ietf.org/html/rfc7034">HTTP Header Field X-Frame-Options - RFC 7034</a></li>
 <li><a href="https://w3c.github.io/webappsec/specs/content-security-policy/#directive-frame-ancestors">CSP Level 2 frame-ancestors directive</a></li>
</ul>