Kendo-react-popup uses inline CSS and violates Content Security Policy

[Vikram]

In our react project we have used @progress/kendo-react-grid module and set content security policy as style-src 'self'.  
Kendo-react-grid has dependency on Kendo-react-popup and that package is using inline style which violates content security policy. What is the best solution to overcome this issue or is there any version available for the same package without inline style.

Have attached screen shot of that function and We are getting below console error:


util.js:97 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-Y+wsDh+eE='), or a nonce ('nonce-...') is required to enable inline execution.

hasRelativeStackingContext @ util.js:97
../../node_modules/@progress/kendo-react-dateinputs/node_modules/@progress/kendo-react-popup/dist/es/util.js @ util.js:106
__webpack_require__ @ bootstrap:19
../../node_modules/@progress/kendo-react-dateinputs/node_modules/@progress/kendo-react-popup/dist/es/Popup.js @ Popup.js:1
__webpack_require__ @ bootstrap:19
../../node_modules/@progress/kendo-react-dateinputs/node_modules/@progress/kendo-react-popup/dist/es/main.js @ main.js:1
__webpack_require__ @ bootstrap:19
../../node_modules/@progress/kendo-react-dateinputs/dist/es/datepicker/DatePicker.js @ DatePicker.js:1
__webpack_require__ @ bootstrap:19
../../node_modules/@progress/kendo-react-dateinputs/dist/es/main.js @ main.js:1
__webpack_require__ @ bootstrap:19
../../node_modules/@progress/kendo-react-data-tools/dist/es/filteringCells/DateFilter.js @ DateFilter.js:1
__webpack_require__ @ bootstrap:19
../../node_modules/@progress/kendo-react-data-tools/dist/es/filteringCells/index.js @ index.js:1
__webpack_require__ @ bootstrap:19
../../node_modules/@progress/kendo-react-data-tools/dist/es/main.js @ main.js:1
__webpack_require__ @ bootstrap:19
../../node_modules/@progress/kendo-react-grid/dist/es/Grid.js @ Grid.js:1
__webpack_require__ @ bootstrap:19
../../node_modules/@progress/kendo-react-grid/dist/es/main.js

[Stefan]

Hello, Vikram,

This is currently expected as the Popup and some other components, like the Window for example have a dynamic position that is controlled via the top and left styles.

The unsafe-inline has to be used.

We understand that this not ideal, but there is no other option to dynamically set the position of an HTML element. If such an option is available we will review it and discuss an optimization.

Apologies for the inconvenience this may have caused you.

Regards,
Stefan
Progress Telerik

[Adam]

var hasRelativeStackingContext = memoize(function (elementSource) {
    if (!canUseDOM()) { return false; }

    // Component need to pass element to make sure document owner is correct.
    // This however might be performance hit if checked for example on each drag event.
    var currentDocument = elementSource ? elementSource.ownerDocument : document;

    if (!currentDocument || !currentDocument.body) { return false; }

    var top = 10;
    var parent = currentDocument.createElement("div");
    parent.style.transform = "matrix(10, 0, 0, 10, 0, 0)";
    parent.innerHTML = "<div style=\"position: fixed; top: " + top + "px;\">child</div>";

    currentDocument.body.appendChild(parent);

    var isDifferent = parent.children[0].getBoundingClientRect().top !== top;

    currentDocument.body.removeChild(parent);

    return isDifferent;
});

 

The warning comes from the code above which tries to insert some html node in unsafe way. The method is used only to check whether there is some stacking context ?! Why not simply insert that element as react component and steer its top value in the react way? I am pretty sure it does not justify breaking whole CSP just for this simple check. Can you please take a look at it once again?

[Konstantin Dikov]

Hi Adam,

I have gone through the issue and I you correct that there is a way for this to be changed so that it doesn`t violate the CSP. I have logged an issue for this in our public repository, where you can follow its progress:

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

Please excuse us for any inconvenience caused by this.

[Konstantin Dikov]

The issue should no be resolved with the latest version. 

If you still face any problem, please do not hesitate to get back to us.