This is a migrated thread and some comments may be shown as answers.

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

2 Answers 252 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Vikram
Top achievements
Rank 1
Vikram asked on 22 Mar 2021, 05:05 AM
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

2 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 22 Mar 2021, 12:02 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Adam
Top achievements
Rank 1
Iron
answered on 04 May 2022, 07:30 AM

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
Telerik team
commented on 06 May 2022, 06:46 AM

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:

Please excuse us for any inconvenience caused by this.

Konstantin Dikov
Telerik team
commented on 04 Jul 2022, 04:35 AM

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.

Tags
General Discussions
Asked by
Vikram
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Adam
Top achievements
Rank 1
Iron
Share this question
or