More CSP fixes (#2955)

* Fix CSP issue with time format switch on wallet transactions page

* Fix CSP issue with invoice modal link on invoices list page

* Fix CSP issue on FIDO2 auth page

* Fix JS error on FIDO2 auth page

* Minor UI code improvements

BTCPayServer/Views/Account/LoginWithFido2.cshtml

@@ -18,14 +18,17 @@
                     <p>Insert your security key into your computer's USB port. If it has a button, tap on it.</p>
                 </div>
                 <p id="error-message" class="d-none alert alert-danger"></p>
-                <a id="btn-retry" class="btn btn-secondary d-none" href="javascript:window.location.reload()" csp-allow>Retry</a>
+                <button id="btn-retry" class="btn btn-secondary d-none" type="button">Retry</button>
             </div>
         </div>
     </div>
 </section>
+
 <script>
+    document.getElementById('btn-retry').addEventListener('click', () => window.location.reload())
     // send to server for registering    
     window.makeAssertionOptions = @Safe.Json(Model.Data);
 </script>
-<script src="~/js/webauthn/helpers.js" ></script>
-<script src="~/js/webauthn/login.js" ></script>
+<script src="~/js/webauthn/helpers.js" asp-append-version="true"></script>
+<script src="~/js/webauthn/login.js" asp-append-version="true"></script>
+

BTCPayServer/Views/Invoice/ListInvoices.cshtml

@@ -87,7 +87,7 @@
         delegate('click', '#switchTimeFormat', switchTimeFormat)
 
         delegate('click', '.changeInvoiceState', e => {
-            const { invoiceId, newState } = e.target.dataset
+            const { invoiceId, newState } = e.target.dataset;
             const pavpill = $("#pavpill_" + invoiceId);
             const originalHtml = pavpill.html();
             pavpill.html("<span class='fa fa-bitcoin fa-spin' style='margin-left:16px;'></span>");
@@ -102,7 +102,12 @@
                     alert("Invoice state update failed");
                 });
         })
