fixes email styling by ahmetskilinc · Pull Request #1813 · Mail-0/Zero

ahmetskilinc · 2025-07-23T22:51:15Z

Description

Added 'style' tag to the list of allowed HTML tags in the email sanitization configuration. This change enables the preservation of inline CSS styles when processing email HTML content, which is important for maintaining the original formatting and appearance of emails.

Summary by CodeRabbit

New Features
- Enhanced email content display by allowing inline styles in emails.
- Improved security by sanitizing CSS within email styles to allow only safe properties and block harmful rules.

jazzberry-ai · 2025-07-23T22:51:19Z

Bug Report

Name	Severity	Example test case	Description
CSS Injection / Cross-Site Styling (XSS)	High	Inject `<style>` tag with CSS to exfiltrate cookies via background image URL	The addition of `style` to the allowed tags in the `sanitizeHtml` configuration allows for CSS injection, enabling attackers to steal sensitive information, deface emails, and potentially circumvent security measures.

_{Comments? Email us. Your free trial ends in 6 days.}

coderabbitai · 2025-07-23T22:51:22Z

Caution

Review failed

The pull request is closed.

Walkthrough

The change updates the preprocessEmailHtml function to allow <style> tags and adds CSS sanitization for inline styles using the CssSanitizer from @barkleapp/css-sanitizer. It sanitizes CSS content within <style> elements, restricting allowed properties, at-rules, and functions, while also adding the new dependency.

Changes

File(s)	Change Summary
apps/server/src/lib/email-processor.ts	Allowed `'style'` tag in sanitizer; added CSS sanitization for inline `<style>` elements' content.
apps/server/package.json	Added new dependency `"@barkleapp/css-sanitizer": "1.0.0"`.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant EmailProcessor
    participant SanitizeHtml
    participant CssSanitizer

    User->>EmailProcessor: Submit email HTML for processing
    EmailProcessor->>SanitizeHtml: Sanitize HTML (allowing <style> tags)
    SanitizeHtml-->>EmailProcessor: Return sanitized HTML with <style> tags
    EmailProcessor->>CssSanitizer: Sanitize CSS content inside <style> tags
    CssSanitizer-->>EmailProcessor: Return sanitized CSS content
    EmailProcessor-->>User: Return fully sanitized email HTML

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~7 minutes

Possibly related PRs

fix: allow <style> and essential attributes in sanitizer #1648: Introduced allowing <style> tags without CSS sanitization; this PR extends that by sanitizing CSS content.
fixes to email rendering #1646: Modified allowed HTML tags and attributes in email sanitization, but did not address CSS sanitization inside <style> tags.
feat: add quote text, remove risky style tag #1672: Reintroduced the 'style' tag in sanitizer configuration, related to handling inline styles in emails.

Suggested reviewers

MrgSub

Poem

A style tag hops into the mix,
With colors, fonts, and clever tricks.
Sanitized safe, no harm will come,
Emails now with flair and some!
Rabbit cheers for CSS bliss,
A cleaner, brighter email kiss! 🐇🎨✨

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8f636e4 and f1f771e.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (2)

apps/server/package.json (1 hunks)
apps/server/src/lib/email-processor.ts (5 hunks)

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch 07-23-fixes_email_styling

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai generate unit tests to generate unit tests for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

ahmetskilinc · 2025-07-23T22:51:32Z

fixes email styling #1813 👈 (View in Graphite)
staging

This stack of pull requests is managed by Graphite. Learn more about stacking.

greptile-apps

Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.

cubic-dev-ai

cubic analysis

1 issue found across 1 file • Review in cubic

_{React with 👍 or 👎 to teach cubic. You can also tag @cubic-dev-ai to give feedback, ask questions, or re-run the review.}

apps/server/src/lib/email-processor.ts

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ee9041d and e322db0.

📒 Files selected for processing (1)

apps/server/src/lib/email-processor.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit Inference Engine (AGENT.md)

**/*.{js,jsx,ts,tsx}: Use 2-space indentation
Use single quotes
Limit lines to 100 characters in width
Semicolons are required

Files:

apps/server/src/lib/email-processor.ts

**/*.{js,jsx,ts,tsx,css}

📄 CodeRabbit Inference Engine (AGENT.md)

Use Prettier with sort-imports and Tailwind plugins

Files:

apps/server/src/lib/email-processor.ts

