CSP Requires 'unsafe-inline' for popup style attribute
#9,168 opened on Nov 12, 2023
Repository metrics
- Stars
- (45,486 stars)
- PR merge metrics
- (Avg merge 43m) (1 merged PR in 30d)
Description
Checklist
- I've looked at the documentation to make sure the behavior isn't documented and expected.
- I'm sure this is an issue with Leaflet, not with my app or other dependencies (Angular, Cordova, React, etc.).
- I've searched through the current issues to make sure this hasn't been reported yet.
- I agree to follow the Code of Conduct that this project adheres to.
Steps to reproduce
Using the popup in any leaflet map, the library adds a style attribute to the popup layer causing csp policies without unsafe-inline to report errors. Because this is using the style attribute, there is no other workaround other than allowing unsafe-inline.
More Information
In my tests so far, this style attribute seems to make no visible difference when it is blocked. Perhaps it can be removed if its not a browser compatibility requirement. I'm not using report-only, so I do not believe the css is being evaluated and even if I include the hash chrome suggests in my Content Security Policy the same error still occurs with the same hash, implying it is using the style attribute.
I'm not sure the best way to create a viewable demo since this requires setting a CSP accordingly, but I will provide a test page if I can figure out a good way to do so. Please let me know how I can assist and I'm certainly willing to help test any modification you like.
Expected behavior
That the library has some mechanism for avoiding this error by default or provides a mechanism to do so.
Google Places, for example, will use an empty, nonced, style tag to add any css if one is provided, instead of writing inline styles.
Current behavior
A content security policy without unsafe-inline allowed will fail consistent when a popup is triggered to be displayed. The error does not appear to happen again when it is disabled, but will occur again each time a popup is displayed/added to the map.
Minimal example reproducing the issue
No response
Environment
- Leaflet version: 1.9.4+v1.d15112c
- Browser (with version): Chrome Version 119.0.6045.123 (Official Build) (64-bit)
- OS/Platform (with version): Ubuntu Linux 22.04