From 20e8994d645a5e107cbdd2495d0b787b447fa4b4 Mon Sep 17 00:00:00 2001
From: Pablo Zmdl <pablo@nextcloud.com>
Date: Thu, 12 Mar 2026 17:35:23 +0100
Subject: [PATCH] Extract onclick handlers to standalone code

This allows to introduce a strict Content-Security-Policy.

Signed-off-by: Pablo Zmdl <pablo@nextcloud.com>
---
 php/public/click-handlers.js                  | 15 +++++++++++++++
 php/public/toggle-dark-mode.js                |  5 ++++-
 php/templates/containers.twig                 | 19 ++++++++++---------
 .../includes/community-containers.twig        |  2 +-
 .../includes/optional-containers.twig         |  4 ++--
 php/templates/layout.twig                     |  2 +-
 6 files changed, 33 insertions(+), 14 deletions(-)
 create mode 100644 php/public/click-handlers.js

diff --git a/php/public/click-handlers.js b/php/public/click-handlers.js
new file mode 100644
index 00000000..e757c9ce
--- /dev/null
+++ b/php/public/click-handlers.js
@@ -0,0 +1,15 @@
+document.addEventListener("DOMContentLoaded", () => {
+    document.querySelectorAll('input[data-confirm]').forEach((element) => {
+        element.addEventListener('click', (event) => {
+            if (!confirm(element.dataset.confirm)) {
+                event.preventDefault();
+            }
+        });
+    });
+
+    document.querySelectorAll('[data-stop-event-propagation="true"]').forEach((element) => {
+        element.addEventListener('click', (event) => {
+            event.stopPropagation();
+        });
+    });
+});
diff --git a/php/public/toggle-dark-mode.js b/php/public/toggle-dark-mode.js
index 8eeba013..44eff9ff 100644
--- a/php/public/toggle-dark-mode.js
+++ b/php/public/toggle-dark-mode.js
@@ -32,4 +32,7 @@ function setThemeIcon(theme) {
 setThemeToDOM(getSavedTheme());
 
 // Apply theme when the page loads
-document.addEventListener('DOMContentLoaded', () => setThemeIcon(getSavedTheme()));
+document.addEventListener('DOMContentLoaded', () => {
+    setThemeIcon(getSavedTheme())
+    document.querySelector('button#theme-toggle')?.addEventListener('click', () => toggleTheme());
+});
diff --git a/php/templates/containers.twig b/php/templates/containers.twig
index 5ab8d8cf..4eddadae 100644
--- a/php/templates/containers.twig
+++ b/php/templates/containers.twig
@@ -28,6 +28,7 @@
 
             {# js for optional containers and additional containers forms #}
             <script type="text/javascript" src="containers-form-submit.js?v6"></script>
+            <script type="text/javascript" src="submit-confirmation.js?v1"></script>
 
             {% set hasBackupLocation = borg_backup_host_location or borg_remote_repo %}
             {% set isAnyRunning = false %}
@@ -153,7 +154,7 @@
                                                 <form method="POST" action="api/docker/backup-check-repair" target="overlay-log">
                                                     <input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
                                                     <input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
-                                                    <input type="submit" value="Check and repair backup integrity" onclick="return confirm('Check and repair backup integrity? Are you sure that you want to check and repair the backup integrity? This should only be done after reading the mentioned documentation.')"/>
+                                                    <input type="submit" value="Check and repair backup integrity" data-confirm='Check and repair backup integrity? Are you sure that you want to check and repair the backup integrity? This should only be done after reading the mentioned documentation.'/>
                                                 </form>
                                             </details>
                                         {% endif %}
@@ -178,7 +179,7 @@
                                                 {% endfor %}
                                             </select><br>
                                             <input type="checkbox" id="restore-exclude-previews" name="restore-exclude-previews"><label for="restore-exclude-previews">Exclude previews from restore which will speed up the restore process but will trigger a scan of the preview folder as soon as the Nextcloud container starts the next time</label><br>
-                                            <input type="submit" value="Restore selected backup" onclick="return confirm('⚠️ Important: If the backup that you want to restore contained any community container, you need to restore the same backup a second time after this attempt so that the community container data is also correctly restored.')"/>
+                                            <input type="submit" value="Restore selected backup" data-confirm='⚠️ Important: If the backup that you want to restore contained any community container, you need to restore the same backup a second time after this attempt so that the community container data is also correctly restored.'/>
                                         </form>
                                     {% endif %}
                                 {% elseif borg_backup_mode == 'restore' %}
@@ -363,7 +364,7 @@
                                         {% if bypass_container_update == true %}
                                             <input type="hidden" name="bypass_container_update" value="{{bypass_container_update}}">
                                         {% endif %}
-                                        <input class="button " type="submit" value="Start and update containers" onclick="return confirm('Start and update containers? You should consider creating a backup first.')" />
+                                        <input class="button " type="submit" value="Start and update containers" data-confirm='Start and update containers? You should consider creating a backup first.' />
                                     </form>
                                 {% endif %}
                             {% endif %}
@@ -410,7 +411,7 @@
                                                 <form method="POST" action="api/docker/backup-check-repair" target="overlay-log">
                                                     <input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
                                                     <input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
-                                                    <input type="submit" value="Check and repair backup integrity" onclick="return confirm('Check and repair backup integrity? Are you sure that you want to check and repair the backup integrity? This should only be done after reading the mentioned documentation.')"/>
+                                                    <input type="submit" value="Check and repair backup integrity" data-confirm='Check and repair backup integrity? Are you sure that you want to check and repair the backup integrity? This should only be done after reading the mentioned documentation.'/>
                                                 </form>
                                             </details>
                                         {% endif %}
@@ -475,7 +476,7 @@
                                         <form method="POST" action="api/docker/backup" class="xhr">
                                             <input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
                                             <input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
-                                            <input type="submit" value="Create backup" onclick="return confirm('Create backup? Are you sure that you want to create a backup? This will stop all running containers and create the backup.')" />
+                                            <input type="submit" value="Create backup" data-confirm='Create backup? Are you sure that you want to create a backup? This will stop all running containers and create the backup.' />
                                         </form>
 
                                         {% if has_backup_run_once == true %}
@@ -487,7 +488,7 @@
                                             <form method="POST" action="api/docker/backup-check" target="overlay-log">
                                                 <input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
                                                 <input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
-                                                <input type="submit" value="Check backup integrity" onclick="return confirm('Check backup integrity? Are you sure that you want to check the backup? This can take a long time depending on the size of your backup.')" />
+                                                <input type="submit" value="Check backup integrity" data-confirm='Check backup integrity? Are you sure that you want to check the backup? This can take a long time depending on the size of your backup.' />
                                             </form>
 
                                             <h3>Backup restore</h3>
@@ -500,7 +501,7 @@
                                                         <option value="{{ restore_time }}">{{ restore_time }} UTC</option>
                                                     {% endfor %}
                                                 </select>
-                                                <input type="submit" value="Restore selected backup" onclick="return confirm('Restore the selected backup? Are you sure that you want to restore the selected backup? This will stop all running containers and restore the selected backup. It is recommended to create a backup first. You might also want to check the backup integrity.')" />
+                                                <input type="submit" value="Restore selected backup" data-confirm='Restore the selected backup? Are you sure that you want to restore the selected backup? This will stop all running containers and restore the selected backup. It is recommended to create a backup first. You might also want to check the backup integrity.' />
                                             </form>
 
                                             <h3>Update backup list</h3>
@@ -567,7 +568,7 @@
                                             <input type="hidden" name="delete_borg_backup_location_vars" value="yes"/>
                                             <input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
                                             <input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
-                                            <input type="submit" value="Reset backup location" onclick="return confirm('Are you sure that you want to reset the backup location?')" />
+                                            <input type="submit" value="Reset backup location" data-confirm='Are you sure that you want to reset the backup location?' />
                                         </form>
                                     {% endif %}
                                     {% if has_backup_run_once == true %}
@@ -613,7 +614,7 @@
                                     <input type="text" id="timezone" name="timezone" placeholder="Europe/Berlin" />
                                     <input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
                                     <input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
-                                    <input type="submit" value="Submit timezone" onclick="return confirm('Are you sure that this is a valid timezone? Please double check by following the wikipedia article and checking the correct column. If the timezone is not valid, it will break the startup since the database will not be correctly initialized and you will end up in a startup loop.')" />
+                                    <input type="submit" value="Submit timezone" data-confirm='Are you sure that this is a valid timezone? Please double check by following the wikipedia article and checking the correct column. If the timezone is not valid, it will break the startup since the database will not be correctly initialized and you will end up in a startup loop.' />
                                 </form>
                                 <p>You need to make sure that the timezone that you enter is valid. An example is <strong>Europe/Berlin</strong>. You can get valid values by looking at the 'TZ identifier' column of this list: <a target="_blank" href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List"><strong>click here</strong></a>. The default is <strong>Etc/UTC</strong> if nothing is entered.</p>
                             {% else %}
diff --git a/php/templates/includes/community-containers.twig b/php/templates/includes/community-containers.twig
index 66cceb2b..da1dd26d 100644
--- a/php/templates/includes/community-containers.twig
+++ b/php/templates/includes/community-containers.twig
@@ -37,6 +37,6 @@
             </p>
         {% endfor %}
 
-        <input id="community-form-submit" type="submit" value="Save changes" onclick="return confirm('Are you sure that you read the documentation of all community containers that you enabled? If no, please do not continue as this might break your instance!')" />
+        <input id="community-form-submit" type="submit" value="Save changes" data-confirm='Are you sure that you read the documentation of all community containers that you enabled? If no, please do not continue as this might break your instance!' />
     </form>
 </details>
diff --git a/php/templates/includes/optional-containers.twig b/php/templates/includes/optional-containers.twig
index 980d8d0b..785cefe2 100644
--- a/php/templates/includes/optional-containers.twig
+++ b/php/templates/includes/optional-containers.twig
@@ -41,7 +41,7 @@
                 <li>Best support for legacy files</li>
             </ul>
             {% if isAnyRunning == false %}
-                <a href="https://www.collaboraoffice.com/code/" target="_blank" class="office-learn-more" onclick="event.stopPropagation();">
+                <a href="https://www.collaboraoffice.com/code/" target="_blank" class="office-learn-more" data-stop-event-propagation="true">
                     Learn more
                     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle; margin-left: 4px;">
                         <path d="M6 12L10 8L6 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -76,7 +76,7 @@
                 <li>Limited ODF compatibility</li>
             </ul>
             {% if isAnyRunning == false %}
-                <a href="https://www.onlyoffice.com/" target="_blank" class="office-learn-more" onclick="event.stopPropagation();">
+                <a href="https://www.onlyoffice.com/" target="_blank" class="office-learn-more" data-stop-event-propagation="true">
                     Learn more
                     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle; margin-left: 4px;">
                         <path d="M6 12L10 8L6 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
diff --git a/php/templates/layout.twig b/php/templates/layout.twig
index 39f8f45b..6deaf6af 100644
--- a/php/templates/layout.twig
+++ b/php/templates/layout.twig
@@ -15,7 +15,7 @@
             <div class="loader"></div>
             <iframe name="overlay-log" id="overlay-log"></iframe>
         </div>
-        <button id="theme-toggle" onclick="toggleTheme()">
+        <button id="theme-toggle">
             <span id="theme-icon"></span>
         </button>
     </body>