Astro Info
Astro v6.3.1
Node v24.14.0
System Linux (x64)
Package Manager pnpm
Output static
Adapter @astrojs/cloudflare
Integrations @astrojs/sitemap
If this issue only occurs in one browser, which browser is a problem?
No response
Describe the Bug
When responsive images are enabled, the fix provided for issue #16215 last week causes an attribute such as style="object-position: center" to be added to every img tag in the output HTML.
When Content Security Policy is enabled via security.csp in the Astro config, this style is blocked by current browsers (seen in Chrome 147), because Astro does not produce a hash for it, and Astro would need to set "unsafe-hashes" in the produced Content-Security-Policy meta tag anyway for the hash to have an effect.
It is not possible to work around this issue currently without manually editing the produced CSP tag in middleware, because Astro does not provide a way to include "unsafe-hashes" in the security.csp.styleDirective section of the configuration settings, as it is a CSP level 3 feature.
What's the expected result?
Enabling both responsive images and astro's CSP support should result in a site with no CSP issues, as seen in Chrome Dev Tools when the page is loaded in preview, or in production.
Preferably, Astro should not be using inline style attributes at all, as allowing them is considered unsafe - see MDN. Refactoring the fix from #16215 to bundle the necessary CSS in some other way (such as a separate <style> tag with an auto-generated hash) would be best.
If that is not possible, Astro should automatically add "unsafe-hashes" and a hash generated from the attribute content to either style-src-attr (preferred, but currently blocked by #16233) or style-src.
Link to Minimal Reproducible Example
https://github.com/stephen-sorley/astro-responsive-images-csp
Participation
Astro Info
If this issue only occurs in one browser, which browser is a problem?
No response
Describe the Bug
When responsive images are enabled, the fix provided for issue #16215 last week causes an attribute such as style="object-position: center" to be added to every img tag in the output HTML.
When Content Security Policy is enabled via security.csp in the Astro config, this style is blocked by current browsers (seen in Chrome 147), because Astro does not produce a hash for it, and Astro would need to set "unsafe-hashes" in the produced Content-Security-Policy meta tag anyway for the hash to have an effect.
It is not possible to work around this issue currently without manually editing the produced CSP tag in middleware, because Astro does not provide a way to include "unsafe-hashes" in the security.csp.styleDirective section of the configuration settings, as it is a CSP level 3 feature.
What's the expected result?
Enabling both responsive images and astro's CSP support should result in a site with no CSP issues, as seen in Chrome Dev Tools when the page is loaded in preview, or in production.
Preferably, Astro should not be using inline style attributes at all, as allowing them is considered unsafe - see MDN. Refactoring the fix from #16215 to bundle the necessary CSS in some other way (such as a separate <style> tag with an auto-generated hash) would be best.
If that is not possible, Astro should automatically add "unsafe-hashes" and a hash generated from the attribute content to either style-src-attr (preferred, but currently blocked by #16233) or style-src.
Link to Minimal Reproducible Example
https://github.com/stephen-sorley/astro-responsive-images-csp
Participation