title: How to restrict angular app from being loaded in iframe
body: <p>I am trying to restrict angular app from being loaded in <code>iframe</code> but not able to do that.</p>
  <p>I have <code>angular</code> app running independently from <code>API</code>. API is implemented using <code>.net core 2.1</code> and UI client using <code>angular 7</code>.</p>
  <p>I tried below different options in <code>api middleware</code> but none is working in my case:</p>
  <blockquote>
  <p>#1</p>
  <pre><code>    app.Use(async (context, next) =&gt;
      {
          context.Response.Headers.Add(&quot;Content-Security-Policy&quot;, &quot;frame-ancestors 'none'; &quot; +
              &quot;script-src 'self'; &quot; +
              &quot;style-src 'self'; &quot; +
              &quot;img-src 'self'&quot;);
          await next();
      });
  </code></pre>
  <p>#2</p>
  <pre><code>    app.Use(async (context, next) =&gt;
      {
          context.Response.Headers.Add(&quot;X-Frame-Options&quot;, &quot;DENY&quot;);
          await next();
      });
  </code></pre>
  </blockquote>
  <p>I am getting above added values in <code>response header</code> but still able to load application in <code>iframe</code> in other application.</p>
  <p>Is there anything I am missing here at <code>angular/API</code> side?</p>
  <p><strong>Added more information</strong></p>
  <p>We used IIS to host angular app. Also tried below setting in web.config in angular app:</p>
  <pre><code>&lt;httpProtocol&gt;
      &lt;customHeaders&gt;
        &lt;add name=&quot;X-Frame-Options&quot; value=&quot;DENY&quot; /&gt;
      &lt;/customHeaders&gt;
  &lt;/httpProtocol&gt;
  </code></pre>