EmDash Image emits inline style attributes that violate strict CSP

[khoinguyenpham04]

This Roadmap discussion mirrors #1602: EmDash Image emits inline style attributes that violate strict CSP.

Use this discussion to upvote the roadmap item and discuss priority, use cases, and product feedback. Keep implementation tracking, reproduction details, and PR-specific feedback on the source issue.

• Source issue: #1602
• Status: Open
• Labels: bug, bot:working, bot:bug
• Original author: diogoascarneiro

Original Issue

Description

The Image component from emdash/ui renders inline style attributes on <img> elements. In a site using Astro's strict CSP support with hashed style-src, these style attributes are blocked by the browser because hashes do not apply to style attributes unless unsafe-hashes/style-src-attr policy changes are made.

Example rendered output:

<img
  src="/_emdash/api/media/file/01KV0MGNT3F7E3CKS6P59FPY3D.png"
  width="1999"
  height="1125"
  alt="hero image"
  loading="eager"
  fetchpriority="high"
  decoding="async"
  style="aspect-ratio: 1.776888888888889; max-width: 100%; height: auto; background: url(&quot;data:image/bmp;base64,...&quot;) cover"
>

Expected behavior: Image should support CSP-compatible rendering without inline style attributes, or expose an option to disable inline styles/placeholders so sites can use classes and attributes instead.

Steps to reproduce

1. Create an Astro/EmDash site with strict CSP enabled via security.csp.
2. Render an image with Image from emdash/ui:

---
import { Image } from "emdash/ui";
---

<Image image={post.data.featured_image} priority />

3. Load the page in a browser.
4. See a CSP violation for the generated <img style="..."> attribute.

Environment

• emdash version: 0.22.0
• Node.js version: v22.22.3
• Runtime: Cloudflare Workers
• OS: macOS

Logs / error output

Applying inline style violates the following Content Security Policy directive 'style-src ...'. Either the 'unsafe-inline' keyword, a hash, or a 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. The action has been blocked.