1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Script nonce for ejs-scriptmanager

Script nonce for ejs-scriptmanager

This is not particular to the Schedule control, but a more general question.
My website uses content security policies, that require a nonce for any inline scripts.

The <ejs-scripts></ejs-scripts> tag helper inserts a blank <script></script> section into the HTML.

All other inline scripts use a tag helper to insert a nonce; e.g.
<script type="text/javascript" asp-add-nonce="true">
   console.log("testing");
</script>

results in 
<script type="text/javascript" nonce="gV2GdXMfgA0I506ANj9gaquQlxC1Eym4oqWKTvFkWps=">
   console.log("testing");
</script>

How do I add a nonce to <ejs-scripts>? Can I overwrite the Tag Helper? Can I manually insert the script section?

4 Replies
ST Stefan September 12, 2018 02:42 PM UTC

Overwriting the Tag Helper was the solution, in case it helps anyone searching for this:

Using the nuget-package for https://github.com/juunas11/aspnetcore-security-headers, I added:

namespace [YourSolutionName].Extensions.TagHelpers
{
    [HtmlTargetElement("ejs-scripts", Attributes = "asp-add-nonce")]
    public class Ej2ScriptManager : ScriptRenderer
    {
        private readonly ICspNonceService _nonceService;
        [HtmlAttributeName("asp-add-nonce")]
        public bool AddNonce { get; set; }

        public Ej2ScriptManager(ICspNonceService nonceService) : base()
        {
            _nonceService = nonceService;            
        }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            base.Process(context, output);
            if (AddNonce)
            {
                // The nonce service is created per request, so we
                // get the same nonce here as the CSP header
                output.Attributes.Add("nonce", _nonceService.GetNonce());
            }
        }
    }
}

Register the Tag helper in _ViewImports:
@addTagHelper "*,  [YourSolutionName]"

change 
<ejs-scripts></ejs-scripts> to <ejs-scripts asp-add-nonce="true"></ejs-scripts>

Output:
<!-- Syncfusion Essential JS 2 ScriptManager -->
<script nonce="l7pjBaW1Ftc/&#x2B;Saonaz2L34lArE8CEAhTVYbSz759x0="></script>

Working fine.

NR Nevitha Ravi Syncfusion Team September 13, 2018 06:42 AM UTC

Hi Stefan,   
  
Glad that you have resolved the issue and  if you need any other assistance please feel free to contact us anytime.  
  
Regards,   
Nevitha   
 


RE Reto April 18, 2022 08:58 PM UTC

Found this, when I had a a CSP-related error. Thx for the post, this lead me a shorter "implementation". I assume, when you posted your solution, the ejs-scripts tag did not have a "add-nonce" attribute, thats why you overriden the TagHelper.

Now it works without it, and with just 

Simply DI ICspNoneService into the (partial) view where you have the ejs-scripts tag and with 3 lines of simplest code (and no overriding) the issue is solved. 


Snippet
@using Syncfusion.EJ2

/// dependency to be able to inject the ICspNonceService​
@using Joonasw.AspNetCore.SecurityHeaders.Csp

/// inject the service ​
@inject ICspNonceService NonceService 

/// change the ejs-script tag

Snippet
<ejs-scripts add-nonce="@NonceService.GetNonce()"></ejs-scripts>

JL Joshna Lingala Uthama Reddy Lingala Syncfusion Team April 19, 2022 11:49 AM UTC

Hi Reto,


We let you know that we have provided nonce support for ASP.NET core components and can add the “add-nonce” property to the script without using any external TagHelpers. We have prepared a sample for your reference which you can download from the below link.


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CORENO~12007670104


Code Snippets:


~/Views/Shared/_Layout.cshtml

 

<head>

     .....

    <link rel="stylesheet" rel='nofollow' href=https://cdn.syncfusion.com/ej2/20.1.48/bootstrap5.css />

 

    <script src=https://cdn.syncfusion.com/ej2/20.1.48/dist/ej2.min.js nonce="@Context.Items["ScriptNonce"]"></script>

 

</head>

<body>

    .....

 

    <ejs-scripts add-nonce="@Context.Items["ScriptNonce"]"></ejs-scripts>

 

</body>



Kindly try with the sample and get back to us if you have any queries.


Regards,

Joshna L


Loader.
Up arrow icon