fix: Replace inline cursor style with CSS classes to resolve CSP violation#177
fix: Replace inline cursor style with CSS classes to resolve CSP violation#177
Conversation
Who-is-PS
changed the title
| if (container) { | ||
| const isHovered = !!(this.hoveredPoint || this.hoveredGroup); | ||
| container.classList.toggle(styles["cursor-pointer"], isHovered); | ||
| container.classList.toggle(styles["cursor-default"], !isHovered); |
There was a problem hiding this comment.
Why cursor-default is needed? Is it not enough to toggle cursor-pointer?
There was a problem hiding this comment.
cursor-default is unnecessary — removing the cursor-pointer class naturally falls back to the browser default. I'll simplify to just toggle cursor-pointer. Thanks!
|
How has this been tested? |
…lements
When hovering over the chart, Highcharts' SVG renderer calls
element.setAttribute('style', ...) for SVG elements that have a
'style' string attribute. This violates Content Security Policy
when 'style-src' is set to 'self', because setAttribute('style', ...)
is treated as an inline style by the browser's CSP enforcement.
The fix replaces 'style: "pointer-events: none"' string attributes
with direct SVG presentation attributes ('pointer-events': 'none'),
which Highcharts passes to setAttribute('pointer-events', 'none')
instead — a valid SVG attribute that does not trigger CSP violations.
Files changed:
- src/core/chart-api/chart-extra-tooltip.tsx: tooltip track elements
- src/internal/chart-styles.ts: cursor line element
- src/internal/components/series-marker/render-marker.tsx: highlight markers
Also reverts the previous cursor CSS class approach, as
container.style.cursor (CSSOM manipulation) is not blocked by CSP.
Resolves: AWSUI-61770
Who-is-PS
force-pushed
the
dev-v3-philosr-cartesian-chart-fix
branch
from
aa24fab to
ffe7e02
Compare
Ah, the actual violation comes from |
4 participants
Description
Using the
CartesianChartcomponent with the recommended Content Security Policy (style-src 'self') causes CSP violation errors when hovering over the chart:Root Cause
Several places in the codebase pass
style: "pointer-events: none"as a string attribute to Highcharts' SVG renderer. Internally, Highcharts'_defaultSettermethod callselement.setAttribute('style', 'pointer-events: none')on SVG elements — which is blocked by CSPstyle-src 'self'becausesetAttribute('style', ...)is treated as an inline style.Solution
Replaced
style: "pointer-events: none"with"pointer-events": "none"as a direct SVG presentation attribute. Sincepointer-eventsis a valid SVG attribute, Highcharts now callselement.setAttribute('pointer-events', 'none')instead, which does not trigger CSP violations.Also simplified the cursor style logic in
chart-extra-pointer.tsx(note:container.style.cursorvia CSSOM is not affected by CSP).Changes
src/core/chart-api/chart-extra-tooltip.tsx— Replacedstyle: "pointer-events:none"with"pointer-events": "none"src/internal/chart-styles.ts— Replacedstyle: "pointer-events: none"with"pointer-events": "none"src/internal/components/series-marker/render-marker.tsx— Replaced both occurrences ofstyle: "pointer-events: none"with"pointer-events": "none"src/core/chart-api/chart-extra-pointer.tsx— Simplified cursor style logic (minor cleanup)Related:
AWSUI-61770How has this been tested?
Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.