如何让 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

并且不会出现类似的错误

And not to get errors like

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

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

有没有办法删除剑道生成的内联脚本或将内容安全策略 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

<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 给出答案后，我最终在剑道延迟初始化脚本上使用了 nonce.

---

Solution

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

来源:ASP.NET 中的 CSP Nonce

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

推荐答案

您可以控制 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屋！