Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 19 Jun 2024 07:02 by ADMIN
Release 2024 Q3 (Aug)
Mark
Created on: 31 May 2024 18:44
Category: PDFViewer
Type: Bug Report
1
PdfViewer requires 'unsafe-inline'

### 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]

0 comments
Create an account Log In
View
Type
Status
Category