UI resizable panels / DNS rebinding #88

ndrix · 2025-11-28T21:30:41Z

Local development setup, Docker integration, UI enhancements, and minor code cleanups.

Local Development & Environment Setup

Added a generate_devenv.sh script that interactively sets up environment variables, generates TLS certificates, initializes MongoDB with secure credentials and collections, and creates .env files for backend and UI components.

UI Improvements

Enhanced API host resolution logic to prioritize REACT_APP_API_HOST, then localStorage, and finally default to "/api", * Increased the width of the divider in ResizableSplitPanel and cleaned up the split panel's rendering logic for a better user experience when resizing UI panels. [1] [2]
Minor documentation and code clarifications in DNS resolver logic and requirements update for compatibility. [1] [2] [3] [4]

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…ST precedence and empty-string fallback

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

This PR implements DNS rebinding protection by introducing configurable API host resolution in the UI, and enhances user experience by widening the resizable split panel divider. The changes also include development environment setup improvements with Docker Compose configuration and dependency updates.

Implemented API host precedence: REACT_APP_API_HOST > localStorage['api_host'] > "/api" with proper error handling for localStorage access
Increased split panel divider width from 8px to 19px for improved usability
Added Docker Compose configuration and enhanced development environment setup script

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
dusseldorf/ui/src/DusseldorfConfig.ts	Refactored API host resolution with proper precedence order and error handling for localStorage access in privacy mode
dusseldorf/ui/src/Components/Rules/RuleTable.tsx	Removed unused ColumnManager and ColumnConfig imports
dusseldorf/ui/src/Components/ResizableSplitPanel.tsx	Widened divider from 8px to 19px and applied code formatting improvements
dusseldorf/ui/src/Components/Requests/RequestTable.tsx	Removed unused ColumnManager import and defaultColumnConfig constant
dusseldorf/ui/README.md	Updated documentation with API host resolution information and added changelog entry
dusseldorf/listener.dns/src/dnsresolver.py	Improved code comments and refactored TTL handling to read from response object
dusseldorf/generate_devenv.sh	Enhanced script with input validation and default values, but contains critical duplication bug
dusseldorf/docker-compose.yml	Added complete Docker Compose configuration for all services (mongodb, api-server, listener-http, listener-dns)
dusseldorf/api/src/api/requirements.txt	Downgraded urllib3 from 2.5.0 to 2.0.4
.dockerignore	Added comprehensive Docker ignore patterns for Python, Node, and development files

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.

Copilot · 2025-11-28T21:33:55Z

dusseldorf/generate_devenv.sh

+echo "Environment setup complete. You can now start running Dusseldorf with docker compose up."#!/bin/bash
+set -e
+
+EXAMPLE_CLIENT_ID="dc1b6b75-8167-4baf-9e75-d3d1f755de1b"
+EXAMPLE_TENANT_ID="72f988bf-86f1-41af-91ab-2d7cd011db47"
+
+CLIENT_ID_DEFAULT="${AZURE_CLIENT_ID:-$EXAMPLE_CLIENT_ID}"
+TENANT_ID_DEFAULT="${AZURE_TENANT_ID:-$EXAMPLE_TENANT_ID}"
+
+read -p "Azure Client ID [$CLIENT_ID_DEFAULT]: " INPUT_CLIENT_ID || true
+[[ -n "$INPUT_CLIENT_ID" && "$INPUT_CLIENT_ID" =~ ^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$ ]] && AZURE_CLIENT_ID="$INPUT_CLIENT_ID" || AZURE_CLIENT_ID="$CLIENT_ID_DEFAULT"
+
+read -p "Azure Tenant ID [$TENANT_ID_DEFAULT]: " INPUT_TENANT_ID || true
+[[ -n "$INPUT_TENANT_ID" && "$INPUT_TENANT_ID" =~ ^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$ ]] && AZURE_TENANT_ID="$INPUT_TENANT_ID" || AZURE_TENANT_ID="$TENANT_ID_DEFAULT"
+
+echo "Using Client ID: $AZURE_CLIENT_ID"
+echo "Using Tenant ID: $AZURE_TENANT_ID"
+
+mkdir -p env/certs env/mongo-data env/mongo-scripts ui
+openssl req -newkey rsa:2048 -nodes -keyout "env/certs/tls.key" -x509 -days 365 -out "env/certs/tls.crt" -subj "/CN=localhost" >/dev/null 2>&1 || { echo "openssl not found" >&2; exit 1; }
+
+MONGO_PASSWORD=$(openssl rand -hex 12)
+cat <<EOF > env/mongo-scripts/init.js
+db = db.getSiblingDB("dusseldorf");
+db.createUser({
+  user: "admin",
+  pwd: "$MONGO_PASSWORD",
+  roles: [{ role: "readWrite", db: "dusseldorf" }]
+});
+
+db.createCollection("domains");
+db.createCollection("zones");
+db.createCollection("requests");
+db.createCollection("rules");
+
+db.domains.createIndex({domain: 1}, { unique: true });
+db.zones.createIndex({fqdn: 1}, { unique: true });
+db.requests.createIndex({
+  "zone": 1,
+  "time": 1
+});
+db.domains.insertOne({"domain": "dusseldorf.local", "public_ips": ["172.18.0.9"], "owner": "dusseldorf"});
+EOF
+
+cat <<EOF > .env
+# Dusseldorf Environment Variables
+API_VERSION=1
+ENVIRONMENT=development
+AZURE_CLIENT_ID=$AZURE_CLIENT_ID
+AZURE_TENANT_ID=$AZURE_TENANT_ID
+
+MONGO_USERNAME=admin
+MONGO_PASSWORD=$MONGO_PASSWORD
+MONGO_DB_NAME=dusseldorf
+MONGODB_DB_NAME=dusseldorf
+
+DSSLDRF_TLS_CRT_FILE=./env/certs/tls.crt
+DSSLDRF_TLS_KEY_FILE=./env/certs/tls.key
+LSTNER_HTTP_PORT=443
+LSTNER_HTTP_INTERFACE=0.0.0.0
+
+LSTNER_DNS_PORT=10053
+LSTNER_DNS_INTERFACE=0.0.0.0
+LSTNER_DNS_UDP=false
+EOF
+
+cat <<EOF > ui/.env
+REACT_APP_CLIENT_ID=$AZURE_CLIENT_ID
+REACT_APP_TENANT_ID=$AZURE_TENANT_ID
+REACT_APP_API_HOST=http://localhost:8080/api
+EOF
+
+echo "Environment setup complete. Run: docker compose up"


