Escape CSS URLs that are coming from profiles (#5874)

Author: canova

src/components/shared/StyleDef.tsx

@@ -11,6 +11,7 @@
 // duplication.
 
 import { PureComponent } from 'react';
+import { escapeCssUrl } from 'firefox-profiler/utils/url';
 
 type StyleDefProps = {
   readonly content: string;
@@ -59,7 +60,7 @@ export class BackgroundImageStyleDef extends PureComponent<BackgroundImageStyleD
   override render(): React.ReactElement {
     const content = `
       .${this.props.className} {
-        background-image: url(${this.props.url});
+        background-image: url("${escapeCssUrl(this.props.url)}");
       }
     `;
     return <StyleDef content={content} />;

src/utils/url.ts

@@ -20,3 +20,15 @@ export function isLocalURL(url: string | URL): boolean {
     return false;
   }
 }
+
+/**
+ * Escape a URL string so it can be safely embedded inside a double-quoted CSS
+ * url("...").
+ */
+export function escapeCssUrl(url: string): string {
+  return url
+    .replace(/\\/g, '\\\\')
+    .replace(/"/g, '\\"')
+    .replace(/\n/g, '\\A ')
+    .replace(/\r/g, '');
+}