How can I get KendoUI MVC to work with Content Security Policy

content security policy generator
content-security-policy asp net web forms
react content security policy
fiddler content-security-policy
content security policy xss
content security policy: ignoring 'unsafe-inline''' within script-src: 'strict-dynamic' specified
kendo ui
content security policy onerror

How do I avoid Telerik KendoUI creating inline scripts when using ASP.NET MVC Kendo compontents?

The reason for avoiding inline scripts is to adhere by CSP header

Content-Security-Policy: script-src 'self' 'unsafe-eval' https://kendo.cdn.telerik.com

And not to get errors like

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' https://kendo.cdn.telerik.com".

Is there a way to remove the kendo generated inline scripts or attach Content Security Policy nonce / sha256 to the scripts?

Simple Example (KendoUI Menu)
cshtml
@(Html.Kendo().Menu()
  .Name("nav-menu")
  .Items(items =>
  {
      items.Add().Text("Home").Action("Index", "Overview");
  })
)
Browser html
<ul class="k-widget k-reset k-header k-menu k-menu-horizontal" id="nav-menu" data-role="menu" tabindex="0" role="menubar" aria-activedescendant="nav-menu_mn_active">
    <li class="k-item k-state-highlight k-state-default k-first" role="menuitem">
        <a class="k-link" href="/">Home</a>        
    </li>
</ul>
<script>
    jQuery(function(){jQuery("#nav-menu").kendoMenu({});});
</script>

Solution

After the answer from @dimodi I ended up using nonce on kendo deferred initialization scripts.

Source: CSP Nonces in ASP.NET

cshtml
@(Html.Kendo().Menu()
  .Name("nav-menu")
  .Items(items =>
  {
      items.Add().Text("Home").Action("Index", "Overview");
  })
  .Deferred()
)

<script type="text/javascript" nonce="@Html.ScriptNonce()">
    @Html.Kendo().DeferredScripts(false)
</script>
Startup.cs
public partial class Startup
{
    public void Configuration(IAppBuilder app)
    {
        app.Use((context, next) =>
        {
            var rng = new RNGCryptoServiceProvider();
            var nonceBytes = new byte[32];
            rng.GetBytes(nonceBytes);
            var nonce = Convert.ToBase64String(nonceBytes);
            context.Set("ScriptNonce", nonce);
            context.Response.Headers.Add("Content-Security-Policy",
                new[] {$"script-src 'self' 'unsafe-eval' https://kendo.cdn.telerik.com 'nonce-{nonce}';"
            });
            return next();
        });
    }
}

public static class NonceHelper
{
    public static IHtmlString ScriptNonce(this HtmlHelper helper)
    {
        var owinContext = helper.ViewContext.HttpContext.GetOwinContext();
        return new HtmlString(owinContext.Get<string>("ScriptNonce"));
    }
}

You can control where the Kendo UI MVC inline scripts are rendered on the page, but cannot completely remove them. Actually, you can, but then the widgets will not initialize.

Consider using the non-MVC Kendo UI widgets:

http://docs.telerik.com/kendo-ui/aspnet-mvc/kendo-ui-vs-mvc-wrappers

Vanilla HTML/JavaScript Kendo UI widgets provide full control over the placement of the initialization scripts - server wrappers render the widgets' initialization scripts right after the widget's HTML output. Even if you use deferred initialization, the scripts are still kept in the View. When using plain (non-wrapper) Kendo UI widgets, you write the initialization scripts yourself and can move them to external script files.

Also keep in mind that Kendo UI templates rely on eval, which will also bring troubles if CSP is enabled.

Getting Kendo MVC to work with Content Security Policy in UI for , Getting Kendo to work with a Content Security Policy in MVC 5 is not easy and documentation is scarce. I tried using the NWebSec CSP package from Nuget� Content-Security-Policy: script-src 'self' 'unsafe-eval' https://kendo.cdn.telerik.com And not to get errors like. Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' https://kendo.cdn.telerik.com". Is there a way to remove the kendo generated inline scripts or

I tried using the NWebSec CSP package from Nuget (5.1.1 https://docs.nwebsec.com/en/aspnet4/index.html) but could not get it to work with the NWebSec '<'content-Security-Policy> section in Web.config. Even though the CSP looked fine in report-only mode and Kendo Widgets work, as soon as you turn on the CSP, the Widgets fail completely.

I remarked out the '<'content-Security-Policy> section of the '<'nwebsec> in Web.config and moved all of my CSP directives back into '<'httpProtocol> <'customHeaders> and Kendo MVC (2018.1.322) now works.

By maintaining NWebSec as part of the project and adding @using NWebsec.Mvc.HttpHeaders.Csp into Views and applying the HTMLHelper into script tags I get an automatically generated nonce for any inline scripts '<'script @Html.CspScriptNonce() > so it is still valuable to keep NWebSec

How can I get KendoUI MVC to work with Content Security Policy , You can control where the Kendo UI MVC inline scripts are rendered on the page , but cannot completely remove them. Actually, you can, but� Use a valid type value, or remove the type property, or add the corresponding missing file—for example, kendo.aspnetmvc.min.js when using the Kendo UI MVC wrappers. Note that the dataSource type differs from the type of the transport actions .

For anyone searching this in 2019, we use Joonasw.AspNetCore.SecurityHeaders for our Csp and it was blocking eval() that kendo used, we solved this by adding this to our Startup

app.UseCsp(csp =>
            {
                 ...
                   csp.AllowScripts
                .FromSelf()
                .From("kendo.cdn.telerik.com")
                .AllowUnsafeInline()
                .AllowUnsafeEval();

                 ...
             }

How can I get KendoUI MVC to work with Content Security Policy, You can control where the Kendo UI MVC inline scripts are rendered on the page , but cannot completely remove them. Actually, you can, but then the widgets� Apply the same approach as the Kendo UI demos demonstrate—return the data array only. For example, in an MVC action, use the return Json (myData, JsonRequestBehavior.AllowGet); configuration without.ToDataSourceResul () as demonstrated in the MVC TreeView Remote Binding demo.

Configuring Content-Security-Policy — NWebsec documentation, Content-Security-Policy (CSP) provides a safety net for injection attacks by specifying a Internet Explorer CSP support is lacking for now, but they're working on it. and then move on to the configuration section and the MVC attributes. The Kendo UI CDN is hosted on the Amazon CloudFront. Only the official Kendo UI releases and serviced packs are uploaded to the CDN. Internal builds are not available on CDN. To access the Kendo UI CDN services, you can use either the HTTP or the HTTPS protocol. Using the HTTP Protocol

javascript, NET MVC Kendo组件时,如何避免Telerik KendoUI创建内联脚本? Content- Security-Policy: script-src 'self' 'unsafe-eval' https://kendo.cdn.telerik.com Use(( context, next) => { var rng = new RNGCryptoServiceProvider(); var nonceBytes�

security, We will start by creating a sample grid, applying a simple template, and then Dec 26, 2017 � Kendo UI: call a function from a template In this post we will see the Resources blocked by the use of a Content-Security-Policy HTTP header are�

Comments
  • Thank you for the response