The entire script appears to be duplicated. Line 74 ends without a newline and is immediately followed by #!/bin/bash on the same line, then the script content repeats from lines 74-146. This will cause the script to fail at line 74 when it tries to execute docker compose up."#!/bin/bash as a command.

The echo statement on line 74 should end with a newline, and the duplicate script content (lines 74-146) should be removed.

Copilot · 2025-11-28T21:33:55Z

dusseldorf/ui/README.md

+
+This is the graphical user interface for Dusseldorf, which provides an easy graphical human way to interface with Dusseldorf's API. 

 This runs as its own component, it's a static web page build in the React Framework, hosted as a static component within the API repository. 


Typo: "build" should be "built".

Suggested change

This runs as its own component, it's a static web page build in the React Framework, hosted as a static component within the API repository.

This runs as its own component, it's a static web page built in the React Framework, hosted as a static component within the API repository.

Copilot · 2025-11-28T21:33:55Z

dusseldorf/ui/README.md

 in the console of the DevTools in your favourite browser to any value to change which API endpoint you talk to. 

 # Design 
 This UI is build upon the amazing [Fluent2](https://fluent2.microsoft.design/) design framework.


Typo: "build" should be "built".

Suggested change

This UI is build upon the amazing [Fluent2](https://fluent2.microsoft.design/) design framework.

This UI is built upon the amazing [Fluent2](https://fluent2.microsoft.design/) design framework.

Copilot · 2025-11-28T21:33:56Z

dusseldorf/generate_devenv.sh

+cat <<EOF > ui/.env
+REACT_APP_CLIENT_ID=$AZURE_CLIENT_ID
+REACT_APP_TENANT_ID=$AZURE_TENANT_ID
+REACT_APP_API_HOST=http://localhost:8080/api


REACT_APP_API_HOST is set to http://localhost:8080/api, which enforces unencrypted HTTP for the UI’s API calls. If the UI transmits authentication tokens (e.g., Azure OAuth flows) or sensitive data, this can be intercepted or modified on the network. Use HTTPS (e.g., https://localhost:8080/api with a trusted certificate) and ensure TLS is enforced in both client and server configs.

Suggested change

REACT_APP_API_HOST=http://localhost:8080/api

REACT_APP_API_HOST=https://localhost:8080/api

…OST; divider usability improved; add Jest+Babel config

ndrix and others added 8 commits November 28, 2025 13:26

getting TTL out of dns response

088330f

Update dusseldorf/ui/src/Components/Requests/RequestTable.tsx

2f1b660

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update dusseldorf/ui/src/Components/Rules/RuleTable.tsx

3b526f4

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update dusseldorf/ui/src/Components/Requests/RequestTable.tsx

99f8175

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Add local docker env files for dns rebinding work

049c329

UI: easier divider grab (4px buffer each side); Config: robust API_HO…

a7c8aa4

…ST precedence and empty-string fallback

Update dusseldorf/api/src/api/requirements.txt

e05cb5b

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

docs(ui): add changelog entries for API_HOST fallback and divider buffer

95adbc8

ndrix requested a review from Copilot November 28, 2025 21:30

github-actions bot added root Docs API UI dns-listener release labels Nov 28, 2025

Copilot started reviewing on behalf of ndrix November 28, 2025 21:31 View session

Copilot finished reviewing on behalf of ndrix November 28, 2025 21:32

Copilot AI reviewed Nov 28, 2025

View reviewed changes

ndrix added 2 commits November 28, 2025 14:56

test(ui): add Jest+Babel config, stabilize TS tests, update changelog

1103906

ui: tests pass and production build ok; config honors REACT_APP_API_H…

6a6cbad

…OST; divider usability improved; add Jest+Babel config

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

UI resizable panels / DNS rebinding #88

UI resizable panels / DNS rebinding #88

Uh oh!

ndrix commented Nov 28, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Nov 28, 2025

Uh oh!

Copilot AI Nov 28, 2025

Uh oh!

Copilot AI Nov 28, 2025

Uh oh!

Copilot AI Nov 28, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		This is the graphical user interface for Dusseldorf, which provides an easy graphical human way to interface with Dusseldorf's API.

		This runs as its own component, it's a static web page build in the React Framework, hosted as a static component within the API repository.

	This UI is build upon the amazing [Fluent2](https://fluent2.microsoft.design/) design framework.
	This UI is built upon the amazing [Fluent2](https://fluent2.microsoft.design/) design framework.

	REACT_APP_API_HOST=http://localhost:8080/api
	REACT_APP_API_HOST=https://localhost:8080/api

UI resizable panels / DNS rebinding #88

Are you sure you want to change the base?

UI resizable panels / DNS rebinding #88

Uh oh!

Conversation

ndrix commented Nov 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Nov 28, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 28, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 28, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 28, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ndrix commented Nov 28, 2025 •

edited

Loading