Keycloak error on console " violating Content Security Policy directive: "frame-ancestors 'self'"

Question

I am trying to integrate React with keycloak. But I am getting this error on console

    Refused to frame 'http://localhost:8080/'
 because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

This is the keycloak file

import Keycloak from 'keycloak-js';
const keycloak = Keycloak({
  url: 'http://localhost:8080/auth',
  realm: "keycloak-react-auth",
  clientId: "react",
});

export default keycloak;

Version of install of keycloak and react:

*"@react-keycloak/web": "^3.4.0",

"react": "^17.0.1",*

I also saw that in this StackOverflow question, the solution can be if you use this parameter checkLoginIframe: false, but TypeScript says that this attribute is not recognised in the Keycloak object

That looks like you are trying to login in the iframe. Generally, iframing should be disabled for the auth. Also use PKCE flow for SPA app. — Jan Garaj, Jun 29 '22 at 19:54

score 2 · Accepted Answer · answered Jun 29 '22 at 18:01

2

At the Realm Configuration -> Security Defences -> Content-Security-Policy

 frame-src 'self'; frame-ancestors 'self' http://localhost:3000; object-src 'none';

answered Jun 29 '22 at 18:01

Illyrian

429
4
16

1

That will decrease a security, so I would say it is a work around, but not solution. – Jan Garaj Jun 29 '22 at 19:52
Beware of clickjacking attacks. However, it anwers the original question, so I give you an upvote – lilalinux Mar 20 '23 at 12:16
In development, adding GENERATE_SOURCEMAP=false in .env file worked for me. – nkmuturi Apr 05 '23 at 13:17

score 1 · Answer 2 · answered Apr 21 '23 at 09:57

1

In my case, the environment variable KC_HOSTNAME was set to a different address from the one I was trying to access the keycloak web console.

If you are running keycloak in a container, add this to your Dockerfile:

ENV KC_HOSTNAME=localhost

answered Apr 21 '23 at 09:57

A.Casanova

555
4
16

Keycloak error on console " violating Content Security Policy directive: "frame-ancestors 'self'"

2 Answers2

Linked