Frontend errors in chapter 2

[mezhaka]

I see the following errors in the console:

Refused to frame 'http://localhost:8080/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".
Failed to load resource: the server responded with a status of 404 ()

Keycloak version: 12.0.4 (I am running it on Kubernetes (GKE) with local port forwarding).

[mezhaka]

It seems the issue #8 is the same. I double checked which version I am running--I am on revision 0c718fb and the following line is in index.html:

kc.init({'messageReceiveTimeout': 100000}).then(function() {

[stianst]

Hi, what console are you referring to? What URL are you loading Keycloak from?

[richardbabu]

Hi,
On ch2, when I start frontend following output I get and when I browse using url http://localhost:8000, I get blank page.

frontend % npm start

keycloak-example-app@0.0.1 start
node app.js

How ever, when I run backend, it works

backend % npm start

keycloak-example-service@0.0.1 start
node app.js

Started at port 3000

Why frontend not working?

Thanks
Richard

[vjs1730]

Hi, Yes...I too getting the same problem.

[stianst]

If you are running Keycloak with port forwarding or a reverse proxy it won't work by default as Keycloak will believe its URLs are http://localhost:8080.

Please take a look at Setting the hostname for Keycloak and Configuring a reverse proxy sections in Chapter 9 Configuring and Managing Keycloak. Alternatively, if you are using a more recent version of Keycloak take a look at the official documentation, Configuring the hostname and Using a reverse proxy.

[ErikEngerd]

I don't think this problem is an issue with the reverse proxy config. My keycloak setup is started with '--hostname-strict false' and also had the issue. What helped was editing the 'Security Defenses' of 'my realm' and adding the URL of the local website that includes the URL of the app (http://localhost:8000) to the Content Security Policy which now looks like this:

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

That said, it is generally bad practice I think to embed third-party logins into your own page. How is a user then supposed to see that the content is safe. So a redirect would be much better than an iframe.

[MauricioPenteado]

Hi folks,
It looks like an abandoned discussion, but unfortunately I could not find a solution for this.
What @ErikEngerd said on previous comment was not helpful.
Could anyone else re-open this?

[MauricioPenteado]

I found the bug.
In the book it is described in chapter 2 that we should create the myrealm instead of the Myrealm that is used by the frontend application.
The capital M makes all the difference.