Bug: Remote Server Connections (non-localhost) are non-responsive on VueJS with connection refused

[iknowjason]

Describe the bug

When trying to setup Caldera v5.0 so that remote users can connect to it over a remote IP address (not using localhost), the VueJS web application doesn't respond after submitting correct user credentials. It does nothing. In Chrome Dev Console, I see a connection refused in browser dev console because it is trying to hit a localhost api endpoint instead of accessing the endpoint over the app.contact.http configuration setting. The error is:

HEAD http://localhost:8888/api/v2/config/main net::ERR_CONNECTION_REFUSED.

Because the VueJS app functionality relies on hitting that endpoint, it looks to the user as if the login isn't working. Browser dev tools just shows it's trying to render the content by hitting the endpoint, but Caldera VueJS code is having a browser hit the localhost IP instead of the true public IP address.

To Reproduce

Steps to reproduce the behavior:

• Spin up a fresh AWS EC2 with Ubuntu 22.04
• Install Caldera
• Setup EC2 security groups allowing access to all TCP and UDP ports
• Setup your app.contact.http to look something like this:

app.contact.http: http://18.220.193.125:8888

sudo apt update
sudo apt install python3-pip

Install NodeJS

curl -fsSL https://deb.nodesource.com/setup_21.x | sudo -E bash - &&\
sudo apt install -y nodejs

Clone Caldera

git clone https://github.com/mitre/caldera.git --recursive
cd caldera

Install dependencies

pip3 install -r requirements.txt

Build and run the server

python3 server.py --build

Expected behavior

The VueJS web application renders content after authentication of valid user.

Screenshots

Web application is non-responsive after submitting correct credentials:

Error of connection refused, which doesn't render content and makes web app look un-responsive:

When hitting the VueJS from localhost, browser dev tools shows a successful connection to the localhost api endpoint.

Need to understand if this is a bug in VueJS (didn't have this issue in 4.x) or if there is a configuration parameter that needs to tell the application to accept or re-direct to the public IP address on that api endpoint.

Desktop (please complete the following information):

OS: Ubuntu
Browser:  Chrome
Version 5.0.0

[github-actions]

Looks like your first issue -- we aim to respond to issues as quickly as possible. In the meantime, check out our documentation here: http://caldera.readthedocs.io/

[alonsobsd]

it should works if you define VITE_CALDERA_URL=http://18.220.193.125:8888 into plugin/magma/.env file and trying build again. It worked for me using ssl plugin

[iknowjason]

@alonsobsd Excellent! I will give this a try. I've been trying with both SSL and non-SSL listeners.

If this works then it might be good to have a PR on the docs. This will help whether you host Caldera remotely internally on your LAN or on a cloud provider. It impacts all non-localhost/127.0.0.1 setups.

[iknowjason]

@alonsobsd This works for me with non-SSL listener on http port. I will now try with SSL.

[iknowjason]

@alonsobsd SSL listener works as well. Do you have any insight if a bug needs to be filled on this to allow <REMOTE_IP> to be added to plugins/magma/.env or an update to the docs? By default no .env existed. Only .env template file.

[alonsobsd]

SSL listener works as well. Do you have any insight if a bug needs to be filled on this to allow <REMOTE_IP> to be added to plugins/magma/.env or an update to the docs? By default no .env existed. Only .env template file.

I think it is not a bug but it needs be documented for non-localhost settings. I guess it will be updated soon. Btw take on mind a simple replace into plugins/magma/dist/assets/index*.js file could be more quick instead of edit .env file and magma re-build.

sed -i "" -e 's|http://localhost:8888|https://ip_or_hostname_here:8443|g' plugins/magma/dist/assets/index*.js

[elegantmoose]

Yes, we will add this to documentation.

[mevry]

Was this ever added to the documentation? Also, how can we do the same thing for the Docker container?

[elegantmoose]

Not yet. Wanted to brainstorm with some other team members on potential other solutions first. But we have all been out/busy. We are still tracking though. Apologies.

[zrquan]

Do I have to build different Docker images for different hosts, or is there a better way?

[elruedas-ops]

work for me. The key is reconf plugins/magma/.env and rebuid.

In a docker enviroment, first do the change, edit de docker-compose.yml command: --log DEBUG --build --fresh, run the docker, remove the build and stop/start the container.

Thanks

[zrquan]

@elegantmoose Hi, thank you very much for your advice. I tried the method you suggested, but it didn't work because npm is not preserved in the docker image by default. It seems that I can only build the VueJS fron-tend during "docker build".

[plaskur-365-bank]

Solution for me:
find . -type f -exec grep -l "http://localhost:8888" {} \; | xargs -I {} sed -i "s/http:\/\/localhost:8888/http:\/\/192.168.0.10:8888/g" {}

[elegantmoose]

@plaskur-365-bank @zrquan @elruedas-ops @mevry @alonsobsd @iknowjason We think we fixed this with this PR #2977.

Please reopen if still having issues. And we are looking at dockerfile now too for an update.

[iknowjason]

Re-opening this issue. Something is still broken. I was just notified by another user of my hosted Caldera tool, Automated Emulation, that Caldera magma VueJS no longer responds. Will share additional details shortly.

[idovandijk]

Solution for me: find . -type f -exec grep -l "http://localhost:8888" {} \; | xargs -I {} sed -i "s/http:\/\/localhost:8888/http:\/\/192.168.0.10:8888/g" {}

This fixed it for me, you're a lifesaver!

[jmbass]

This means that something that should be configurable, aka, the serving host, needs to be defined at build time. This is hardly a good practice in my opinion.