PdfViewer requires 'unsafe-inline'

[kendo-bot]

Bug report

The PDFViewer requires the "unsafe-inline" keyword in the "style-src" directive.

Reproduction of the problem

1. Enable CSP and set the "style-src" directive to "self":

<meta http-equiv="Content-Security-Policy" content="style-src 'self' https://kendo.cdn.telerik.com;"/>

2. Create a PDFViewer:

<div id="pdfviewer"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
<script>
    window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js';
</script>
<script>
    $("#pdfviewer").kendoPDFViewer({
        pdfjsProcessing: {
            file: ""
        }
    });
</script>

A Dojo sample for reproduction: https://dojo.telerik.com/ugAyagIJ

Current behavior

When the PDFViewer is initialized, the following Content Security Policy error is thrown:

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

Expected/desired behavior

The the 'unsafe-inline' keyword must not be required in the "style-src" directive when using the PDFViewer widget.

Workaround:

Add the following script before the PDFViewer initialization:

<script>
    var styles = {
        scroller: "k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto"
    };
    kendo.ui.PDFViewer.fn._renderPageContainer = function () {
        var that = this;

        if (!that.pageContainer) {
            that.pageContainerWrapper = $("<div />");
            that.pageContainerWrapper.addClass(styles.scroller);

            that.pageContainer = $(`<div class="k-pdf-viewer-pages" />`);
            that.pageContainer.css('--scale-factor', that.zoomScale);
            that.pageContainer.attr("tabindex", 0);

            that.pageContainerWrapper.append(that.pageContainer);
            that.wrapper.append(that.pageContainerWrapper);
        }
    };
</script> 

Environment

• **Kendo UI version: 2024.2.514
• **jQuery version: 3.7.0
• **Browser: [all]