Search code examples
reactjskeycloak

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

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

Solution

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

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