You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: "Learn about the issues that may occur when using the strict Content Security Policy with UI for ASP.NET Core HTML helpers and Tag Helpers."
4
+
description: "Learn more about the Content Security Policy (CSP) mode and how to work with it in Telerik UI for {{ site.framework }} controls."
If the strict CSP mode is enabled, some browser features are disabled by default:
15
15
16
-
* Inline JavaScript, such as `<script></script>`, or DOM event attributes, such as `onclick`, are blocked. All script code must reside in separate files that are served from a white-listed domain.
16
+
* Inline JavaScript, such as `<script></script>`, or DOM event attributes, such as `onclick`, are blocked. All script code must live in separate files that are served from the allow-listed domain.
17
17
18
18
* Dynamic code evaluation through `eval()` and string arguments for both `setTimeout` and `setInterval` are blocked.
19
19
20
20
## (For R1 2023 SP1 and Later) Working with Telerik UI for {{ site.framework }} Components
21
21
22
22
As of R1 2023 release, the Kendo UI scripts address the `unsafe-eval` directive for all components except for the [Spreadsheet](https://docs.telerik.com/kendo-ui/controls/spreadsheet/overview). For the bigger part of its core engine, the Kendo UI for jQuery Spreadsheet uses the `Function` evaluation, and rewriting the logic of the component will lead to a great number of breaking changes.
23
23
24
-
The rest of the Kendo UI components and internal mechanisms have been completely rewritten to discard the usage of the `eval()` and `new Function()` calls.
24
+
The rest of the Kendo UI components and internal mechanisms have been rewritten to discard the usage of the `eval()` and `new Function()` calls.
25
25
26
26
{% if site.core %}
27
27
@@ -30,7 +30,7 @@ When Kendo UI components are initialized from HTML helpers or Tag Helpers, inlin
30
30
31
31
{% else %}
32
32
33
-
When Kendo UI components are initialized from HTML helpers there are inline scripts that are generated automatically after each component HTML markup. When the CSP is enabled, you will get the following error: `Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' 'self' https://kendo.cdn.telerik.com.`
33
+
When Kendo UI components are initialized from HTML helpers, inline scripts are generated automatically after each component HTML markup. When the CSP is enabled, you will get the following error: `Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' 'self' https://kendo.cdn.telerik.com.`
34
34
35
35
{% endif %}
36
36
@@ -43,7 +43,7 @@ To resolve the issue and prevent the components from being dependent on the `uns
43
43
44
44
{% if site.core %}
45
45
46
-
The `DeferredScriptFile` method simulates loading the initialization scripts as a `JS` file through middleware to ensure strict CSP compliance. You can either use the [global deferred initialization functionality]({% slug fundamentals_core%}#deferring-components-globally) to configure all Telerik UI for ASP.NET Core components as deferred globally or [defer each component separately]({% slug fundamentals_core%}#deferring-specific-components) by using the `Deferred` method.
46
+
The `DeferredScriptFile` method simulates loading the initialization scripts as a `JS` file through `middleware` to ensure strict CSP compliance. You can either use the [global deferred initialization functionality]({% slug fundamentals_core%}#deferring-components-globally) to configure all Telerik UI for ASP.NET Core components as deferred globally or [defer each component separately]({% slug fundamentals_core%}#deferring-specific-components) by using the `Deferred` method.
47
47
48
48
{% else %}
49
49
@@ -60,93 +60,124 @@ Call the method after all components declarations to serialize the deferred init
60
60
61
61
### Creating Content Security Policy Templates
62
62
63
-
Most of the components support templating options, which use the [Kendo UI Templates syntax](https://docs.telerik.com/kendo-ui/framework/templates/overview), for example, [Grid templates]({% slug htmlhelpers_grid_aspnetcore_templates_overview %}), [DropDownList templates]({% slug htmlhelpers_dropdownlist_templates_aspnetcore %}), and more. To avoid using the [inline](https://docs.telerik.com/kendo-ui/framework/templates/get-started-inline) and [external](https://docs.telerik.com/kendo-ui/framework/templates/get-started-external) Kendo UI templates and remove the `unsafe-eval` keyword from the `meta` tag of your Telerik UI for {{ site.framework }} application, you can define functional templates. For more information on the CSP-compatible templates, [refer to the CSP-compatible templates section]({% slug client_templates_overview %}#content-security-policy-csp-templates).
63
+
Most of the components support templating options, which use the [Kendo UI Templates syntax](https://docs.telerik.com/kendo-ui/framework/templates/overview), for example, [Grid templates]({% slug htmlhelpers_grid_aspnetcore_templates_overview %}), [DropDownList templates]({% slug htmlhelpers_dropdownlist_templates_aspnetcore %}), and more. To remove the `unsafe-eval` keyword from the `meta` tag of your Telerik UI for {{ site.framework }} application, you must convert the client templates of all components into CSP-compatible templates. For more information on the CSP-compatible templates, [refer to the CSP-compatible templates section]({% slug client_templates_overview %}#content-security-policy-csp-templates).
64
64
65
-
The example below demonstrates how to define a CSP-compatible [client detail template of a Grid]({% slug clientdetailtemplate_grid_aspnetcore %}).
65
+
The example below demonstrates how to use the [Template component]({% slug htmlhelpers_overview_template %}) to define a CSP-compatible [client detail template of a Grid]({% slug clientdetailtemplate_grid_aspnetcore %}).
The engine for the [inline](https://docs.telerik.com/kendo-ui/framework/templates/get-started-inline) and [external](https://docs.telerik.com/kendo-ui/framework/templates/get-started-external) templates will remain available. However, if you are using the previous template syntax, you must include the `usafe-eval` directive in the `meta` tag.
174
+
For a runnable example, refer to the [Template component integration with Grid demo](https://demos.telerik.com/{{ site.platform }}/template/integration-grid).
175
+
176
+
The engine for the Kendo UI [inline](https://docs.telerik.com/kendo-ui/framework/templates/get-started-inline) and [external](https://docs.telerik.com/kendo-ui/framework/templates/get-started-external) templates will remain available. However, if you are using the previous template syntax, you must include the `usafe-eval` directive into the application `meta` tag.
146
177
147
178
## (Prior to R1 2023 SP1) Working with Telerik UI for {{ site.framework }} Components
148
179
149
-
The Telerik UI for {{ site.framework }} releases prior to the R1 2023 SP1 one does not support the strict CSP mode. Thus, in these previous versions, if the Content Security Policy (CSP) is enabled, you could set the [`script-src` policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) as follows:
180
+
The Telerik UI for {{ site.framework }} releases before the R1 2023 SP1 one does not support the strict CSP mode. Thus, in these previous versions, if the Content Security Policy (CSP) is enabled, you can set the [`script-src` policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) as follows:
0 commit comments