PDFViewer / pdfjs vulnerability

[Vladislav]

Hi!

I tried to upgrade to version 8.1.1. The main reason was to solve the problem with pdfjs vulnerability. But after the upgrade it gives me an error:

[ERROR] Could not resolve "@progress/kendo-pdfviewer-common"

 node_modules/@progress/kendo-react-pdf-viewer/PDFViewer.mjs:22:287:
 22 │ ...Nt, download as Tt, print as Mt, DEFAULT_ZOOM_LEVEL as Pt } from "@progress/kendo-pdfviewer-common";
 ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

If I installed/Returned kendo-pdfviewer-common, in package-lock.json I see the requirementon pdfjs-dist in version 3.11.174 and the builder warns of a vulnerability problem with pdfjs.

I don't know what I am doing wrong or what is the correct way to avoid the vulnerability with pdf.js. I tried clean install, reset npm cache, nothing helped.

 

And sorry. The second question I noticed while testing. Build scss (@progress/kendo-theme-bootstrap/scss/all.scss) which took a few seconds on version 5.12 now takes about 180 seconds. I use Esbuild as a builder. I know the themes have been changed, but what could have caused it to take so long?

 

Well thank you.

[Yanko]

Hello, Vladislav,

We recently bumped the version of the kendo-pdfviewer-common in order to avoid the pdf.js vulnerability. Here is the official issue that can be tracked:

• https://github.com/telerik/kendo-react/issues/2237

Please note that the notification about the vulnerability will persist after running  `npm audit` but the actual vulnerability is avoided. This is because, despite setting `isEvalSupported` to false to avoid the vulnerability, the library still uses eval, causing it to appear in the audit results.

As for the slow build, I can suggest importing just the styles that are needed instead of the whole package. This will significantly reduce the build time:

// Import only the PanelBar and Grid styles using Node Sass
@import "~@progress/kendo-theme-default/scss/panelbar/_index.scss";
@import "~@progress/kendo-theme-default/scss/grid/_index.scss";

// or using Dart Sass
@import "~@progress/kendo-theme-default/scss/panelbar/";
@import "~@progress/kendo-theme-default/scss/grid/";

Another solution can be to import the package inside the App component file instead of an external css file:

import React from 'react';
import './App.css';
import '@progress/kendo-theme-default/dist/all.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
      </header>
    </div>
  );
}

export default App;

As a side note, it will be of great help to us if you can submit separate inquiries for each question, this way we can be more sufficient in providing you with assistance. 

I hope this helps. If you require any additional help, please do not hesitate to reach out.

Regards,
Yanko
Progress Telerik