From ceb0c119a6bb54a447406e078d084d15a5916f1f Mon Sep 17 00:00:00 2001
From: Andrei Vorobev <738482+vorobey@users.noreply.github.com>
Date: Thu, 23 Jul 2026 15:49:38 +0300
Subject: [PATCH 1/2] ASPNet: template compiler csp feature detection

---
 packages/devextreme/js/aspnet.js | 511 +++++++++++++++++++------------
 1 file changed, 315 insertions(+), 196 deletions(-)

diff --git a/packages/devextreme/js/aspnet.js b/packages/devextreme/js/aspnet.js
index da464425f726..fface0793b01 100644
--- a/packages/devextreme/js/aspnet.js
+++ b/packages/devextreme/js/aspnet.js
@@ -5,14 +5,15 @@
         define(function(require, exports, module) {
             module.exports = factory(
                 require('jquery'),
-                require('./core/templates/template_engine_registry').setTemplateEngine,
+                require('./core/templates/template_engine_registry')
+                    .setTemplateEngine,
                 require('./core/templates/template_base').renderedCallbacks,
                 require('./core/guid'),
                 require('./ui/validation_engine'),
                 require('./core/utils/iterator'),
                 require('./core/utils/dom').extractTemplateMarkup,
                 require('./core/utils/string').encodeHtml,
-                require('./core/utils/ajax')
+                require('./core/utils/ajax'),
             );
         });
     } else {
@@ -25,238 +26,356 @@
             DevExpress.utils.iterator,
             DevExpress.utils.dom.extractTemplateMarkup,
             DevExpress.utils.string.encodeHtml,
-            DevExpress.utils.ajax
+            DevExpress.utils.ajax,
         );
     }
