feat: enhance webhook settings UI and security: Mostly working, just final post not functioning

- Add CSS styles for token URL input and hints
- Implement safe data attribute parsing in settings.js
- Refactor room fetching logic to use promise chains and auto-fetch on load
- Display full webhook URLs in the settings UI instead of raw tokens
- Generate URL-safe base64 tokens to prevent encoding issues
- Add #[PublicPage] attribute to WebhookController for unauthenticated delivery
- Filter out internal Nextcloud Talk system rooms from the room picker
- Add OCS-ApiRequest header to bot API requests
- Sanitize data attributes in templates to prevent XSS

css/adminSettings.css

@@ -37,6 +37,23 @@
     padding: 4px 8px;
     border-radius: 3px;
 }
+.nc-token-url-input {
+    flex: 1;
+    font-family: monospace;
+    font-size: 0.8em;
+    background: var(--color-main-background);
+    border: 1px solid var(--color-border);
+    padding: 4px 8px;
+    border-radius: 3px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.nc-token-hint {
+    color: var(--color-text-lighter);
+    font-size: 0.85em;
+    margin: 4px 0;
+}
 .nc-token-copy {
     padding: 4px 8px;
     background: var(--color-primary-element);

js/settings.js

@@ -2,9 +2,16 @@ document.addEventListener('DOMContentLoaded', function () {
     const APP_ID = 'ncdiscordhook';
 
     // Read config passed via data attributes on the page
+    function parseData(el, key) {
+        if (!el || !el.dataset || !el.dataset[key]) return {};
+        try {
+            var val = JSON.parse(el.dataset[key]);
+            return (val && typeof val === 'object') && !Array.isArray(val) ? val : {};
+        } catch (e) { return {}; }
+    }
     const dataEl = document.getElementById('nc-config-data');
-    const configuredRooms = dataEl ? JSON.parse(dataEl.dataset.configuredRooms || '{}') : {};
+    const configuredRooms = parseData(dataEl, 'configuredRooms');
-    const authTokens = dataEl ? JSON.parse(dataEl.dataset.authTokens || '{}') : {};
+    const authTokens = parseData(dataEl, 'authTokens');
 
     // Elements
     const botPasswordInput = document.getElementById('nc-bot-password');
@@ -30,26 +37,27 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 
     // Fetch available Talk rooms
-    fetchRoomsBtn.addEventListener('click', async function () {
+    function fetchRooms() {
         fetchRoomsBtn.disabled = true;
         fetchRoomsBtn.textContent = 'Fetching...';
 
-        try {
+        fetch(OC.generateUrl('/apps/' + APP_ID + '/rooms')).then(function (resp) {
-            const resp = await fetch(OC.generateUrl('/apps/' + APP_ID + '/rooms'));
+            return resp.json();
-            const data = await resp.json();
+        }).then(function (data) {
-
             roomsList.innerHTML = '';
 
             if (data.length === 0) {
                 roomsList.innerHTML = '<p class="nc-empty">No Talk rooms found. Create rooms first via the Nextcloud Talk settings.</p>';
+                fetchRoomsBtn.textContent = 'Fetch Rooms';
+                fetchRoomsBtn.disabled = false;
                 return;
             }
 
             data.forEach(function (room) {
-                const label = document.createElement('label');
+                var label = document.createElement('label');
                 label.className = 'nc-room-item';
 
-                const cb = document.createElement('input');
+                var cb = document.createElement('input');
                 cb.type = 'checkbox';
                 cb.value = room.token;
                 cb.id = 'room-' + room.token;
@@ -59,7 +67,7 @@ document.addEventListener('DOMContentLoaded', function () {
                 }
                 cb.addEventListener('change', function () { toggleRoomTokens(room.token, this.checked); });
 
-                const nameSpan = document.createElement('span');
+                var nameSpan = document.createElement('span');
                 nameSpan.textContent = room.name || room.token;
 
                 label.appendChild(cb);
@@ -67,7 +75,7 @@ document.addEventListener('DOMContentLoaded', function () {
                 roomsList.appendChild(label);
 
                 // Auth tokens container
-                const tokenDiv = document.createElement('div');
+                var tokenDiv = document.createElement('div');
                 tokenDiv.className = 'nc-room-tokens';
                 tokenDiv.id = 'tokens-' + room.token;
                 tokenDiv.style.display = 'none';
@@ -79,42 +87,65 @@ document.addEventListener('DOMContentLoaded', function () {
             });
 
             fetchRoomsBtn.textContent = 'Refresh Rooms';
-        } catch (err) {
+            fetchRoomsBtn.disabled = false;
+        }).catch(function (err) {
             showStatus('Failed to fetch rooms', 'error');
             fetchRoomsBtn.textContent = 'Fetch Rooms';
-        }
+            fetchRoomsBtn.disabled = false;
+        });
+    }
+    fetchRoomsBtn.addEventListener('click', fetchRooms);
 
-        fetchRoomsBtn.disabled = false;
+    // Auto-fetch rooms on load if there are already configured rooms
-    });
+    if (Object.keys(configuredRoomsState).length > 0) {
+        fetchRooms();
+    }
 
     // Render auth tokens for a room
     function renderTokens(roomToken, container) {
         container.innerHTML = '';
 
         const tokens = authTokensState[roomToken] || [];
+        // Build the full webhook URL with server origin
+        var webhookPath = OC.generateUrl('/apps/' + APP_ID + '/webhook/') + roomToken + '/{token}';
+        var webhookUrl = window.location.protocol + '//' + window.location.host + webhookPath;
+
+        if (tokens.length === 0) {
+            // Show a hint that they can generate a token
+            var hint = document.createElement('p');
+            hint.className = 'nc-token-hint';
+            hint.textContent = 'No tokens yet. Generate one below.';
+            hint.style.color = '#888';
+            hint.style.fontSize = '0.85em';
+            container.appendChild(hint);
+        }
 
         tokens.forEach(function (token) {
-            const row = document.createElement('div');
+            // Display the full webhook URL (encode token for URL safety)
+            var fullUrl = webhookUrl.replace('{token}', encodeURIComponent(token));
+
+            var row = document.createElement('div');
             row.className = 'nc-token-row';
 
-            const input = document.createElement('input');
+            var urlInput = document.createElement('input');
-            input.type = 'text';
+            urlInput.type = 'text';
-            input.value = token;
+            urlInput.value = fullUrl;
-            input.readOnly = true;
+            urlInput.readOnly = true;
-            input.className = 'nc-token-input';
+            urlInput.className = 'nc-token-url-input';
+            urlInput.title = fullUrl;
 
-            const copyBtn = document.createElement('button');
+            var copyBtn = document.createElement('button');
             copyBtn.type = 'button';
             copyBtn.className = 'nc-token-copy';
             copyBtn.textContent = 'Copy';
             copyBtn.addEventListener('click', function () {
-                navigator.clipboard.writeText(token).then(() => {
+                navigator.clipboard.writeText(fullUrl).then(function () {
                     copyBtn.textContent = 'Copied!';
-                    setTimeout(() => { copyBtn.textContent = 'Copy'; }, 2000);
+                    setTimeout(function () { copyBtn.textContent = 'Copy'; }, 2000);
                 });
             });
 
-            const revokeBtn = document.createElement('button');
+            var revokeBtn = document.createElement('button');
             revokeBtn.type = 'button';
             revokeBtn.className = 'nc-token-revoke';
             revokeBtn.textContent = 'Revoke';
@@ -130,14 +161,14 @@ document.addEventListener('DOMContentLoaded', function () {
                 }
             });
 
-            row.appendChild(input);
+            row.appendChild(urlInput);
             row.appendChild(copyBtn);
             row.appendChild(revokeBtn);
             container.appendChild(row);
         });
 
         // Generate new token button
-        const genBtn = document.createElement('button');
+        var genBtn = document.createElement('button');
         genBtn.type = 'button';
         genBtn.className = 'nc-generate-token';
         genBtn.textContent = '+ Generate Auth Token';
@@ -145,7 +176,10 @@ document.addEventListener('DOMContentLoaded', function () {
             if (!authTokensState[roomToken]) {
                 authTokensState[roomToken] = [];
             }
-            authTokensState[roomToken].push(btoa(Math.random().toString(36).substring(2) + Date.now().toString(36)).replace(/=/g, ''));
+            // Use URL-safe base64 (no +, /, = characters)
+            var raw = Math.random().toString(36).substring(2) + Date.now().toString(36);
+            var token = btoa(raw).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+            authTokensState[roomToken].push(token);
             renderTokens(roomToken, container);
             container.style.display = 'block';
         });
@@ -157,6 +191,9 @@ document.addEventListener('DOMContentLoaded', function () {
         const tokenDiv = document.getElementById('tokens-' + roomToken);
         if (tokenDiv) {
             tokenDiv.style.display = checked ? 'block' : 'none';
+            if (checked) {
+                renderTokens(roomToken, tokenDiv);
+            }
         }
     }
 

lib/Controller/WebhookController.php

@@ -16,6 +16,7 @@ use OCP\IUserSession;
 use OCP\AppFramework\Controller\Attribute\AdminRequired;
 use Psr\Log\LoggerInterface;
 use OCP\AppFramework\Http\Attribute\NoCSRFRequired;
+use OCP\AppFramework\Http\Attribute\PublicPage;
 use OCP\AppFramework\Http\Attribute\SubAdminRequired;
 
 class WebhookController extends Controller {
@@ -35,6 +36,7 @@ class WebhookController extends Controller {
      *
      * URL: POST /apps/ncdiscordhook/webhook/{roomToken}/{authToken}
      */
+    #[PublicPage]
     #[NoCSRFRequired]
     public function receive(string $roomToken, string $authToken): DataResponse {
         // Validate auth token

lib/Service/TalkService.php

@@ -22,6 +22,13 @@ class TalkService {
     private const APP_ID = 'ncdiscordhook';
     private const IMAGES_DIR = 'NCdiscordhook-images';
 
+    // Internal system rooms to hide from the room picker.
+    private const INTERNAL_ROOMS = [
+        'talk-bot',
+        'Note to self',
+        "Let's get started!",
+    ];
+
     private IClient $client;
     private IConfig $config;
     private IDBConnection $db;
@@ -238,6 +245,15 @@ class TalkService {
                 'rooms' => array_keys($rooms),
             ]);
 
+            // Filter out internal system rooms.
+            foreach (self::INTERNAL_ROOMS as $internal) {
+                foreach ($rooms as $token => $name) {
+                    if (mb_strtolower($name) === mb_strtolower($internal)) {
+                        unset($rooms[$token]);
+                    }
+                }
+            }
+
             return $rooms;
         } catch (\Exception $e) {
             $this->logger->error('NCdiscordhook: room listing exception', [
@@ -602,6 +618,7 @@ class TalkService {
                 'basic' => [$bot->getUID(), $botPassword],
                 'headers' => [
                     'OCS-Expect' => '100',
+                    'OCS-ApiRequest' => 'true',
                     'Content-Type' => 'application/x-www-form-urlencoded',
                     'Content-Length' => (string) strlen($body),
                 ],

templates/adminSettings.php

@@ -16,8 +16,8 @@
 
 <!-- Config data passed to JS via data attributes -->
 <div id="nc-config-data"
-     data-configured-rooms="<?= json_encode($rooms ?? []) ?>"
+     data-configured-rooms="<?= htmlspecialchars(json_encode($rooms ?? []), ENT_QUOTES, 'UTF-8') ?>"
-     data-auth-tokens="<?= json_encode($authTokens ?? []) ?>"
+     data-auth-tokens="<?= htmlspecialchars(json_encode($authTokens ?? []), ENT_QUOTES, 'UTF-8') ?>"
      style="display:none;">
 </div>