CSP not supported with nz-range-picker - it still has a div that has inline styles

[sarudiana18]

What problem does this feature solve?

<nz-range-picker nzFormat="MM/dd/yyyy" nz-row [(ngModel)]="dateRange" [nzFormat]="dateFormat" (ngModelChange)="dateData(dateRange)" class="flex-no-wrap">

when I am looking with inspect on the app, i can see that nz-range-picker has this div: div class="ng-tns-c802749266-2 ant-picker-active-bar ng-star-inserted" ng-reflect-ng-style="[object Object]" style="position: absolute; width: 96px; left: 0px;"

which is causing the following error

platform-browser.mjs:590 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'nonce-NONCE_PLACEHOLDER'". Either the 'unsafe-inline' keyword, a hash ('sha256-T6AAKdWxO6p6GZVyzGAJDSLhOoPuuoZ6LlqMX153CvM='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

What does the proposed API look like?

remove inline styles

[ParsaArvanehPA]

Greetings @sarudiana18 , Could you please provide a testable sample for your problem? I can not generate the same error when using nz-range-picker.

[sarudiana18]

@ParsaArvanehPA please see the code below https://github.com/sarudiana18/sample-csp-handling. Also here you can see the inline style from nz-range-picker, in the div class="ant-picker-active-bar"

[sarudiana18]

@ParsaArvanehPA any updates on this? the fix that you provided doesnt seem to solve this issue. The csp error is visible when I click on date component and when the calendar is visible, maybe it's because of the calendar?

[arturovt]

@sarudiana18 the provided fix works. I checked it in your repo. There are still inline styles, but they're set through the ngStyle directive, which applies styles securely using element.style[property] = ..., rather than element.setAttribute('style', ...).