From 54a735ffd994066a06c712cdad767d41a01d287d Mon Sep 17 00:00:00 2001
From: d11n <mail@dennisreimann.de>
Date: Fri, 21 Jan 2022 03:11:08 +0100
Subject: [PATCH] Pay Button: Fix CSP violations for custom amount and slider
 (#3334)

Fixes #3241.
---
 BTCPayServer/Views/UIStores/PayButton.cshtml |  98 +++++++--
 BTCPayServer/wwwroot/paybutton/paybutton.js  | 201 +++++++++----------
 2 files changed, 173 insertions(+), 126 deletions(-)

diff --git a/BTCPayServer/Views/UIStores/PayButton.cshtml b/BTCPayServer/Views/UIStores/PayButton.cshtml
index f17f3f2c4..8eb3a2179 100644
--- a/BTCPayServer/Views/UIStores/PayButton.cshtml
+++ b/BTCPayServer/Views/UIStores/PayButton.cshtml
@@ -3,6 +3,11 @@
 @{
     ViewData.SetActivePage(StoreNavPages.PayButton, "Pay Button", Context.GetStoreData().Id);
     csp.AllowUnsafeHashes("onBTCPayFormSubmit(event);return false");
+    csp.AllowUnsafeHashes("handleSliderChange(event);return false");
+    csp.AllowUnsafeHashes("handleSliderInput(event);return false");
+    csp.AllowUnsafeHashes("handlePriceSlider(event);return false");
+    csp.AllowUnsafeHashes("handlePriceInput(event);return false");
+    csp.AllowUnsafeHashes("handlePlusMinus(event);return false");
 }
 
 @section PageHeadContent {
@@ -15,24 +20,75 @@
     <script src="~/vendor/vuejs-vee-validate/vee-validate.js" asp-append-version="true"></script>
     <script src="~/vendor/clipboard.js/clipboard.js" asp-append-version="true"></script>
     <script src="~/paybutton/paybutton.js" asp-append-version="true"></script>
-    <template id="template-get-scripts" csp-allow>
-        if (!window.btcpay) {
-            var script = document.createElement('script');
-            script.src=@(Safe.Json(Model.UrlRoot + "modal/btcpay.js"));
-            document.getElementsByTagName('head')[0].append(script);
-        }
-        function onBTCPayFormSubmit(event) {
-            event.preventDefault();
-            var xhttp = new XMLHttpRequest();
-            xhttp.onreadystatechange = function() {
-                if (this.readyState == 4 && this.status == 200 && this.responseText) {
-                    window.btcpay.showInvoice(JSON.parse(this.responseText).invoiceId);
-                }
-            };
-            xhttp.open('POST', event.target.getAttribute('action'), true);
-            xhttp.send(new FormData(event.target));
-        }
+    <template id="template-modal" csp-allow>
+    if (!window.btcpay) {
+        var script = document.createElement('script');
+        script.src = @(Safe.Json(Model.UrlRoot + "modal/btcpay.js"));
+        document.getElementsByTagName('head')[0].append(script);
+    }
+    function onBTCPayFormSubmit(event) {
+        event.preventDefault();
+        var xhttp = new XMLHttpRequest();
+        xhttp.onreadystatechange = function() {
+            if (this.readyState == 4 && this.status == 200 && this.responseText) {
+                window.btcpay.showInvoice(JSON.parse(this.responseText).invoiceId);
+            }
+        };
+        xhttp.open('POST', event.target.getAttribute('action'), true);
+        xhttp.send(new FormData(event.target));
+    }
     </template>
+    <template id="template-price-buttons" csp-allow>
+    function handlePlusMinus(event) {
+        event.preventDefault();
+        const el = document.querySelector('#btcpay-input-price');
+        const step = parseInt(event.target.dataset.step) || 1;
+        const min = parseInt(event.target.dataset.min) || 1;
+        const max = parseInt(event.target.dataset.max);
+        const type = event.target.dataset.type;
+        const price = parseInt(el.value) || min;
+        if (type === '-') {
+            el.value = price - step < min ? min : price - step;
+        } else if (type === '+') {
+            el.value = price + step > max ? max : price + step;
+        }
+    }
+    </template>
+    <template id="template-price-input" csp-allow>
+    function handlePriceInput(event) {
+        event.preventDefault();
+        const price = parseInt(event.target.dataset.price);
+        if (isNaN(event.target.value)) document.querySelector('#btcpay-input-price').value = price;
+        const min = parseInt(event.target.getAttribute('min')) || 1;
+        const max = parseInt(event.target.getAttribute('max'));
+        if (event.target.value < min) {
+            event.target.value = min;
+        } else if (event.target.value > max) { 
+            event.target.value = max;
+        }
+    }
+    </template>
+    <template id="template-price-slider" csp-allow>
+    function handleSliderChange(event) {
+        event.preventDefault();
+        const el = document.querySelector('#btcpay-input-price');
+        const price = parseInt(el.value);
+        const min = parseInt(event.target.getAttribute('min')) || 1;
+        const max = parseInt(event.target.getAttribute('max'));
+        if (price < min) { 
+            el.value = min;
+        } else if (price > max) {
+            el.value = max;
+        } 
+        document.querySelector('#btcpay-input-range').value = el.value;
+    }
+    
+    function handleSliderInput(event) {
+        document.querySelector('#btcpay-input-price').value = document.querySelector('#btcpay-input-range').value;
+    }
+    </template>
+    
+    
     <script>
         const srvModel = @Safe.Json(Model);
         const payButtonCtrl = new Vue({
@@ -158,7 +214,7 @@
                     <label for="btn-slider" class="form-check-label">Slider</label>
                 </div>
             </div>
-            <div class="row" v-if="srvModel.buttonType === 1 ||srvModel.buttonType === 2">
+            <div class="row" v-if="srvModel.buttonType === '1' ||srvModel.buttonType === '2'">
                 <div class="form-group col-md-4">
                     <label class="form-label" for="pb-min">Min</label>
                     <input name="min" type="text" class="form-control" id="pb-min"
@@ -181,7 +237,7 @@
                     <small class="text-danger">{{ errors.first('step') }}</small>
                 </div>
             </div>
-            <template v-if="srvModel.buttonType === 1">
+            <template v-if="srvModel.buttonType === '1'">
                 <div class="form-check">
                     <input name="simpleInput"
                            id="simpleInput"
@@ -366,8 +422,7 @@
             border-color: #ccc;
         }
         #btcpay-input-price {
-            -moz-appearance: none;
-            -webkit-appearance: none;
+            -moz-appearance: textfield;
             border: none;
             box-shadow: none;
             text-align: center;
@@ -377,6 +432,7 @@
             line-height: 35px;
             background: #fff;
         }
+        
         #btcpay-input-price::-webkit-outer-spin-button,
         #btcpay-input-price::-webkit-inner-spin-button {
           -webkit-appearance: none;
diff --git a/BTCPayServer/wwwroot/paybutton/paybutton.js b/BTCPayServer/wwwroot/paybutton/paybutton.js
index 14acf2c21..8ad996787 100644
--- a/BTCPayServer/wwwroot/paybutton/paybutton.js
+++ b/BTCPayServer/wwwroot/paybutton/paybutton.js
@@ -17,6 +17,13 @@ function esc(input) {
         ;
 }
 
+function unesc(input) {
+    return ('' + input)
+        .replace(/&amp;/g, '&')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+}
+
 Vue.use(VeeValidate);
 var dictionary = {
     en: {
@@ -30,13 +37,28 @@ var dictionary = {
 VeeValidate.Validator.localize(dictionary);
 
 function getStyles (styles) {
-    return document.getElementById(styles).innerHTML.trim().replace(/\s{2}/g, '') + '\n'
+    return document.getElementById(styles).innerHTML.replace(/\s{2}/g, '').trim() + '\n'
 }
 
 function getScripts(srvModel) {
-    if (!srvModel.useModal) return ''
-    const template = document.getElementById('template-get-scripts')
-    return template.innerHTML.replace(/&amp;/g, '&')
+    const scripts = []
+    if (srvModel.useModal) {
+        const modal = document.getElementById('template-modal')
+        scripts.push(unesc(modal.innerHTML))
+    }
+    if (srvModel.buttonType === '1') {
+        const priceButtons = document.getElementById('template-price-buttons')
+        const priceInput = document.getElementById('template-price-input')
+        scripts.push(unesc(priceButtons.innerHTML))
+        scripts.push(unesc(priceInput.innerHTML))
+    }
+    if (srvModel.buttonType === '2') {
+        const priceSlider = document.getElementById('template-price-slider')
+        const priceInput = document.getElementById('template-price-input')
+        scripts.push(unesc(priceSlider.innerHTML))
+        scripts.push(unesc(priceInput.innerHTML))
+    }
+    return scripts
 }
 
 function inputChanges(event, buttonSize) {
@@ -44,41 +66,36 @@ function inputChanges(event, buttonSize) {
         srvModel.buttonSize = buttonSize;
     }
 
-    var isFixedAmount = srvModel.buttonType == 0
-    var isCustomAmount = srvModel.buttonType == 1
-    var isSlider = srvModel.buttonType == 2
-
-    var width = "209px";
-    var height = "57px";
-    var widthInput = "3em";
+    let width = '209px';
+    let height = '57px';
+    let widthInput = '3em';
     if (srvModel.buttonSize === 0) {
-        width = "146px";
-        widthInput = "2em";
-        height = "40px";
+        width = '146px';
+        widthInput = '2em';
+        height = '40px';
     } else if (srvModel.buttonSize === 1) {
-        width = "168px";
-        height = "46px";
+        width = '168px';
+        height = '46px';
     } else if (srvModel.buttonSize === 2) {
-        width = "209px";
-        height = "57px";
+        width = '209px';
+        height = '57px';
     }
-    var actionUrl = "api/v1/invoices";
-    var priceInputName = "price";
-    var app = srvModel.appIdEndpoint? srvModel.apps.find(value => value.id === srvModel.appIdEndpoint ): null;
-    var allowCurrencySelection = true;
+    let actionUrl = 'api/v1/invoices';
+    let priceInputName = 'price';
+    let app = srvModel.appIdEndpoint? srvModel.apps.find(value => value.id === srvModel.appIdEndpoint ): null;
+    let allowCurrencySelection = true;
     if (app) {
-
-        if (app.appType.toLowerCase() == "pointofsale") {
-            actionUrl = "apps/" + app.id + "/pos";
-        } else if (app.appType.toLowerCase() == "crowdfund") {
-            actionUrl = "apps/" + app.id + "/crowdfund";
+        if (app.appType.toLowerCase() === 'pointofsale') {
+            actionUrl = `apps/${app.id}/pos`;
+        } else if (app.appType.toLowerCase() === 'crowdfund') {
+            actionUrl = `apps/${app.id}/crowdfund`;
         } else {
-            actionUrl = "api/v1/invoices";
+            actionUrl = 'api/v1/invoices';
             app = null;
         }
 
-        if (actionUrl != "api/v1/invoices") {
-            priceInputName = "amount";
+        if (actionUrl !== 'api/v1/invoices') {
+            priceInputName = 'amount';
             allowCurrencySelection = false;
             srvModel.useModal = false;
         }
@@ -86,96 +103,77 @@ function inputChanges(event, buttonSize) {
     
     var html =
         // Styles
-        getStyles('template-paybutton-styles') + (isSlider ? getStyles('template-slider-styles') : '') +
+        getStyles('template-paybutton-styles') + (srvModel.buttonType === '2' ? getStyles('template-slider-styles') : '') +
         // Form
         '<form method="POST"' + (srvModel.useModal ? ' onsubmit="onBTCPayFormSubmit(event);return false"' : '') + ' action="' + esc(srvModel.urlRoot) + actionUrl + '" class="btcpay-form btcpay-form--' + (srvModel.fitButtonInline ? 'inline' : 'block') +'">\n' +
             addInput("storeId", srvModel.storeId);
     
-    if(app){
+    if (app) {
         if (srvModel.orderId) html += addInput("orderId", srvModel.orderId);
         if (srvModel.serverIpn) html += addInput("notificationUrl", srvModel.serverIpn);
         if (srvModel.browserRedirect) html += addInput("redirectUrl", srvModel.browserRedirect);
         if (srvModel.appChoiceKey) html += addInput("choiceKey", srvModel.appChoiceKey);
-        
-    }else{
+    } else {
         if (srvModel.useModal) html += addInput("jsonResponse", true);
-
         if (srvModel.orderId) html += addInput("orderId", srvModel.orderId);
         if (srvModel.checkoutDesc) html += addInput("checkoutDesc", srvModel.checkoutDesc);
-
-
         if (srvModel.serverIpn) html += addInput("serverIpn", srvModel.serverIpn);
-
         if (srvModel.browserRedirect) html += addInput("browserRedirect", srvModel.browserRedirect);
-
         if (srvModel.notifyEmail) html += addInput("notifyEmail", srvModel.notifyEmail);
-
         if (srvModel.checkoutQueryString) html += addInput("checkoutQueryString", srvModel.checkoutQueryString);
     }
 
     // Fixed amount: Add price and currency as hidden inputs
-    if (isFixedAmount) {
-        if (srvModel.price)
-            html += addInput(priceInputName, srvModel.price);
-        if(allowCurrencySelection){
-            html += addInput("currency", srvModel.currency);
-        }
+    if (srvModel.buttonType === '0') {
+        if (srvModel.price) html += addInput(priceInputName, srvModel.price);
+        if (allowCurrencySelection) html += addInput("currency", srvModel.currency);
     }
     // Custom amount
-    else if (isCustomAmount) {
+    else if (srvModel.buttonType === '1') {
         html += '  <div class="btcpay-custom-container">\n    <div class="btcpay-custom">\n';
         html += srvModel.simpleInput ? '' : addPlusMinusButton("-", srvModel.step, srvModel.min, srvModel.max);
-        if (srvModel.price)
-            html += '  ' + addInputPrice(priceInputName, srvModel.price, widthInput, "",   "number", srvModel.min, srvModel.max, srvModel.step);
+        html += addInputPrice(priceInputName, srvModel.price, widthInput, srvModel.min, srvModel.max, srvModel.step);
         html += srvModel.simpleInput ? '' : addPlusMinusButton("+", srvModel.step, srvModel.min, srvModel.max);
         html += '    </div>\n';
-        if(allowCurrencySelection) {
-            html += addSelectCurrency(srvModel.currency);
-        }
+        if (allowCurrencySelection) html += addSelectCurrency(srvModel.currency);
         html += '  </div>\n';
     }
     // Slider
-    else if (isSlider) {
-        var step = srvModel.step =="any"? 1: srvModel.step;
-        var min = srvModel.min == null? 1: parseInt(srvModel.min);
-        var max = srvModel.max == null? 1: parseInt(srvModel.max);
-        var onChange = "var el=document.querySelector(\'#btcpay-input-price\'); var price = parseInt(el.value);  if(price< "+min+") { el.value = "+min+"} else if(price> "+max+") { el.value = "+max+"} document.querySelector(\'#btcpay-input-range\').value = el.value"
+    else if (srvModel.buttonType === '2') {
+        const step = srvModel.step === 'any' ? 1 : srvModel.step;
+        const min = srvModel.min == null ? 1 : parseInt(srvModel.min);
+        const max = srvModel.max == null ? null : parseInt(srvModel.max);
 
         html += '  <div class="btcpay-custom-container">\n';
-        html += addInputPrice(priceInputName, srvModel.price, width, 'onchange= \"'+onChange+'\"');
-        if(allowCurrencySelection) {
-            html += addSelectCurrency(srvModel.currency);
-        }
+        html += addInputPrice(priceInputName, srvModel.price, width, min, max, step, 'handleSliderChange(event);return false');
+        if (allowCurrencySelection) html += addSelectCurrency(srvModel.currency);
         html += addSlider(srvModel.price, srvModel.min, srvModel.max, srvModel.step, width);
         html += '  </div>\n';
     }
     
-    if(!srvModel.payButtonText){
-        html += '  <input type="image" class="submit" name="submit" src="' + esc(srvModel.payButtonImageUrl) + '" style="width:' + width + '" alt="Pay with BtcPay, Self-Hosted Bitcoin Payment Processor">\n';
-    }else{
-        var numheight = parseInt(height.replace("px", ""));
-        html+= '<button type="submit" class="submit" name="submit" style="min-width:' + width + '; min-height:' + height + '; border-radius: 4px;border-style: none;background-color: #0f3b21;" alt="Pay with BtcPay, Self-Hosted Bitcoin Payment Processor"><span style="color:#fff">'+esc(srvModel.payButtonText)+'</span>\n' +
-            (srvModel.payButtonImageUrl? '<img src="'+esc(srvModel.payButtonImageUrl)+'" style="height:'+numheight+'px;display:inline-block;padding: 5% 0 5% 5px;vertical-align: middle;">\n' : '')+
-            '</button>'
-    }
+    html += srvModel.payButtonText
+        ? `<button type="submit" class="submit" name="submit" style="min-width:${width};min-height:${height};border-radius:4px;border-style:none;background-color:#0f3b21;" title="Pay with BTCPay Server, a Self-Hosted Bitcoin Payment Processor"><span style="color:#fff">${esc(srvModel.payButtonText)}</span>\n` +
+            (srvModel.payButtonImageUrl? `<img src="${esc(srvModel.payButtonImageUrl)}" style="height:${parseInt(height.replace('px', ''))}px;display:inline-block;padding:5% 0 5% 5px;vertical-align:middle;">\n` : '') +
+          '</button>'
+        : `  <input type="image" class="submit" name="submit" src="${esc(srvModel.payButtonImageUrl)}" style="width:${width}" alt="Pay with BTCPay Server, a Self-Hosted Bitcoin Payment Processor">\n`;
     html += '</form>';
     
     // Scripts
-    var scripts = getScripts(srvModel);
-    var code = html + (scripts ? `\n<script>\n        ${scripts.trim()}\n</script>` : '')
+    const scripts = getScripts(srvModel);
+    const code = html + (scripts.length ? `\n<script>\n    ${scripts.join('').trim()}\n</script>` : '')
 
     $("#mainCode").text(code).html();
-    var preview = document.getElementById('preview');
+    const preview = document.getElementById('preview');
     preview.innerHTML = html;
-    if (scripts) {
+    scripts.forEach(snippet => {
         // script needs to be inserted as node, otherwise it won't get executed
-        var script = document.createElement('script');
-        script.innerHTML = scripts
+        const script = document.createElement('script')
+        script.innerHTML = snippet
         preview.appendChild(script)
-    }
-    var form = preview.querySelector("form");
-    var url =  new URL(form.getAttribute("action"));
-    var formData =   new FormData(form);
+    })
+    const form = preview.querySelector("form");
+    const formData = new FormData(form);
+    let url = new URL(form.getAttribute("action"));
     formData.forEach((value, key) => {
         if (key !== "jsonResponse") {
             url.searchParams.append(key, value);
@@ -193,43 +191,36 @@ function inputChanges(event, buttonSize) {
 }
 
 function addInput(name, value) {
-    return '  <input type="hidden" name="' + esc(name) + '" value="' + esc(value) + '" />\n';
+    return `  <input type="hidden" name="${esc(name)}" value="${esc(value)}" />\n`;
 }
 
 function addPlusMinusButton(type, step, min, max) {
-    step = step =="any"? 1: step;
-    min = min == null? 1: parseInt(min);
-    max = max == null? 1: parseInt(max);
-    var onChange = "event.preventDefault(); var el=document.querySelector(\'#btcpay-input-price\'); var price = parseInt(el.value);"
-    if(type == "-"){
-        onChange += " if((price - "+step+" )< "+min+") { el.value = "+min+"} else {el.value = parseInt(el.value) - "+step + " }";
-    } else if(type == "+"){
-        onChange += " if((price + "+step+" )> "+max+") { el.value = "+max+"} else {el.value = parseInt(el.value) + "+step + " }";
-    }
+    step = step === "any" ? 1 : step;
+    min = min == null ? 1 : parseInt(min);
+    max = max == null ? null : parseInt(max);
     
-    
-    return '      <button class="plus-minus" onclick="'+onChange+'">' + type + '</button>\n';
-   }
+    return `      <button class="plus-minus" type="button" onclick="handlePlusMinus(event);return false" data-type="${type}" data-step="${step}" data-min="${min}" data-max="${max}">${type}</button>\n`;
+}
 
-function addInputPrice(name, price, widthInput, customFn, type, min, max, step) {
-    return '    <input id="btcpay-input-price" name="'+name+'" type="' + (type || "text") + '" min="' + (min || 0) + '" max="' + (max || "none") + '" step="' + (step || "any") + '" value="' + price + '" style="width: ' + widthInput + ';" oninput="event.preventDefault();isNaN(event.target.value)? document.querySelector(\'#btcpay-input-price\').value = ' + price + ' : event.target.value; if (this.value < '+min+') {this.value = '+min+'; } else if(this.value > '+max+'){  this.value = '+max+';}" ' + (customFn || '') + ' />\n';
+function addInputPrice(name, price, widthInput, min = 0, max = 'none', step = 'any', onChange = null) {
+    if (!price) price = min
+    return `      <input id="btcpay-input-price" type="number" name="${esc(name)}" min="${min}" max="${max}" step="${step}" value="${price}" data-price="${price}" style="width:${widthInput};" oninput="handlePriceInput(event);return false"${onChange ? ` onchange="${onChange}"` : ''} />\n`;
+}
+
+function addSlider(price, min, max, step, width) {
+    if (!price) price = min
+    return `    <input id="btcpay-input-range" type="range" class="btcpay-input-range" min="${min}" max="${max}" step="${step}" value="${price}" style="width:${width};margin-bottom:15px;" oninput="handleSliderInput(event);return false" />\n`;
 }
 
 function addSelectCurrency(currency) {
     // Remove all non-alphabet characters from input string and uppercase it for display
-    var safeCurrency = currency.replace(/[^a-z]/gi, '').toUpperCase();
-    var defaultCurrencies = ['USD', 'GBP', 'EUR', 'BTC'];
-    var options = defaultCurrencies.map(c => '      <option value="' + c + '"' + (c === safeCurrency ? ' selected' : '') + '>' + c + '</option>');
+    const safeCurrency = currency.replace(/[^a-z]/gi, '').toUpperCase();
+    const defaultCurrencies = ['USD', 'GBP', 'EUR', 'BTC'];
+    const options = defaultCurrencies.map(c => `      <option value="${c}"${(c === safeCurrency ? ' selected' : '')}>${c}</option>`);
     // If user provided a currency not in our default currencies list, add it to the top of the options as a selected option
     if (defaultCurrencies.indexOf(safeCurrency) === -1) {
-        options.unshift('      <option value="' + safeCurrency + '" selected>' + safeCurrency + '</option>')
+        options.unshift(`      <option value="${safeCurrency}" selected>${safeCurrency}</option>`)
     }
 
-    return '    <select name="currency">\n' +
-        options.join('\n') + '\n' +
-    '    </select>\n'
-}
-
-function addSlider(price, min, max, step, width) {
-    return '    <input class="btcpay-input-range" id="btcpay-input-range" value="' + price + '" type="range" min="' + min + '" max="' + max + '" step="' + step + '" style="width:' + width + ';margin-bottom:15px;" oninput="document.querySelector(\'#btcpay-input-price\').value = document.querySelector(\'#btcpay-input-range\').value" />\n';
+    return `    <select name="currency">\n${options.join('\n')}\n    </select>\n`
 }