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
This commit is contained in:
kyle
2026-06-11 10:55:30 -07:00
parent 3f51a8ca48
commit aa06394aa9
5 changed files with 103 additions and 30 deletions
+17
View File
@@ -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);
+64 -27
View File
@@ -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 authTokens = dataEl ? JSON.parse(dataEl.dataset.authTokens || '{}') : {};
const configuredRooms = parseData(dataEl, 'configuredRooms');
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 {
const resp = await fetch(OC.generateUrl('/apps/' + APP_ID + '/rooms'));
const data = await resp.json();
fetch(OC.generateUrl('/apps/' + APP_ID + '/rooms')).then(function (resp) {
return 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);
// 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');
input.type = 'text';
input.value = token;
input.readOnly = true;
input.className = 'nc-token-input';
var urlInput = document.createElement('input');
urlInput.type = 'text';
urlInput.value = fullUrl;
urlInput.readOnly = true;
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);
}
}
}
+2
View File
@@ -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
+17
View File
@@ -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),
],
+2 -2
View File
@@ -16,8 +16,8 @@
<!-- Config data passed to JS via data attributes -->
<div id="nc-config-data"
data-configured-rooms="<?= json_encode($rooms ?? []) ?>"
data-auth-tokens="<?= json_encode($authTokens ?? []) ?>"
data-configured-rooms="<?= htmlspecialchars(json_encode($rooms ?? []), ENT_QUOTES, 'UTF-8') ?>"
data-auth-tokens="<?= htmlspecialchars(json_encode($authTokens ?? []), ENT_QUOTES, 'UTF-8') ?>"
style="display:none;">
</div>