CSP not compatible if the Grid's column widths are defined

[martintabakov]

Bug report

A directive violation error occurs if you try to use CSP when the Grid's columns widths are defined.

Reproduction of the problem

1. Run the attached project with http-server
2. Open the browser console
   test1.zip

Current behavior

A dozen of errors are thrown on the console

Expected/desired behavior

No errors should be thrown

Environment

• Kendo UI version: 2023.2.606
• Browser: [all]

[kahanam]

Is it possible to see what fix was for this issue? It may help me understand and solve some of my own CSP issues.

[Iankodj]

@kahanam The fix is related to removing the unsafe-inline value of the style-src directive (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src).

Such issues are related when using style attribute for decoration instead of properties. And the solution for this (and for all similar situations) is to move any style attribute assigns to style property assigns.

In the case of jQuery this would be:

Not CSP compatible:

    $("<span style='background-color: red;'>span</span>").appendTo(document.body);

CSP compatible:

    $("<span>span</span>").css("background-color", "red").appendTo(document.body);

And without jQuery:

Not CSP compatible:

    const span = document.createElement('span');
    span.innerText = "span";
    span.setAttribute("style", "background-color: red;");
    document.body.appendChild(span);

CSP compatible:

    const span = document.createElement('span');
    span.innerText = "span";
    span.style.backgroundColor = "red";
    document.body.appendChild(span);