fix(common): escape CSS string-terminating characters in escapeCssUrl

arturovt · atscott · commit 3dd35c242ca5 · 2026-06-09T10:40:20.000-07:00
The `escapeCssUrl` helper used by `NgOptimizedImage` to sanitize placeholder URLs for use in the `background-image` CSS property previously escaped only backslashes and double quotes. However, several characters that can terminate a CSS quoted string according to the CSS Syntax Level 3 specification were left unescaped, allowing a crafted placeholder URL to break out of the `url("...")` context and inject arbitrary CSS.

This change additionally escapes the following characters using CSS hex escapes:

* `U+000A` (LINE FEED) → `\A `
* `U+000D` (CARRIAGE RETURN) → `\D `
* `U+000C` (FORM FEED) → `\C `
* `U+0000` (NULL) → `\0 `

For example:

```text id="1w5vkp"
x.com/img\nx.jpg  →  x.com/img\A x.jpg
x.com/img\rx.jpg  →  x.com/img\D x.jpg
x.com/img\fx.jpg  →  x.com/img\C x.jpg
x.com/img\0x.jpg  →  x.com/img\0 x.jpg
```

The trailing space is required by the CSS tokenizer to terminate the escape sequence and prevent the following character from being interpreted as part of the escape.

The backslash replacement remains first in the chain to avoid double-escaping the backslashes introduced by subsequent replacements.
diff --git a/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts b/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts
@@ -48,6 +48,7 @@ import {netlifyLoaderInfo} from './image_loaders/netlify_loader';
 import {LCPImageObserver} from './lcp_image_observer';
 import {PreconnectLinkChecker} from './preconnect_link_checker';
 import {PreloadLinkCreator} from './preload-link-creator';
+import {escapeCssUrl} from './url';
 
 /**
  * When a Base64-encoded image is passed as an input to the `NgOptimizedImage` directive,
@@ -1463,10 +1464,6 @@ function unwrapSafeUrl(value: string | SafeValue): string {
   return unwrapSafeValue(value);
 }
 
-function escapeCssUrl(input: string): string {
-  return input.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
-}
-
 // Transform function to handle inputs which may be booleans, strings, or string representations
 // of boolean values. Used for the placeholder attribute.
 export function booleanOrUrlAttribute(value: boolean | string): boolean | string {
diff --git a/packages/common/src/directives/ng_optimized_image/url.ts b/packages/common/src/directives/ng_optimized_image/url.ts
@@ -46,3 +46,17 @@ export function normalizePath(path: string): string {
 export function normalizeSrc(src: string): string {
   return src.startsWith('/') ? src.slice(1) : src;
 }
+
+export function escapeCssUrl(input: string): string {
+  return (
+    input
+      // Backslash first — later replacements must not have their own \ escaped again.
+      .replace(/\\/g, '\\\\')
+      // \n, \r, \f and null terminate a CSS string (CSS Syntax 3 §4.3.5,
+      // https://www.w3.org/TR/css-syntax-3/#consume-string-token) and are also
+      // invalid in URLs, so stripping them is safe.
+      .replace(/[\n\r\f\0]/g, '')
+      // A bare " would close the url("...") wrapper early.
+      .replace(/"/g, '\\"')
+  );
+}
diff --git a/packages/common/test/directives/ng_optimized_image_spec.ts b/packages/common/test/directives/ng_optimized_image_spec.ts
@@ -32,6 +32,7 @@ import {
   resetImagePriorityCount,
 } from '../../src/directives/ng_optimized_image/ng_optimized_image';
 import {PRECONNECT_CHECK_BLOCKLIST} from '../../src/directives/ng_optimized_image/preconnect_link_checker';
+import {escapeCssUrl} from '../../src/directives/ng_optimized_image/url';
 
 describe('Image directive', () => {
   const PLACEHOLDER_BLUR_AMOUNT = 15;
@@ -2616,6 +2617,30 @@ describe('Image directive', () => {
   });
 });
 
+describe('escapeCssUrl', () => {
+  it('strips characters that are invalid in URLs and break CSS quoted strings', () => {
+    // \n, \r, \f and \0 all terminate a CSS string per the spec, and none of
+    // them are valid URL characters either, so we just drop them.
+    expect(escapeCssUrl('http://x.com/img\n.jpg')).toBe('http://x.com/img.jpg'); // newline
+    expect(escapeCssUrl('http://x.com/img\r.jpg')).toBe('http://x.com/img.jpg'); // carriage return
+    expect(escapeCssUrl('http://x.com/img\f.jpg')).toBe('http://x.com/img.jpg'); // form feed
+    expect(escapeCssUrl('http://x.com/img\0.jpg')).toBe('http://x.com/img.jpg'); // null byte
+  });
+
+  it('escapes characters that break the CSS url("...") wrapper', () => {
+    // A bare " would end the url("...") string prematurely, so it becomes \".
+    expect(escapeCssUrl('http://x.com/img".jpg')).toBe('http://x.com/img\\".jpg');
+    // A bare \ starts a CSS escape sequence, so it must be doubled to \\.
+    expect(escapeCssUrl('http://x.com/img\\.jpg')).toBe('http://x.com/img\\\\.jpg');
+  });
+
+  it('does not double-escape backslashes', () => {
+    // The \ → \\ replacement runs first, so backslashes introduced by later
+    // replacements are never accidentally escaped a second time.
+    expect(escapeCssUrl('a\\b')).toBe('a\\\\b');
+  });
+});
+
 // Helpers
 
 // Base URL that can be used in tests to construct absolute URLs.
