title: How to have Keycloak login page in iframe?
body: <p>There is a web server running locally, and I want to have Keycloak (on another domain) login page inside the iframe. I tried the following setting in the Keycloak Real Settings > Security Defenses > Headers > Content-Security-Policy</p>
  
  <pre><code>frame-src 'self' http://127.0.0.1 http://192.168.1.140 http://localhost *.home-life.hub http://trex-macbook.home-life.hub localhost; frame-ancestors 'self'; object-src 'none';
  </code></pre>
  
  <p>Basically, I put my local IP addresses and host names as sources to <code>frame-src</code>.</p>
  
  <p>The login page is not shown and I get this error in the browser console</p>
  
  <pre><code>Refused to display 'http://keycloak.example.com:8080/auth/realms/master/protocol/openid-connect/auth?client_id=es-openid&amp;response_type=code&amp;redirect_uri=https%3A%2F%2Fkibana.example.com%3A5601%2Fauth%2Fopenid%2Flogin&amp;state=3RV-_nbW-RvmB8EfUwgkJq&amp;scope=profile%20email%20openid' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".
  </code></pre>
  
  <p>My custom headers are present
  <a href="https://i.stack.imgur.com/vNezD.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vNezD.png" alt="enter image description here"></a></p>
  
  <p>My server and UI (server rendered) code:</p>
  
  <pre><code>'use strict';
  
  const Hapi = require('@hapi/hapi');
  
  const init = async () =&gt; {
    // Run server on all interfaces
    const server = Hapi.server({
      port: 3000,
    });
  
    await server.start();
  
    // server.ext('onPreResponse', (req, h) =&gt; {
    //   req.response.header('Content-Security-Policy', "default-src 'self' *.example.com");
    //   console.log('req.response.headers', req.response.headers);
    //   return h.continue;
    // });
  
    server.route({
      method: 'GET',
      path: '/home',
      handler: () =&gt; {
        return `&lt;html&gt;
                  &lt;head&gt;
                    &lt;title&gt;searchguard kibana openid keycloak&lt;/title&gt;
                  &lt;/head&gt;
                  &lt;body&gt;
                    &lt;p&gt;
                      &lt;iframe src="https://kibana.example.com:5601" width="800" height="600"&gt;&lt;/iframe&gt;
                    &lt;/p&gt;
                  &lt;/body&gt;
                &lt;/html&gt;`;
      },
    });
  
    server.route({
      method: '*',
      path: '/{path*}',
      handler: (req, h) =&gt; {
        return h.redirect('/home');
      },
    });
  
    console.log('Server running on %s', server.info.uri);
  };
  
  process.on('unhandledRejection', (err) =&gt; {
    console.log(err);
    process.exit(1);
  });
  
  init();
  
  </code></pre>
  
  <p>The iframe should show a page on kibana.example.com in the end. The Keycloak is used as an identity provider for the kibana.example.com.</p>