chore: v0.3.0

No longer required if the minimum is beta2

CHANGELOG.md

@@ -1,3 +1,13 @@
+### 0.3.0 (September 25, 2024)
+- Bumped the minimum supported version of Headscale to 0.23.
+- Updated the UI to respect `dns.use_username_in_magic_dns`.
+
+### 0.2.4 (August 24, 2024)
+- Removed ACL management from the integration since Headscale 0.23-beta2 now supports it natively.
+- Removed the `ACL_FILE` environment variable since it's no longer needed.
+- Introduce a `COOKIE_SECURE=false` environment variable to disable HTTPS requirements for cookies.
+- Fixed a bug where removing Split DNS configurations would crash the UI.
+
 ### 0.2.3 (August 23, 2024)
 - Change the minimum required version of Headscale to 0.23-beta2
 - Support the new API policy mode for Headscale 0.23-beta1

app/components/Header.tsx

@@ -10,7 +10,6 @@ import TabLink from './TabLink'
 
 interface Properties {
 	readonly data?: {
-		acl: HeadplaneContext['acl']
 		config: HeadplaneContext['config']
 		user?: SessionData['user']
 	}

app/integration/docker.ts

@@ -88,36 +88,6 @@ export default createIntegration<Context>({
 		return context.client !== undefined
 	},
 
-	onAclChange: async (context) => {
-		if (!context.client || !context.container) {
-			return
-		}
-
-		log.info('INTG', 'Sending SIGHUP to Headscale via Docker')
-
-		let attempts = 0
-		while (attempts <= context.maxAttempts) {
-			const response = await context.client.request({
-				method: 'POST',
-				path: `/v1.30/containers/${context.container}/kill?signal=SIGHUP`,
-			})
-
-			if (response.statusCode !== 204) {
-				if (attempts < context.maxAttempts) {
-					attempts++
-					await setTimeout(1000)
-					continue
-				}
-
-				const stringCode = response.statusCode.toString()
-				const body = await response.body.text()
-				throw new Error(`API request failed: ${stringCode} ${body}`)
-			}
-
-			break
-		}
-	},
-
 	onConfigChange: async (context) => {
 		if (!context.client || !context.container) {
 			return

app/integration/integration.ts

@@ -3,7 +3,6 @@ export interface IntegrationFactory<T = any> {
 	name: string
 	context: T
 	isAvailable: (context: T) => Promise<boolean> | boolean
-	onAclChange?: (context: T) => Promise<void> | void
 	onConfigChange?: (context: T) => Promise<void> | void
 }
 

app/integration/kubernetes.ts

@@ -177,15 +177,6 @@ export default createIntegration<Context>({
 		}
 	},
 
-	onAclChange: (context) => {
-		if (!context.pid) {
-			return
-		}
-
-		log.info('INTG', 'Sending SIGHUP to Headscale')
-		kill(context.pid, 'SIGHUP')
-	},
-
 	onConfigChange: (context) => {
 		if (!context.pid) {
 			return

app/integration/proc.ts

@@ -70,14 +70,5 @@ export default createIntegration<Context>({
 			log.error('INTG', 'Failed to read /proc')
 			return false
 		}
-	},
+	}
-
-	onAclChange: (context) => {
-		if (!context.pid) {
-			return
-		}
-
-		log.info('INTG', 'Sending SIGHUP to Headscale')
-		kill(context.pid, 'SIGHUP')
-	},
 })

app/routes/_data.acls._index/route.tsx

@@ -12,7 +12,7 @@ import Notice from '~/components/Notice'
 import Spinner from '~/components/Spinner'
 import { toast } from '~/components/Toaster'
 import { cn } from '~/utils/cn'
-import { loadAcl, loadContext, patchAcl } from '~/utils/config/headplane'
+import { loadContext } from '~/utils/config/headplane'
 import { HeadscaleError, pull, put } from '~/utils/headscale'
 import { getSession } from '~/utils/sessions'
 
@@ -27,7 +27,6 @@ export async function loader({ request }: LoaderFunctionArgs) {
 			session.get('hsApiKey')!,
 		)
 
-		console.log(policy)
 		try {
 			// We have read access, now do we have write access?
 			// Attempt to set the policy to what we just got
@@ -37,7 +36,6 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
 			return {
 				hasAclWrite: true,
-				isPolicyApi: true,
 				currentAcl: policy,
 				aclType: 'json',
 			} as const
@@ -49,35 +47,15 @@ export async function loader({ request }: LoaderFunctionArgs) {
 			if (error.status === 500) {
 				return {
 					hasAclWrite: false,
-					isPolicyApi: true,
 					currentAcl: policy,
 					aclType: 'json',
 				} as const
 			}
 		}
-	} catch (error) {
+	} catch {}
-		// Propagate our errors through normal error handling
-		if (!(error instanceof HeadscaleError)) {
-			throw error
-		}
-
-		// Not on 0.23-beta1 or later
-		if (error.status === 404) {
-			const { data, type, read, write } = await loadAcl()
-			return {
-				hasAclWrite: write,
-				isPolicyApi: false,
-				currentAcl: read ? data : '',
-				aclType: type,
-			}
-		}
-
-		throw error
-	}
 
 	return {
 		hasAclWrite: true,
-		isPolicyApi: true,
 		currentAcl: '',
 		aclType: 'json',
 	} as const
@@ -91,32 +69,17 @@ export async function action({ request }: ActionFunctionArgs) {
 		})
 	}
 
