Remove inline handlers & escape input

output/js/constants.js

@@ -3,6 +3,7 @@
 // change in the foreseeable future.
 
 export const dom = {
+	/** @return {HTMLTableElement | null} */
 	tbl_communities: () => document.getElementById("tbl_communities"),
 	last_checked: () => document.getElementById("last_checked_value"),
 	qr_modal: (communityID) => document.getElementById(`modal_${communityID}`),

output/main.js

@@ -60,12 +60,26 @@ const transformJoinURL = (join_link) => {
 	});
 }
 
-function onLoad(timestamp) {
-	setLastChecked(timestamp);
+function getTimestamp() {
+	const timestampRaw =
+		document.querySelector('meta[name=timestamp]')
+		?.getAttribute('content');
+	if (!timestampRaw) return null;
+	const timestamp = parseInt(timestampRaw);
+	if (Number.isNaN(timestamp)) return null;
+	return timestamp;
+}
+
+function onLoad() {
+	const timestamp = getTimestamp();
+	if (timestamp !== null) {
+		setLastChecked(timestamp);
+	}
 	hideBadCommunities();
 	sortTable(COLUMN.NAME);
 	createJoinLinkButtons();
 	markSortableColumns();
+	addQRModalHandlers();
 }
 
 function displayQRModal(communityID) {
@@ -76,6 +90,24 @@ function hideQRModal(communityID) {
 	dom.qr_modal(communityID).style.display = "none";
 }
 
+function addQRModalHandlers() {
+	const rows = dom.tbl_communities()?.rows;
+	if (!rows) throw new Error("Rows not found");
+	for (const row of rows) {
+		const communityID = row.getAttribute('--data-identifier');
+		row.querySelector('.td_qr_code')?.addEventListener(
+			'click',
+			() => displayQRModal(communityID)
+		);
+		const closeButton =
+			dom.qr_modal(communityID)?.querySelector('.qr_code_modal_close');
+		closeButton?.addEventListener(
+			'click',
+			() => hideQRModal(communityID)
+		);
+	}
+}
+
 function createJoinLinkButtons() {
 	const join_URLs = dom.join_urls();
 	Array.from(join_URLs).forEach((td_url) => {
@@ -252,9 +284,13 @@ function markSortableColumns() {
 	const table = dom.tbl_communities();
 	const header_cells = table.querySelectorAll('th');
 	for (let colno = 0; colno < header_cells.length; colno++) {
-	  if (!columnIsSortable(colno)) continue;
+		if (!columnIsSortable(colno)) continue;
 		header_cells[colno].classList.add('sortable');
-	}
+		header_cells[colno].addEventListener(
+			'click',
+			() => sortTable(colno)
+		)
+	};
 }
 
 /**
@@ -278,13 +314,7 @@ function sortTable(column) {
 	setSortState(table, { ascending, column });
 }
 
-// html.js for styling purposes
-window.document.documentElement.classList.add("js");
-
-// Crude way to export from module script due to inline event handlers.
-// Ideally, all handlers would be attached from JS via addEventListener.
-Object.assign(window, {
-	onLoad, sortTable, displayQRModal,
-	hideQRModal, copyToClipboard
-});
+// `html.js` selector for styling purposes
+document.documentElement.classList.add("js");
 
+document.addEventListener('DOMContentLoaded', () => onLoad());

sites/+components/qr_modals.php

@@ -34,7 +34,7 @@
 <?php foreach ($rooms as $id => $room): ?>
 	<div id="modal_<?=$id?>" class="qr-code-modal">
 		<div class="qr-code-modal-content">
-			<span class="qr-code-modal-close" onclick='hideQRModal("<?=$id?>")'>
+			<span class="qr-code-modal-close">
 				&times;
 			</span>
 			<img

sites/+components/tbl_communities.php

@@ -11,7 +11,7 @@
 		global $TABLE_COLUMNS;
 		$column = $TABLE_COLUMNS[$colno];
 		if (!column_sortable($column['id'])) return "";
-		return " onclick='sortTable($colno)' title='Click to sort this column'";
+		return " title='Click to sort this column'";
 	}
 	
 	$TABLE_COLUMNS = [
@@ -51,17 +51,28 @@
 
 		$hostname = explode("//", $room->join_link)[1];
 		$hostname = explode("/", $hostname)[0];
+
+		// Escape external input.
+		$id = htmlspecialchars($id);
+		$language = htmlspecialchars($room->language);
+		$name = htmlspecialchars($room->name);
+		$desc = htmlspecialchars($room->description);
+		$users = htmlspecialchars($room->active_users);
+		$preview_link = htmlspecialchars($room->preview_link);
+		$join_link = htmlspecialchars($room->join_link);
+		// TODO: Do not forget to rename this escape when merging!
+		$token = htmlspecialchars($token);
+		$hostname = htmlspecialchars($hostname);
 	?>
 
-	<tr id="<?=$id?>">
+	<tr id="<?=$id?>" --data-identifier="<?=$id?>">
 		<td class="td_identifier"><?=$id?></td>
-		<td class="td_language"><?=$room->language?></td>
-		<td class="td_name"><?=$room->name?></td>
-		<td class="td_description"
-			><?=$room->description?></td>
-		<td class="td_users"><?=$room->active_users?></td>
+		<td class="td_language"><?=$language?></td>
+		<td class="td_name"><?=$name?></td>
+		<td class="td_description"><?=$desc?></td>
+		<td class="td_users"><?=$users?></td>
 		<td class="td_preview">
-			<a href="<?=$room->preview_link?>" target="_blank" rel="noopener noreferrer">
+			<a href="<?=$preview_link?>" target="_blank" rel="noopener noreferrer">
 				<?php if (str_starts_with($room->preview_link, 'http://')): ?>
 					<span class="protocol-indicator protocol-http">HTTP</span>
 				<?php endif; ?>
@@ -74,7 +85,6 @@
 			<img 
 				class="qr-code-icon" 
 				src="qrcode-solid.svg"
-				onclick='displayQRModal("<?=$id?>")'
 				alt="Pictogram of a QR code"
 			>
 		</td>
@@ -87,10 +97,10 @@
 			</div>
 		</td>
 		<td class="td_join_url">
-			<div class="join_url_container" data-url="<?=$room->join_link?>">
-				<a class="join_url show-from-w5" title="<?=$room->join_link?>"
-					><?=truncate($room->join_link, 32)?></a>
-				<a class="noscript" href="<?=$room->join_link?>"
+			<div class="join_url_container" data-url="<?=$join_link?>">
+				<a class="join_url show-from-w5" title="<?=$join_link?>"
+					><?=truncate($join_link, 32)?></a>
+				<a class="noscript" href="<?=$join_link?>"
 					>Copy link</a>
 			</div>
 		</td>

sites/index.php

@@ -14,10 +14,11 @@
 		<?php include "+components/page-head.php" ?>
 
 		<link rel="stylesheet" href="styles2.css">
-		<script type="module" src="main.js"></script>
+		<script type="module" src="./main.js"></script>
 		<title>Self-updating list of active Session communities</title>
+		<meta name="timestamp" content="<?=$timestamp?>">
 	</head>
-	<body onload="onLoad(<?php echo $timestamp ?>)">
+	<body>
 		<header>
 			<div id="header-start"></div>
 			<div id="header-end">