Notification CSP-compatible Template

[Daniel]

I have a notification that looks like this:

<kendo-notification name="notifications" stacking="NotificationStackingSettings.Down" auto-hide-after="2500">
    <position pinned="true" top="30" right="30" />
    <popup-animation>
        <open duration="700" />
        <close duration="250" />
    </popup-animation>
    <templates>
        <notification-template type="success" template='<p class="text-lead"><i class="fas fa-check-circle"></i> #=message#</p>'>
        </notification-template>
        <notification-template type="error" template='<p class="text-lead"><i class="fas fa-exclamation-circle"></i> #=message#</p>'>
        </notification-template>
    </templates>
</kendo-notification>

I want to avoid using unsafe-eval in the Content Security Policy. How do I convert the templates? The instructions given here are not clear in this case. I want to avoid using a client-side handler if possible.

Thank you

[Alexander]

Hi Daniel,

I'm currently in the midst of an investigation and I will provide you with an update. In regard to my findings.

I will update this thread shortly.

[Alexander]

Hi Daniel,

I appreciate your patience!

At this stage, using a handler would be the only feasible option. In order to make the templates fully compliant with CSP. As it will preserve the usage of the template variables that come with it. For example:

<kendo-notification name="notifications" stacking="NotificationStackingSettings.Down" auto-hide-after="2500">
    <position pinned="true" top="30" right="30" />
    <popup-animation>
        <open duration="700" />
        <close duration="250" />
    </popup-animation>
    <templates>
        <notification-template type="success" template-handler="myHandler">
        </notification-template>
    </templates>
</kendo-notification>


<script nonce="kendoInlineScript">
    function myHandler(data) {
        debugger;
        return `<p class="text-lead"><i class="fas fa-check-circle"></i>${data.content}</p>`
    }

    $(document).ready(function(){
        setTimeout(function () {
            $("#notifications").getKendoNotification().show("Some Message", "success")
        })
    })
</script>

As a matter of fact, I managed to conclude that there is a more TagHelper-friendly way of doing things. And that is to nest the "notification-template" TagHelper. As implied within our official API documentation:

• NotificationTemplateTagHelper API Reference

For instance:

<notification-template>
    <notification-template></notification-template>
</notification-template>

However, it appears that this configuration is not serialized accordingly. The final verdict being that this inevitably falls within the bug category.

As a consequence, I have logged the following items:

• Feedback Portal Item - https://feedback.telerik.com/aspnet-core-ui/1660756-notificationtemplatetaghelper-is-not-serialized-when-nested

• GitHub Issue - https://github.com/telerik/kendo-ui-core/issues/7928

"Both items work in a strong symbiosis. Thus, feel free to follow the item you find most suitable."

I am happy to let you know that I have personally embarked on the task of providing a fix candidate. In order to not delay this further. It is currently pending review by our felow developer subject matter experts.

For further being of such help in unravelling this, I have also updated your Telerik points. As way of saying thank you and keeping up the awesomeness :)

I hope this information illuminates more details on the subject matter.

Kind Regards,
Alexander
Progress Telerik

[Daniel]

Thanks for your help.