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

2 posts, 1 answers
  1. Vikram
    Vikram avatar
    1 posts
    Member since:
    Oct 2020

    Posted 22 Mar Link to this post

    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. Answer
    Stefan
    Admin
    Stefan avatar
    3070 posts

    Posted 22 Mar Link to this post

    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/.

Back to Top