如何让KendoUI MVC与内容安全策略一起使用 [英] How can I get KendoUI MVC to work with Content Security Policy

问题描述

在使用ASP.NET MVC Kendo组件时，如何避免Telerik KendoUI创建内联脚本？

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

避免内联脚本的原因是遵循CSP标题

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

并且不会出现错误，如

拒绝执行内联脚本，因为它违反了以下内容安全策略指令：script-src'self''unsafe-eval' https://kendo.cdn.telerik.com 。

是否有删除kendo生成的内联脚本或
将内容安全策略nonce / sha256附加到脚本？

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

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

浏览器html

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>

---

解决方案

在@dimodi回答之后，我最终在kendo延迟初始化脚本上使用了nonce。

---

Solution

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

来源： ASP.NET中的CSP Nonces

@(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

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"));
    }
}

推荐答案

你可以控制在页面上呈现Kendo UI MVC内联脚本的位置，但无法完全删除它们。实际上，你可以，但是小部件不会初始化。

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.

考虑使用非MVC Kendo UI小部件：

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小部件提供对初始化脚本放置的完全控制 - 服务器包装器在小部件的HTML输出之后立即呈现小部件的初始化脚本。即使您使用延迟初始化，脚本仍保留在视图中。使用普通（非包装）Kendo UI小部件时，您自己编写初始化脚本并将其移动到外部脚本文件。

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.

另外请记住，Kendo UI模板依赖于 eval ，如果启用了CSP，这也会带来麻烦。

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

这篇关于如何让KendoUI MVC与内容安全策略一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！