CSP not supported with nz-range-picker - it still has a div that has inline styles
Closed this issue · 4 comments
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
Greetings @sarudiana18 ,
Could you please provide a testable sample for your problem?
I can not generate the same error when using nz-range-picker.
@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"
@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?
@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', ...).