-	const data = await request.json() as { acl: string, api: boolean }
+	const { acl } = await request.json() as { acl: string, api: boolean }
-	if (data.api) {
+	try {
-		try {
+		await put('v1/policy', session.get('hsApiKey')!, {
-			await put('v1/policy', session.get('hsApiKey')!, {
+			policy: acl,
-				policy: data.acl,
-			})
-
-			return json({ success: true })
-		} catch (error) {
-			return json({ success: false }, {
-				status: error instanceof HeadscaleError ? error.status : 500,
-			})
-		}
-	}
-
-	const context = await loadContext()
-	if (!context.acl.write) {
-		return json({ success: false }, {
-			status: 403,
 		})
-	}
 
-	await patchAcl(data.acl)
+		return json({ success: true })
-
+	} catch (error) {
-	if (context.integration?.onAclChange) {
+		return json({ success: false }, {
-		await context.integration.onAclChange(context.integration.context)
+			status: error instanceof HeadscaleError ? error.status : 500,
+		})
 	}
 
 	return json({ success: true })
@@ -175,23 +138,6 @@ export function ErrorBoundary() {
 						<Code>database</Code>
 						.
 					</p>
-					<p className="mb-2 text-md">
-						If you are running an older version of Headscale, the
-						{' '}
-						<Code>ACL_FILE</Code>
-						{' '}
-						environment variable is not set. Refer to the
-						{' '}
-						<Link
-							to="https://github.com/tale/headplane/blob/main/docs/Configuration.md"
-							name="Headplane Configuration"
-						>
-							Headplane Configuration
-						</Link>
-						{' '}
-						documentation for more information on how to set the
-						ACL file and integrate it with Headscale.
-					</p>
 				</div>
 			</div>
 		</div>
@@ -225,25 +171,13 @@ export default function Page() {
 				? undefined
 				: (
 					<div className="mb-4">
-						{data.isPolicyApi
+						<Notice className="w-fit">
-							? (
+							The ACL policy is read-only. You can view the current policy
-								<Notice className="w-fit">
+							but you cannot make changes to it.
-									The ACL policy is read-only. You can view the current policy
+							<br />
-									but you cannot make changes to it.
+							To resolve this, you need to set the ACL policy mode to
-									<br />
+							database in your Headscale configuration.
-									To resolve this, you need to set the ACL policy mode to
+						</Notice>
-									database in your Headscale configuration.
-								</Notice>
-								)
-							: (
-								<Notice className="w-fit">
-									The ACL policy is read-only. You can view the current policy
-									but you cannot make changes to it.
-									<br />
-									To resolve this, you need to configure a Headplane integration
-									or make the ACL_FILE environment variable available.
-								</Notice>
-								)}
 					</div>
 					)}
 
@@ -357,7 +291,6 @@ export default function Page() {
 					setToasted(false)
 					fetcher.submit({
 						acl,
-						api: data.isPolicyApi,
 					}, {
 						method: 'PATCH',
 						encType: 'application/json',

app/routes/_data.dns._index/nameservers.tsx

@@ -91,9 +91,9 @@ function NameserverList({ isGlobal, isDisabled, nameservers, name }: ListProps)
 									})
 								} else {
 									const key = `dns.nameservers.split."${name}"`
+									const list = nameservers.filter((_, i) => i !== index)
 									submit({
-										[key]: nameservers
+										[key]: list.length ? list : null,
-											.filter((_, i) => i !== index),
 									}, {
 										method: 'PATCH',
 										encType: 'application/json',

app/routes/_data.dns._index/rename.tsx

@@ -28,7 +28,7 @@ export default function Modal({ name, disabled }: Properties) {
 				Devices are accessible at
 				{' '}
 				<Code>
-					[device].[user].{name}
+					[device].{name}
 				</Code>
 				{' '}
 				when Magic DNS is enabled.

app/routes/_data.dns._index/route.tsx

@@ -25,7 +25,9 @@ export async function loader() {
 	const dns = {
 		prefixes: config.prefixes,
 		magicDns: config.dns.magic_dns,
-		baseDomain: config.dns.base_domain,
+		baseDomain: config.dns.use_username_in_magic_dns
+			? `[user].${config.dns.base_domain}`
+			: config.dns.base_domain,
 		nameservers: config.dns.nameservers.global,
 		splitDns: config.dns.nameservers.split,
 		searchDomains: config.dns.search_domains,
@@ -107,7 +109,7 @@ export default function Page() {
 					on the tailnet. Devices will be accessible at
 					{' '}
 					<Code>
-						[device].[user].
+						[device].
 						{data.baseDomain}
 					</Code>
 					{' '}

app/routes/_data.machines._index/machine.tsx

@@ -31,6 +31,10 @@ export default function MachineRow({ machine, routes, magic, users }: Props) {
 		tags.unshift('Expired')
 	}
 
+	let prefix = magic?.startsWith('[user]')
+		? magic.replace('[user]', machine.user.name)
+		: magic
+
 	return (
 		<tr
 			key={machine.id}
@@ -102,16 +106,14 @@ export default function MachineRow({ machine, routes, magic, users }: Props) {
 											'justify-between w-full break-keep',
 										)}
 										onPress={async () => {
-											const ip = `${machine.givenName}.${machine.user.name}.${magic}`
+											const ip = `${machine.givenName}.${prefix}`
 											await navigator.clipboard.writeText(ip)
 											toast('Copied hostname to clipboard')
 										}}
 									>
 										{machine.givenName}
 										.
-										{machine.user.name}
+										{prefix}
-										.
-										{magic}
 										<CopyIcon className="w-3 h-3" />
 									</Menu.ItemButton>
 									)

app/routes/_data.machines._index/route.tsx

@@ -32,6 +32,10 @@ export async function loader({ request }: LoaderFunctionArgs) {
 		if (config.dns.magic_dns) {
 			magic = config.dns.base_domain
 		}
+
+		if (config.dns.use_username_in_magic_dns) {
+			magic = `[user].${magic}`
+		}
 	}
 
 	return {
@@ -76,7 +80,7 @@ export default function Page() {
 												based on their name and also at
 												{' '}
 												<Code>
-													[name].[user].
+													[name].
 													{data.magic}
 												</Code>
 											</Tooltip>

app/routes/_data.tsx

@@ -35,7 +35,6 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
 	const context = await loadContext()
 	return {
-		acl: context.acl,
 		config: context.config,
 		user: session.get('user'),
 	}

app/routes/_data.users._index/add.tsx

@@ -36,7 +36,6 @@ export default function Add({ magic }: Props) {
 										{' '}
 										<Code>
 											[machine].
-											{username.length > 0 ? username : '[username]'}
 											.
 											{magic}
 										</Code>

app/routes/_data.users._index/rename.tsx

@@ -59,7 +59,6 @@ export default function Rename({ username, magic }: Props) {
 											{' '}
 											<Code>
 												[machine].
-												{newName.length > 0 ? newName : '[new-username]'}
 												.
 												{magic}
 											</Code>

app/utils/config/headplane.ts

@@ -22,11 +22,6 @@ export interface HeadplaneContext {
 		write: boolean
 	}
 
-	acl: {
-		read: boolean
-		write: boolean
-	}
-
 	oidc?: {
 		issuer: string
 		client: string
@@ -69,7 +64,6 @@ export async function loadContext(): Promise<HeadplaneContext> {
 		cookieSecret,
 		integration: await loadIntegration(),
 		config: contextData,
-		acl: await checkAcl(config),
 		oidc: await checkOidc(config),
 	}
 
@@ -81,75 +75,10 @@ export async function loadContext(): Promise<HeadplaneContext> {
 		: 'Unavailable',
 	)
 
-	log.info('CTXT', 'ACL: %s', context.acl.read
-		? `Found ${context.acl.write ? '' : '(Read Only)'}`
-		: 'Unavailable',
-	)
-
 	log.info('CTXT', 'OIDC: %s', context.oidc ? 'Configured' : 'Unavailable')
 	return context
 }
 
-export async function loadAcl(): Promise<{
-	data: string
-	type: 'json' | 'yaml'
-	read: boolean
-	write: boolean
-}> {
-	let path = process.env.ACL_FILE
-	if (!path) {
-		try {
-			const config = await loadConfig()
-			path = config.acl_policy_path
-		} catch {}
-	}
-
-	if (!path) {
-		throw new Error('No ACL file defined')
-	}
-
-	// Check for attributes
-	let read = false
-	let write = false
-
-	try {
-		await access(path, constants.R_OK)
-		read = true
-	} catch {}
-
-	try {
-		await access(path, constants.W_OK)
-		write = true
-	} catch {}
-
-	const data = await readFile(path, 'utf8')
-
-	// Naive check for YAML over JSON
-	// This is because JSON.parse doesn't support comments
-	try {
-		parse(data)
-		return { data, type: 'yaml', read, write }
-	} catch {
-		return { data, type: 'json', read, write }
-	}
-}
-
-export async function patchAcl(data: string) {
-	let path = process.env.ACL_FILE
-	if (!path) {
-		try {
-			const config = await loadConfig()
-			path = config.acl_policy_path
-		} catch {}
-	}
-
-	if (!path) {
-		throw new Error('No ACL file defined')
-	}
-
-	await writeFile(path, data, 'utf8')
-}
-
 async function checkConfig(path: string) {
 	let config: HeadscaleConfig | undefined
 	try {
@@ -179,32 +108,6 @@ async function checkConfig(path: string) {
 	}
 }
 
-async function checkAcl(config?: HeadscaleConfig) {
-	let path = process.env.ACL_FILE
-	if (!path && config) {
-		path = config.acl_policy_path
-	}
-
-	let read = false
-	let write = false
-	if (path) {
-		try {
-			await access(path, constants.R_OK)
-			read = true
-		} catch {}
-
-		try {
-			await access(path, constants.W_OK)
-			write = true
-		} catch {}
-	}
-
-	return {
-		read,
-		write,
-	}
-}
-
 async function checkOidc(config?: HeadscaleConfig) {
 	const disableKeyLogin = process.env.DISABLE_API_KEY_LOGIN === 'true'
 	const rootKey = process.env.ROOT_API_KEY ?? process.env.API_KEY

app/utils/config/headscale.ts

@@ -45,7 +45,6 @@ const HeadscaleConfig = z.object({
 	disable_check_updates: goBool.default(false),
 	ephemeral_node_inactivity_timeout: goDuration.default('120s'),
 	randomize_client_port: goBool.default(false),
-	acl_policy_path: z.string().optional(),
 
 	acme_email: z.string().optional(),
 	acme_url: z.string().optional(),
@@ -309,6 +308,11 @@ export async function patchConfig(partial: Record<string, unknown>) {
 
 		// Push the remaining element
 		path.push(temp.replaceAll('"', ''))
+		if (value === null) {
+			configYaml.deleteIn(path)
+			continue
+		}
+
 		configYaml.setIn(path, value)
 	}
 

app/utils/sessions.ts

@@ -27,9 +27,8 @@ export const {
 			maxAge: 60 * 60 * 24, // 24 hours
 			path: '/',
 			sameSite: 'lax',
-			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 			secrets: [process.env.COOKIE_SECRET!],
-			secure: true
+			secure: process.env.COOKIE_SECURE !== 'false',
 		}
 	}
 )

compose.yaml

@@ -8,7 +8,7 @@ networks:
     driver: 'bridge'
 services:
   headscale:
-    image: 'headscale/headscale:0.23.0-beta1'
+    image: 'headscale/headscale:0.23.0-beta2'
     container_name: 'headscale'
     restart: 'unless-stopped'
     command: 'serve'

docs/Advanced-Integration.md

@@ -54,14 +54,14 @@ When the ACL file is available for editing, the `Access Controls` tab will
 become available. All of the integrations support automatic reloading of the
 ACLs when the file is changed.
 
-> By default, the ACL file is read from `/etc/headscale/acl_policy.json`. This
+> By default, the ACL file is read from `/etc/headscale/acl_policy.json`.
-can be overridden by setting the `ACL_FILE` environment variable and is also
+> If `policy.path` is set and `policy.mode` is set to `file`, the ACL file will
-overriden by the `acl_policy_path` key in the configuration file if set.
+> be read from the path specified in the configuration file instead.
 
 ## Deployment
 
 Requirements:
-- Headscale 0.23 beta-2 or later
+- Headscale 0.23 or newer
 - Headscale and Headplane need a Reverse Proxy (NGINX, Traefik, Caddy, etc)
 
 Currently there are 3 integration providers that can do this for you:

docs/Basic-Integration.md

@@ -16,7 +16,7 @@ Headplane in a production environment.
 ## Deployment
 
 Requirements:
-- Headscale 0.23 beta-2 or later
+- Headscale 0.23 or newer
 - Headscale and Headplane need a Reverse Proxy (NGINX, Traefik, Caddy, etc)
 
 Docker heavily simplifies the deployment process, but this process can be
@@ -29,7 +29,7 @@ Here is a simple Docker Compose deployment:
 services:
   headplane:
     container_name: headplane
-    image: ghcr.io/tale/headplane:latest
+    image: ghcr.io/tale/headplane:0.3.0
     restart: unless-stopped
     ports:
       - '3000:3000'
@@ -43,6 +43,7 @@ services:
       OIDC_ISSUER: 'https://sso.example.com'
       OIDC_CLIENT_SECRET: 'super_secret_client_secret'
       DISABLE_API_KEY_LOGIN: 'true'
+      COOKIE_SECURE: 'false'
 
       # These are the default values
       HOST: '0.0.0.0'

docs/Configuration.md

@@ -12,8 +12,8 @@ You can configure Headplane using environment variables.
 - **`HOST`**: The host to bind the server to (default: `0.0.0.0`).
 - **`PORT`**: The port to bind the server to (default: `3000`).
 - **`CONFIG_FILE`**: The path to the Headscale `config.yaml` (default: `/etc/headscale/config.yaml`).
-- **`ACL_FILE`**: The path to the ACL file (default: `/etc/headscale/acl_policy.json`, not needed if you have `acl_policy_path` in your config).
 - **`HEADSCALE_CONFIG_UNSTRICT`**: This will disable the strict configuration loader (default: `false`).
+- **`COOKIE_SECURE`**: This option enables the `Secure` flag for cookies, ensuring they are sent only over HTTPS, which helps prevent interception and enhances data security. It should be disabled when using HTTP instead of HTTPS (default: `true`).
 
 #### Docker Integration
 The Docker integration allows Headplane to manage the Headscale docker container.

docs/integration/Docker.md

@@ -37,7 +37,7 @@ that you'll NEED to setup a reverse proxy and this is incomplete:
 ```yaml
 services:
   headscale:
-    image: 'headscale/headscale:0.23.0-beta2'
+    image: 'headscale/headscale:0.23.0'
     container_name: 'headscale'
     restart: 'unless-stopped'
     command: 'serve'
@@ -50,7 +50,7 @@ services:
       TZ: 'America/New_York'
   headplane:
     container_name: headplane
-    image: ghcr.io/tale/headplane:latest
+    image: ghcr.io/tale/headplane:0.3.0
     restart: unless-stopped
     volumes:
       - './data:/var/lib/headscale'
@@ -68,6 +68,9 @@ services:
       HOST: '0.0.0.0'
       PORT: '3000'
         
+      # Only set this to false if you aren't behind a reverse proxy
+      COOKIE_SECURE: 'false'
+
       # Overrides the configuration file values if they are set in config.yaml
       # If you want to share the same OIDC configuration you do not need this
       OIDC_CLIENT_ID: 'headscale'

docs/integration/Kubernetes.md

@@ -88,7 +88,7 @@ spec:
       serviceAccountName: default
       containers:
       - name: headplane
-        image: ghcr.io/tale/headplane:latest
+        image: ghcr.io/tale/headplane:0.3.0
         env:
         - name: COOKIE_SECRET
           value: 'abcdefghijklmnopqrstuvwxyz'
@@ -98,12 +98,16 @@ spec:
           valueFrom:
             fieldRef:
               fieldPath: metadata.name
+
+          # Only set this to false if you aren't behind a reverse proxy
+        - name: COOKIE_SECURE
+          value: 'false'
         volumeMounts:
         - name: headscale-config
           mountPath: /etc/headscale
 
       - name: headscale
-        image: headscale/headscale:0.23.0-beta2
+        image: headscale/headscale:0.23.0
         command: ['serve']
         env:
         - name: TZ