Fix websocket building on non standard ports - closes #2952

[faux-eccles]

Fix connection issue when intelowl is on nonstandard port

Description

Change the way the websocket address are built to ensure the hosts ports are being referenced. #2952.

Type of change

Please delete options that are not relevant.

• [X ] Bug fix (non-breaking change which fixes an issue).

Checklist

• [X ] I have read and understood the rules about how to Contribute to this project
• [X ] The pull request is for the branch develop
• A new plugin (analyzer, connector, visualizer, playbook, pivot or ingestor) was added or changed, in which case:
  • I strictly followed the documentation "How to create a Plugin"
  • Usage file was updated. A link to the PR to the docs repo has been added as a comment here.
  • Advanced-Usage was updated (in case the plugin provides additional optional configuration). A link to the PR to the docs repo has been added as a comment here.
  • I have dumped the configuration from Django Admin using the dumpplugin command and added it in the project as a data migration. ("How to share a plugin with the community")
  • If a File analyzer was added and it supports a mimetype which is not already supported, you added a sample of that type inside the archive test_files.zip and you added the default tests for that mimetype in test_classes.py.
  • If you created a new analyzer and it is free (does not require any API key), please add it in the FREE_TO_USE_ANALYZERS playbook by following this guide.
  • Check if it could make sense to add that analyzer/connector to other freely available playbooks.
  • I have provided the resulting raw JSON of a finished analysis and a screenshot of the results.
  • If the plugin interacts with an external service, I have created an attribute called precisely url that contains this information. This is required for Health Checks (HEAD HTTP requests).
  • If the plugin requires mocked testing, _monkeypatch() was used in its class to apply the necessary decorators.
  • I have added that raw JSON sample to the MockUpResponse of the _monkeypatch() method. This serves us to provide a valid sample for testing.
  • I have created the corresponding DataModel for the new analyzer following the documentation
• I have inserted the copyright banner at the start of the file: # This file is a part of IntelOwl https://github.com/intelowlproject/IntelOwl # See the file 'LICENSE' for copying permission.
• Please avoid adding new libraries as requirements whenever it is possible. Use new libraries only if strictly needed to solve the issue you are working for. In case of doubt, ask a maintainer permission to use a specific library.
• If external libraries/packages with restrictive licenses were added, they were added in the Legal Notice section.
• Linters (Black, Flake, Isort) gave 0 errors. If you have correctly installed pre-commit, it does these checks and adjustments on your behalf.
• I have added tests for the feature/bug I solved (see tests folder). All the tests (new and old ones) gave 0 errors.
• If the GUI has been modified:
  • I have a provided a screenshot of the result in the PR.
  • I have created new frontend tests for the new component or updated existing ones.
• After you had submitted the PR, if DeepSource, Django Doctors or other third-party linters have triggered any alerts during the CI checks, I have solved those alerts.

Important Rules

• If you miss to compile the Checklist properly, your PR won't be reviewed by the maintainers.
• Everytime you make changes to the PR and you think the work is done, you should explicitly ask for a review by using GitHub's reviewing system detailed here.

[drosetti]

Hi @faux-eccles, thanks for your contribution! Next time request a review to me, in this way i'll be notified about your pr.

I tried it on my pc, but I can see in the network tab the ws request is stucked in pending status with you change

[faux-eccles]

@drosetti Ah my bad, the screenshot was of the issue not the fix. Should have put it only on the issue ticket, and only had the fix in the PR.

[drosetti]

Don't worry about the screenshot, it's not a big deal. Even if it's correct the problem remains: in my env the websocket cannot connect from the frontend to the backend. Maybe I have to change ports in the container ?

[faux-eccles]

My change should be connecting to the same port that the page is serving from so if you can load the page it should connect. That being said in my environment the ports are changed in the container, I've shared a screenshot of my setup in the linked issue

[github-actions]

This pull request has been marked as stale because it has had no activity for 10 days. If you are still working on this, please provide some updates or it will be closed in 5 days.

[drosetti]

@faux-eccles Ok I changed the port on docker and it worked on standard port (80), but there is another problem: the UI environment is on port 3001, if you want to work on frontend this changes makes the websocket fail. I'd like to discuss with you a possible solution for this problem. I prefer to avoid to edit the docker conf because some contributors work quite often on the frontend and change it every time is quite annoying imho.

[github-actions]

This pull request has been marked as stale because it has had no activity for 10 days. If you are still working on this, please provide some updates or it will be closed in 5 days.

[fgibertoni]

@faux-eccles any updates on this?

[faux-eccles]

Changing the port in docker was a local config to run the service in my environment as port 80 is already in use and shouldn't be necessary for the fix itself. I don't have experience with hosting the UI separately to the backend service for developemnt which is what it sounds like @drosetti is doing.

I think it would make sense to then dynamically build/set the port based on launch parameters. I can take a look to see what looks like.

(also apologies for the slow responses, have just moved countries and in the middle of getting resituated)

[faux-eccles]

@faux-eccles Ok I changed the port on docker and it worked on standard port (80), but there is another problem: the UI environment is on port 3001, if you want to work on frontend this changes makes the websocket fail. I'd like to discuss with you a possible solution for this problem. I prefer to avoid to edit the docker conf because some contributors work quite often on the frontend and change it every time is quite annoying imho.

Looking into this a bit further this seems strange, my assumption is the npm proxy directive in package.json should be forwarding the requests along as with everything else. So in your environment hosting the react server on 3001, my changes should be connecting to localhost:3000/ws and NPM should forward the requests. I'll see if I can recreate locally

[faux-eccles]

Launching the npm dev server with the default configuration on this branch using the method outlined in the docs appears to be working as expected (besides some unrelated CORS errors that prevents me from actually submitting jobs to validate messages are coming through as the NPM server appears to just open a websocket connection regardless of the other end being available)

Do you have the dev react app calling the api server directly and not via the npm proxy?

---

edit: Fixed the 403 errors by setting the environment variable stage=local in /docker/.env

[faux-eccles]

I've updated the package.json and added a middleware configurations for the react-scripts so that the webpack proxy correctly handles websockets. This might fix the need for having websockets on different ports while developing.