-})(function($, setTemplateEngine, templateRendered, Guid, validationEngine, iteratorUtils, extractTemplateMarkup, encodeHtml, ajax) {
-    var templateCompiler = createTemplateCompiler();
-    var pendingCreateComponentRoutines = [ ];
+})(
+    function(
+        $,
+        setTemplateEngine,
+        templateRendered,
+        Guid,
+        validationEngine,
+        iteratorUtils,
+        extractTemplateMarkup,
+        encodeHtml,
+        ajax,
+    ) {
+        var templateCompiler = createTemplateCompiler();
 
-    function createTemplateCompiler() {
-        var ENCODE_QUALIFIER = '-',
-            INTERPOLATE_QUALIFIER = '=';
+        function readCspDirective(csp, name) {
+            var directives = csp.split(';');
+            for(var i = 0; i < directives.length; i++) {
+                var parts = directives[i].trim().split(/\s+/);
+                if(parts.length && parts[0].toLowerCase() === name) {
+                    return parts.slice(1).join(' ').toLowerCase();
+                }
+            }
+            return null;
+        }
+
+        function detectCspRestricted() {
+            var doc = window.document;
+            var scripts = doc.getElementsByTagName('script');
+            for(var i = 0; i < scripts.length; i++) {
+                if(scripts[i].nonce || scripts[i].getAttribute('nonce')) {
+                    return true;
+                }
+            }
+            var meta = doc.querySelectorAll(
+                'meta[http-equiv=\'Content-Security-Policy\' i]',
+            );
+            for(var j = 0; j < meta.length; j++) {
+                var content = meta[j].getAttribute('content') || '';
+                var directive = readCspDirective(content, 'script-src');
+                if(null === directive) {
+                    directive = readCspDirective(content, 'default-src');
+                }
+                if(
+                    null !== directive &&
+                    -1 === directive.indexOf('\'unsafe-eval\'')
+                ) {
+                    return true;
+                }
+            }
+            return false;
+        }
 
-        var EXTENDED_OPEN_TAG = /[<[]%/g,
-            EXTENDED_CLOSE_TAG = /%[>\]]/g;
+        var cspRestricted = null;
 
-        function acceptText(bag, text) {
-            if(text) {
-                bag.push('_.push(', JSON.stringify(text), ');');
+        function isCspRestricted() {
+            if(null === cspRestricted) {
+                cspRestricted = detectCspRestricted();
             }
+            return cspRestricted;
         }
 
-        function acceptCode(bag, code) {
-            var encode = code.charAt(0) === ENCODE_QUALIFIER,
-                value = code.substr(1),
-                interpolate = code.charAt(0) === INTERPOLATE_QUALIFIER;
-
-            if(encode || interpolate) {
-                bag.push('_.push(');
-                var expression = value;
-                if(encode) {
-                    expression = 'encodeHtml((' + value + ' !== null && ' + value + ' !== undefined) ? ' + value + ' : "")';
-                    if(/^\s*$/.test(value)) {
-                        expression = 'encodeHtml(' + value + ')';
-                    }
-                }
-                bag.push(expression);
-                bag.push(');');
-            } else {
-                bag.push(code + '\n');
+        function compileViaScript(src, code) {
+            if(!src || 'SCRIPT' !== src.tagName || !src.id) {
+                return null;
             }
+            if(isCspRestricted() && !src.nonce) {
+                // eslint-disable-next-line no-console
+                console.warn(
+                    'DevExtreme: template <script> #' +
+                        src.id +
+                        ' has no nonce; the compiled script may be blocked by CSP.',
+                );
+            }
+            var funcName = src.id.replaceAll('-', '');
+            var func =
+                'function ' + funcName + '(obj,encodeHtml){\n' + code + '\n}';
+            $.globalEval(func, src, window.document);
+            return funcName;
         }
 
-        return function(element) {
-            var text = extractTemplateMarkup(element);
-            var bag = ['var _ = [];', 'with(obj||{}) {'],
-                chunks = text.split(EXTENDED_OPEN_TAG);
+        var pendingCreateComponentRoutines = [];
+
+        function createTemplateCompiler() {
+            var ENCODE_QUALIFIER = '-',
+                INTERPOLATE_QUALIFIER = '=';
 
-            acceptText(bag, chunks.shift());
+            var EXTENDED_OPEN_TAG = /[<[]%/g,
+                EXTENDED_CLOSE_TAG = /%[>\]]/g;
 
-            for(var i = 0; i < chunks.length; i++) {
-                var tmp = chunks[i].split(EXTENDED_CLOSE_TAG);
-                if(tmp.length !== 2) {
-                    throw 'Template syntax error';
+            function acceptText(bag, text) {
+                if(text) {
+                    bag.push('_.push(', JSON.stringify(text), ');');
                 }
-                acceptCode(bag, tmp[0]);
-                acceptText(bag, tmp[1]);
             }
 
-            bag.push('}', 'return _.join(\'\')');
-            var code = bag.join('');
+            function acceptCode(bag, code) {
+                var encode = code.charAt(0) === ENCODE_QUALIFIER,
+                    value = code.substr(1),
+                    interpolate = code.charAt(0) === INTERPOLATE_QUALIFIER;
 
-            try {
-                // eslint-disable-next-line no-new-func
-                return new Function('obj', 'encodeHtml', code);
-            } catch(e) {
-                var src = element[0];
-                if(src.tagName === 'SCRIPT') {
-                    var funcName = src.id.replaceAll('-', '');
-                    var func = 'function ' + funcName + '(obj,encodeHtml){\n' + code + '\n}';
-                    $.globalEval(func, src, window.document);
-                    return funcName;
+                if(encode || interpolate) {
+                    bag.push('_.push(');
+                    var expression = value;
+                    if(encode) {
+                        expression =
+                            'encodeHtml((' +
+                            value +
+                            ' !== null && ' +
+                            value +
+                            ' !== undefined) ? ' +
+                            value +
+                            ' : "")';
+                        if(/^\s*$/.test(value)) {
+                            expression = 'encodeHtml(' + value + ')';
+                        }
+                    }
+                    bag.push(expression);
+                    bag.push(');');
                 } else {
-                    return text;
+                    bag.push(code + '\n');
                 }
             }
-        };
-    }
 
-    function createTemplateEngine() {
-        return {
-            compile: function(element) {
-                return templateCompiler(element);
-            },
-            render: function(template, data) {
-                if(template instanceof Function) {
-                    var html = template(data, encodeHtml);
+            return function(element) {
+                var text = extractTemplateMarkup(element);
+                var bag = ['var _ = [];', 'with(obj||{}) {'],
+                    chunks = text.split(EXTENDED_OPEN_TAG);
 
-                    var dxMvcExtensionsObj = window['MVCx'];
-                    if(dxMvcExtensionsObj && !dxMvcExtensionsObj.isDXScriptInitializedOnLoad) {
-                        html = html.replace(/(<script[^>]+)id="dxss_.+?"/g, '$1');
+                acceptText(bag, chunks.shift());
+
+                for(var i = 0; i < chunks.length; i++) {
+                    var tmp = chunks[i].split(EXTENDED_CLOSE_TAG);
+                    if(tmp.length !== 2) {
+                        throw 'Template syntax error';
                     }
+                    acceptCode(bag, tmp[0]);
+                    acceptText(bag, tmp[1]);
+                }
 
-                    return html;
-                } else if(window[template] instanceof Function) {
-                    return window[template](data, encodeHtml);
-                } else if(typeof template === 'string') {
-                    return template;
-                } else {
-                    throw 'Unknown template type';
+                bag.push('}', 'return _.join(\'\')');
+                var code = bag.join('');
+                var src = element[0];
+
+                if(isCspRestricted()) {
+                    var compiled = compileViaScript(src, code);
+                    return null !== compiled ? compiled : text;
                 }
-            }
-        };
-    }
+                try {
+                    // eslint-disable-next-line no-new-func
+                    return new Function('obj', 'encodeHtml', code);
+                } catch(e) {
+                    var fallback = compileViaScript(src, code);
+                    return null !== fallback ? fallback : text;
+                }
+            };
+        }
 
-    function getValidationSummary(validationGroup) {
-        var result;
-        $('.dx-validationsummary').each(function(_, element) {
-            var summary = $(element).data('dxValidationSummary');
-            if(summary && summary.option('validationGroup') === validationGroup) {
-                result = summary;
-                return false;
-            }
-        });
-        return result;
-    }
+        function createTemplateEngine() {
+            return {
+                compile: function(element) {
+                    return templateCompiler(element);
+                },
+                render: function(template, data) {
+                    if(template instanceof Function) {
+                        var html = template(data, encodeHtml);
 
-    function createValidationSummaryItemsFromValidators(validators, editorNames) {
-        var items = [];
+                        var dxMvcExtensionsObj = window['MVCx'];
+                        if(
+                            dxMvcExtensionsObj &&
+                            !dxMvcExtensionsObj.isDXScriptInitializedOnLoad
+                        ) {
+                            html = html.replace(
+                                /(<script[^>]+)id="dxss_.+?"/g,
+                                '$1',
+                            );
+                        }
 
-        iteratorUtils.each(validators, function(_, validator) {
-            var widget = validator.$element().data('dx-validation-target');
-            if(widget && $.inArray(widget.option('name'), editorNames) > -1) {
-                items.push({
-                    text: widget.option('validationError.message'),
-                    validator: validator
-                });
-            }
-        });
+                        return html;
+                    } else if(window[template] instanceof Function) {
+                        return window[template](data, encodeHtml);
+                    } else if(typeof template === 'string') {
+                        return template;
+                    } else {
+                        throw 'Unknown template type';
+                    }
+                },
+            };
+        }
 
-        return items;
-    }
+        function getValidationSummary(validationGroup) {
+            var result;
+            $('.dx-validationsummary').each(function(_, element) {
+                var summary = $(element).data('dxValidationSummary');
+                if(
+                    summary &&
+                    summary.option('validationGroup') === validationGroup
+                ) {
+                    result = summary;
+                    return false;
+                }
+            });
+            return result;
+        }
+
+        function createValidationSummaryItemsFromValidators(
+            validators,
+            editorNames,
+        ) {
+            var items = [];
 
-    function createComponent(name, options, id, validatorOptions) {
-        var selector = '#' + String(id).replace(/[^\w-]/g, '\\$&');
-        pendingCreateComponentRoutines.push(function() {
-            var $element = $(selector);
-            if($element.length) {
-                var $component = $(selector)[name](options);
-                if($.isPlainObject(validatorOptions)) {
-                    $component.dxValidator(validatorOptions);
+            iteratorUtils.each(validators, function(_, validator) {
+                var widget = validator.$element().data('dx-validation-target');
+                if(
+                    widget &&
+                    $.inArray(widget.option('name'), editorNames) > -1
+                ) {
+                    items.push({
+                        text: widget.option('validationError.message'),
+                        validator: validator,
+                    });
                 }
-                return true;
-            }
-            return false;
-        });
-    }
+            });
 
-    templateRendered.add(function() {
-        var snapshot = pendingCreateComponentRoutines.slice();
-        var leftover = [ ];
+            return items;
+        }
 
-        pendingCreateComponentRoutines = [ ];
-        snapshot.forEach(function(func) {
-            if(!func()) {
-                leftover.push(func);
-            }
+        function createComponent(name, options, id, validatorOptions) {
+            var selector = '#' + String(id).replace(/[^\w-]/g, '\\$&');
+            pendingCreateComponentRoutines.push(function() {
+                var $element = $(selector);
+                if($element.length) {
+                    var $component = $(selector)[name](options);
+                    if($.isPlainObject(validatorOptions)) {
+                        $component.dxValidator(validatorOptions);
+                    }
+                    return true;
+                }
+                return false;
+            });
+        }
+
+        templateRendered.add(function() {
+            var snapshot = pendingCreateComponentRoutines.slice();
+            var leftover = [];
+
+            pendingCreateComponentRoutines = [];
+            snapshot.forEach(function(func) {
+                if(!func()) {
+                    leftover.push(func);
+                }
+            });
+            pendingCreateComponentRoutines =
+                pendingCreateComponentRoutines.concat(leftover);
         });
-        pendingCreateComponentRoutines = pendingCreateComponentRoutines.concat(leftover);
-    });
-
-    return {
-        createComponent: createComponent,
-
-        renderComponent: function(name, options, id, validatorOptions) {
-            id = id || ('dx-' + new Guid());
-            createComponent(name, options, id, validatorOptions);
-            return '<div id="' + id + '"></div>';
-        },
-
-        getEditorValue: function(inputName) {
-            var $widget = $('input[name=\'' + inputName + '\']').closest('.dx-widget');
-            if($widget.length) {
-                var dxComponents = $widget.data('dxComponents'),
-                    widget = $widget.data(dxComponents[0]);
-
-                if(widget) {
-                    return widget.option('value');
+
+        return {
+            createComponent: createComponent,
+
+            renderComponent: function(name, options, id, validatorOptions) {
+                id = id || 'dx-' + new Guid();
+                createComponent(name, options, id, validatorOptions);
+                return '<div id="' + id + '"></div>';
+            },
+
+            getEditorValue: function(inputName) {
+                var $widget = $('input[name=\'' + inputName + '\']').closest(
+                    '.dx-widget',
+                );
+                if($widget.length) {
+                    var dxComponents = $widget.data('dxComponents'),
+                        widget = $widget.data(dxComponents[0]);
+
+                    if(widget) {
+                        return widget.option('value');
+                    }
                 }
-            }
-        },
+            },
 
-        setTemplateEngine: function() {
-            if(setTemplateEngine) {
-                setTemplateEngine(createTemplateEngine());
-            }
-        },
-
-        createValidationSummaryItems: function(validationGroup, editorNames) {
-            var summary = getValidationSummary(validationGroup),
-                groupConfig,
-                items;
-
-            if(summary) {
-                groupConfig = validationEngine.getGroupConfig(validationGroup);
-                if(groupConfig) {
-                    items = createValidationSummaryItemsFromValidators(groupConfig.validators, editorNames);
-                    items.length && summary.option('items', items);
+            setTemplateEngine: function() {
+                if(setTemplateEngine) {
+                    setTemplateEngine(createTemplateEngine());
                 }
-            }
-        },
-
-        sendValidationRequest: function(propertyName, params, url, method, additionalFields) {
-            var d = $.Deferred();
-            var data = { };
-            data[propertyName] = params.value;
-            if(additionalFields.length && params.data) {
-                additionalFields.forEach(function(field) {
-                    data[field] = params.data[field];
-                });
-            }
+            },
+
+            createValidationSummaryItems: function(
+                validationGroup,
+                editorNames,
+            ) {
+                var summary = getValidationSummary(validationGroup),
+                    groupConfig,
+                    items;
 
-            ajax.sendRequest({
-                url: url,
-                dataType: 'json',
-                method: method || 'GET',
-                data: data
-            }).then(function(response) {
-                if(typeof response === 'string') {
-                    d.resolve({
-                        isValid: false,
-                        message: response
+                if(summary) {
+                    groupConfig =
+                        validationEngine.getGroupConfig(validationGroup);
+                    if(groupConfig) {
+                        items = createValidationSummaryItemsFromValidators(
+                            groupConfig.validators,
+                            editorNames,
+                        );
+                        items.length && summary.option('items', items);
+                    }
+                }
+            },
+
+            sendValidationRequest: function(
+                propertyName,
+                params,
+                url,
+                method,
+                additionalFields,
+            ) {
+                var d = $.Deferred();
+                var data = {};
+                data[propertyName] = params.value;
+                if(additionalFields.length && params.data) {
+                    additionalFields.forEach(function(field) {
+                        data[field] = params.data[field];
                     });
-                } else {
-                    d.resolve(response);
                 }
-            }, function(xhr) {
-                d.reject({
-                    isValid: false,
-                    message: xhr.responseText
-                });
-            });
 
-            return d.promise();
-        }
-    };
-});
+                ajax.sendRequest({
+                    url: url,
+                    dataType: 'json',
+                    method: method || 'GET',
+                    data: data,
+                }).then(
+                    function(response) {
+                        if(typeof response === 'string') {
+                            d.resolve({
+                                isValid: false,
+                                message: response,
+                            });
+                        } else {
+                            d.resolve(response);
+                        }
+                    },
+                    function(xhr) {
+                        d.reject({
+                            isValid: false,
+                            message: xhr.responseText,
+                        });
+                    },
+                );
+
+                return d.promise();
+            },
+        };
+    },
+);

From fa0d362263c662a1dbb3d7f7050b2462ecb0e8a7 Mon Sep 17 00:00:00 2001
From: Andrei Vorobev <738482+vorobey@users.noreply.github.com>
Date: Fri, 24 Jul 2026 14:50:33 +0300
Subject: [PATCH 2/2] ASPNet: combine all approaches together

---
 packages/devextreme/js/aspnet.js | 60 +++++++++++++++++++++++++++-----
 1 file changed, 51 insertions(+), 9 deletions(-)

diff --git a/packages/devextreme/js/aspnet.js b/packages/devextreme/js/aspnet.js
index fface0793b01..ce8cd815d06d 100644
--- a/packages/devextreme/js/aspnet.js
+++ b/packages/devextreme/js/aspnet.js
@@ -42,6 +42,20 @@
         ajax,
     ) {
         var templateCompiler = createTemplateCompiler();
+        var pendingCreateComponentRoutines = [];
+        // csp handling mode marker: detect | once | csp_only | legacy
+        var cspHandlingMode = setCspHandlingMode();
+        var cspRestricted = null;
+
+        // eslint-disable-next-line no-console
+        console.log('csp handling mode: ' + cspHandlingMode);
+
+        function setCspHandlingMode() {
+            const metaCSPMode = window.document.querySelector(
+                'meta[name="dx-csp-handling-mode"]',
+            )?.content;
+            return metaCSPMode || 'legacy';
+        }
 
         function readCspDirective(csp, name) {
             var directives = csp.split(';');
@@ -54,6 +68,19 @@
             return null;
         }
 
+        function canUseFunctionConstructor() {
+            var isFunctionConstructorAllowed = false;
+            try {
+                // eslint-disable-next-line no-new-func
+                new Function('return true');
+                isFunctionConstructorAllowed = true;
+            } catch(e) {
+                // Content Security Policy without 'unsafe-eval' blocks the Function constructor.
+                isFunctionConstructorAllowed = false;
+            }
+            return isFunctionConstructorAllowed;
+        }
+
         function detectCspRestricted() {
             var doc = window.document;
             var scripts = doc.getElementsByTagName('script');
@@ -81,17 +108,29 @@
             return false;
         }
 
-        var cspRestricted = null;
-
         function isCspRestricted() {
-            if(null === cspRestricted) {
-                cspRestricted = detectCspRestricted();
+            if(cspRestricted !== null) {
+                return cspRestricted;
+            }
+            switch(cspHandlingMode) {
+                case 'detect':
+                    cspRestricted = detectCspRestricted();
+                    break;
+                case 'csp_only':
+                    cspRestricted = true;
+                    break;
+                case 'once':
+                    cspRestricted = !canUseFunctionConstructor();
+                    break;
+                case 'legacy':
+                default:
+                    cspRestricted = false;
             }
             return cspRestricted;
         }
 
         function compileViaScript(src, code) {
-            if(!src || 'SCRIPT' !== src.tagName || !src.id) {
+            if(!src || src.tagName !== 'SCRIPT') {
                 return null;
             }
             if(isCspRestricted() && !src.nonce) {
@@ -109,7 +148,6 @@
             return funcName;
         }
 
-        var pendingCreateComponentRoutines = [];
 
         function createTemplateCompiler() {
             var ENCODE_QUALIFIER = '-',
@@ -172,16 +210,20 @@
                 var code = bag.join('');
                 var src = element[0];
 
+                // with csp_only mode, we always compile via script, and if it fails, we fallback to the text template
                 if(isCspRestricted()) {
+                    // might be extracted to a separate function
                     var compiled = compileViaScript(src, code);
-                    return null !== compiled ? compiled : text;
+                    return compiled !== null ? compiled : text;
                 }
+
+                // fallback to old behavior for legacy mode, or if Function constructor is allowed
                 try {
                     // eslint-disable-next-line no-new-func
                     return new Function('obj', 'encodeHtml', code);
                 } catch(e) {
-                    var fallback = compileViaScript(src, code);
-                    return null !== fallback ? fallback : text;
+                    var compiled = compileViaScript(src, code);
+                    return compiled !== null ? compiled : text;
                 }
             };
         }