-
+        
+        delegate('click', '.showInvoice', e => {
+            e.preventDefault();
+            const { invoiceId } = e.target.dataset;
+            btcpay.showInvoice(invoiceId);
+        })
 
         $('#btnCustomRangeDate').on('click', function (sender) {
             var filterString = "";
@@ -412,8 +417,8 @@
                                 @if (invoice.ShowCheckout)
                                 {
                                     <span>
-                                        <a asp-action="Checkout" class="invoice-checkout-link" id="invoice-checkout-@invoice.InvoiceId" asp-route-invoiceId="@invoice.InvoiceId">Checkout</a>
-                                        <a href="javascript:btcpay.showInvoice('@invoice.InvoiceId')" csp-allow>[^]</a>
+                                        <a asp-action="Checkout" asp-route-invoiceId="@invoice.InvoiceId" class="invoice-checkout-link" id="invoice-checkout-@invoice.InvoiceId">Checkout</a>
+                                        <a asp-action="Checkout" asp-route-invoiceId="@invoice.InvoiceId" class="showInvoice only-for-js" data-invoice-id="@invoice.InvoiceId">[^]</a>
                                         @if (!invoice.CanMarkStatus)
                                         {
                                             <span>-</span>

BTCPayServer/Views/Wallets/WalletTransactions.cshtml

@@ -3,60 +3,73 @@
     Layout = "../Shared/_NavLayout.cshtml";
     ViewData.SetActivePageAndTitle(WalletsNavPages.Transactions, $"{Model.CryptoCode} Transactions", Context.GetStoreData().StoreName);
 }
-<style type="text/css">
-    .smMaxWidth {
-        max-width: 200px;
-    }
 
-    @@media (min-width: 768px) {
+@section PageHeadContent {
+    <style>
         .smMaxWidth {
-            max-width: 400px;
+            max-width: 200px;
         }
-    }
 
-    .unconf > * {
-        opacity: 0.5;
-    }
+        @@media (min-width: 768px) {
+            .smMaxWidth {
+                max-width: 400px;
+            }
+        }
 
-    .switchTimeFormat {
-        display: block;
-        max-width: 150px;
-        width: 150px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
+        .unconf > * {
+            opacity: 0.5;
+        }
 
-    .badge-container:not(:last-child) {
-        margin-bottom: 4px;
-    }
+        .switchTimeFormat {
+            display: block;
+            max-width: 150px;
+            width: 150px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
 
-    .badge-container {
-        display: flex;
-        align-items: center;
-        flex-wrap: nowrap;
-    }
+        .badge-container:not(:last-child) {
+            margin-bottom: 4px;
+        }
 
-    .removeTransactionLabelForm {
-        display: inline;
-        position: absolute;
-        right: 4px;
-    }
+        .badge-container {
+            display: flex;
+            align-items: center;
+            flex-wrap: nowrap;
+        }
 
-    .removeTransactionLabelForm button {
-        cursor: pointer;
-        display: inline;
-        padding: 0;
-        background-color: transparent;
-        border: 0;
-    }
+        .removeTransactionLabelForm {
+            display: inline;
+            position: absolute;
+            right: 4px;
+        }
 
-    .transaction-details-icon {
-        position: relative;
-        padding-left: 12px;
-        left: -8px;
-    }
-</style>
+        .removeTransactionLabelForm button {
+            cursor: pointer;
+            display: inline;
+            padding: 0;
+            background-color: transparent;
+            border: 0;
+        }
+
+        .transaction-details-icon {
+            position: relative;
+            padding-left: 12px;
+            left: -8px;
+        }
+    </style>
+}
+
+@section PageFootContent {
+    @*Without async, somehow selenium do not manage to click on links in this page*@
+    <script src="~/modal/btcpay.js" asp-append-version="true" async></script>
+
+    @* Custom Range Modal *@
+    <script>
+        delegate('click', '#switchTimeFormat', switchTimeFormat)
+    </script>
+}
 
 <h4 class="mb-3">@ViewData["PageTitle"]</h4>
 <p>
@@ -71,12 +84,11 @@
     {
         <div class="row mt-4">
             <div class="col-md-12">
-                <div class="d-flex flex-row align-items-start flex-wrap card card-body p-2">
+                <div class="d-flex flex-row align-items-center flex-wrap card card-body px-3 py-2">
                     <span class="me-2">Filter by label:</span>
                     @foreach (var label in Model.Labels)
                     {
-                        <a asp-route-labelFilter="@label.Text" class="badge me-2 my-1 position-relative text-white d-block"
-                           style="background-color: @label.Color;"><span class="text-white">@label.Text</span></a>
+                        <a asp-route-labelFilter="@label.Text" class="badge me-2 my-1 position-relative text-white d-block" style="background-color: @label.Color;">@label.Text</a>
                     }
                 </div>
             </div>
@@ -89,7 +101,7 @@
                 <tr>
                     <th style="min-width: 90px;" class="col-md-auto">
                         Date
-                        <a href="javascript:switchTimeFormat()" csp-allow>
+                        <a id="switchTimeFormat" href="#">
                             <span class="fa fa-clock-o" title="Switch date format"></span>
                         </a>
                     </th>

BTCPayServer/wwwroot/js/webauthn/helpers.js

@@ -74,7 +74,8 @@ function showErrorAlert(message, error) {
     }
     console.error(message, footermsg);
     
-    document.getElementById("info-message").classList.add("d-none");
+    const $info = document.getElementById("info-message");
+    if ($info) $info.classList.add("d-none");
     document.getElementById("btn-retry").classList.remove("d-none");
     document.getElementById("error-message").textContent = message;
     for(let el of document.getElementsByClassName("fido-running")){

BTCPayServer/wwwroot/js/webauthn/login.js

@@ -1,12 +1,9 @@
 
 if (detectFIDOSupport() && makeAssertionOptions){
-
     login(makeAssertionOptions);
 }
 
 async function login(makeAssertionOptions) {
-
-    console.log("Assertion Options Object", makeAssertionOptions);
     const challenge = makeAssertionOptions.challenge.replace(/-/g, "+").replace(/_/g, "/");
     makeAssertionOptions.challenge = Uint8Array.from(atob(challenge), c => c.charCodeAt(0));
 
@@ -16,9 +13,6 @@ async function login(makeAssertionOptions) {
         listItem.id = Uint8Array.from(atob(fixedId), c => c.charCodeAt(0));
     });
 
-    console.log("Assertion options", makeAssertionOptions);
-
-
     let credential;
     try {
         credential = await navigator.credentials.get({ publicKey: makeAssertionOptions })
@@ -40,7 +34,6 @@ async function login(makeAssertionOptions) {
  * @param {any} assertedCredential
  */
 async function verifyAssertionWithServer(assertedCredential) {
-
     // Move data into Arrays incase it is super long
     let authData = new Uint8Array(assertedCredential.response.authenticatorData);
     let clientDataJSON = new Uint8Array(assertedCredential.response.clientDataJSON);
@@ -57,7 +50,6 @@ async function verifyAssertionWithServer(assertedCredential) {
             signature: coerceToBase64Url(sig)
         }
     };
-    
 
     document.getElementById("Response").value = JSON.stringify(data);
     document.getElementById("fidoForm").submit();