**/*.{ts,tsx}

📄 CodeRabbit Inference Engine (AGENT.md)

Enable TypeScript strict mode

Files:

apps/server/src/lib/email-processor.ts

🧠 Learnings (2)

📓 Common learnings

Learnt from: danteissaias
PR: Mail-0/Zero#618
File: apps/mail/components/mail/mail-iframe.tsx:12-12
Timestamp: 2025-04-07T20:46:11.697Z
Learning: In the Mail-0/Zero application, sender emails are guaranteed to be non-empty when passed to components that handle them, making additional empty string validation unnecessary.

apps/server/src/lib/email-processor.ts (1)

Learnt from: snehendu098
PR: #1323
File: apps/mail/lib/themes/theme-utils.ts:318-318
Timestamp: 2025-06-24T06:22:58.753Z
Learning: In the Mail-0/Zero theme system (apps/mail/lib/themes/theme-utils.ts), when color themes are being applied, all color values come in HSL format, so there's no need for additional format validation when converting colors with hslToHex().

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: cubic · AI code reviewer

apps/server/src/lib/email-processor.ts

jazzberry-ai · 2025-07-24T10:29:31Z

Bug Report

Name: CSS Injection via Inline Styles
Severity: High
Example test case:

Description: The application allows the style attribute on HTML elements, but it only sanitizes CSS within <style> tags. This allows attackers to inject malicious CSS using inline styles, such as background-image: url(data:image/svg+xml;base64,...), which can execute arbitrary JavaScript.

_{Comments? Email us. Your free trial ends in 5 days.}

jazzberry-ai · 2025-07-25T20:20:22Z

Bug Report

Name	Severity	Example test case	Description
At-Rule Bypass	Medium	`<style>@-webkit-keyframes wiggle { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .element { animation: wiggle 2s linear infinite; }</style>`	The CSS sanitizer does not block vendor-prefixed keyframes (`-webkit-keyframes`), allowing for animation-based attacks or visual spoofing.
Data URL Bypass	High	`<style>body { background: url(data:text/html;base64,PHNjcmlwdD5hbGVydCgnWFNTJyk8L3NjcmlwdD4=); }</style>`	The CSS sanitizer allows `data:` URLs in `background` properties, enabling XSS attacks by embedding Javascript code within the URL. While the sanitizer attempts to remove `url()`, it does not properly handle `data:` URLs, allowing the attack to proceed.
Position Fixed/Screen Cover	Medium	`<style>body { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 9999; }</style>`	The CSS sanitizer allows `position: fixed` and other properties that can be used to cover the entire screen, potentially leading to denial-of-service or visual spoofing attacks. An attacker could overlay content or block the user's ability to interact with the page.
Pointer Events None	Low	`<style>body { pointer-events: none; }</style>`	The CSS sanitizer allows `pointer-events: none`, which can be used to make elements unclickable. This could be used for subtle UI manipulation or denial-of-service by making critical elements inaccessible.
Case Sensitivity	Low	`<style>body { Color: red; }</style>`	The CSS sanitizer does not handle case sensitivity and allows properties like `Color` to pass through. This can cause emails to not render as intended by the email sender.
Outline Property Bypass	Low	`<style>body { outline: 10px solid red; }</style>`	The CSS sanitizer does not block the outline property which can be used to highlight or draw attention to certain areas. This is a potential bypass of the border property that is in the allow list.

_{Comments? Email us. Your free trial ends in 4 days.}

ahmetskilinc · 2025-07-25T20:20:51Z

Merge activity

Jul 25, 8:20 PM UTC: Graphite rebased this pull request as part of a merge.
Jul 25, 8:21 PM UTC: @ahmetskilinc merged this pull request with Graphite.

ahmetskilinc marked this pull request as ready for review July 23, 2025 22:53

greptile-apps bot reviewed Jul 23, 2025

View reviewed changes

graphite-app bot assigned ahmetskilinc Jul 23, 2025

cubic-dev-ai bot reviewed Jul 23, 2025

View reviewed changes

apps/server/src/lib/email-processor.ts Outdated Show resolved Hide resolved

coderabbitai bot reviewed Jul 23, 2025

View reviewed changes

apps/server/src/lib/email-processor.ts Outdated Show resolved Hide resolved

MrgSub approved these changes Jul 25, 2025

View reviewed changes

ahmetskilinc added 2 commits July 25, 2025 20:20

fixes email styling

9f55933

sanitize css

f1f771e

ahmetskilinc force-pushed the 07-23-fixes_email_styling branch from 8f636e4 to f1f771e Compare July 25, 2025 20:20

ahmetskilinc merged commit 1391a32 into staging Jul 25, 2025
5 of 6 checks passed

ahmetskilinc deleted the 07-23-fixes_email_styling branch July 25, 2025 20:21

Uh oh!

Comments

Conversation

ahmetskilinc commented Jul 23, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Summary by CodeRabbit

Uh oh!

jazzberry-ai bot commented Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bug Report

Uh oh!

coderabbitai bot commented Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

ahmetskilinc commented Jul 23, 2025

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

cubic analysis

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jazzberry-ai bot commented Jul 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bug Report

Uh oh!

jazzberry-ai bot commented Jul 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bug Report

Uh oh!

ahmetskilinc commented Jul 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ahmetskilinc commented Jul 23, 2025 •

edited by coderabbitai bot

Loading

jazzberry-ai bot commented Jul 23, 2025 •

edited

Loading

coderabbitai bot commented Jul 23, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

jazzberry-ai bot commented Jul 24, 2025 •

edited

Loading

jazzberry-ai bot commented Jul 25, 2025 •

edited

Loading

ahmetskilinc commented Jul 25, 2025 •

edited

Loading