Fix 19570 tree chart not compliant strict csp styles #19717
Conversation
|
Thanks for your contribution! To reviewers: If this PR is going to be described in the changelog in the future release, please make sure this PR has one of the following labels: This message is shown because the PR description doesn't contain the document related template. |
| `background-color:${backgroundColor};` | ||
| ]; | ||
|
|
||
| return `<div style="${styleCss.join('')}"></div>`; |
There was a problem hiding this comment.
Enabling a strict policy for the style-src directive in CSP offers several security benefits for your web application:
- XSS attacks aim to inject malicious scripts into your website. By restricting stylesheet sources, you prevent attackers from embedding malicious code within stylesheets and potentially compromising user data or website functionality.
- A strict policy grants you more control over the styles applied to your website. You determine the legitimate sources for stylesheets, preventing unauthorized styles from altering your website's appearance or behavior.
There was a problem hiding this comment.
styles properties that are set directly on the element's style property will not be blocked, allowing users to safely manipulate styles via JavaScript. e.g. this, document.body.style.background = 'green'; won't cause an unsafe-inline violation.
| `background-color:${backgroundColor};` | ||
| ]; | ||
|
|
||
| return `<div style="${styleCss.join('')}"></div>`; |
There was a problem hiding this comment.
styles properties that are set directly on the element's style property will not be blocked, allowing users to safely manipulate styles via JavaScript. e.g. this, document.body.style.background = 'green'; won't cause an unsafe-inline violation.
Brief Information
This pull request is in the type of:
What does this PR do?
This pull request addresses a specific limitation concerning Content Security Policy (CSP). When CSP is enabled, direct assignments to an element's style property using a string are disallowed. However it is possible to use className instead.
Basically, innerHTML causes the violation because it inserts html that contains inline styles.
Fixed issues
Tree chart with tooltips is not compliant with strict CSP directives for styles
Details
Before: What was the problem?
CSP violation errors are thrown into browser console:
After: How does it behave after the fixing?
It no longer uses inline styles.
Document Info
One of the following should be checked.
ZRender Changes
Others
Tried to apply a similar solution as in ecomfe/zrender#1030