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

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

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?