🐛 do not ignore @import rules pointing to inaccessible stylesheets

packages/rum/src/domain/record/serialization/serializeAttributes.spec.ts

@@ -0,0 +1,47 @@
+import { isIE } from '@datadog/browser-core'
+import { getCssRulesString } from './serializeAttributes'
+
+describe('getCssRulesString', () => {
+  let styleNode: HTMLStyleElement
+
+  beforeEach(() => {
+    if (isIE()) {
+      pending('IE not supported')
+    }
+    styleNode = document.createElement('style')
+    document.body.appendChild(styleNode)
+  })
+  afterEach(() => {
+    document.body.removeChild(styleNode)
+  })
+
+  it('returns the CSS rules as a string', () => {
+    styleNode.sheet!.insertRule('body { color: red; }')
+
+    expect(getCssRulesString(styleNode.sheet)).toBe('body { color: red; }')
+  })
+
+  it('inlines imported external stylesheets', () => {
+    styleNode.sheet!.insertRule('@import url("toto.css");')
+
+    // Simulates an accessible external stylesheet
+    spyOnProperty(styleNode.sheet!.cssRules[0] as CSSImportRule, 'styleSheet').and.returnValue({
+      cssRules: [{ cssText: 'p { margin: 0; }' } as CSSRule] as unknown as CSSRuleList,
+    } as CSSStyleSheet)
+
+    expect(getCssRulesString(styleNode.sheet)).toBe('p { margin: 0; }')
+  })
+
+  it('does not skip the @import rules if the external stylesheet is inaccessible', () => {
+    styleNode.sheet!.insertRule('@import url("toto.css");')
+
+    // Simulates an inaccessible external stylesheet
+    spyOnProperty(styleNode.sheet!.cssRules[0] as CSSImportRule, 'styleSheet').and.returnValue({
+      get cssRules(): CSSRuleList {
+        throw new Error('Cannot access rules')
+      },
+    } as CSSStyleSheet)
+
+    expect(getCssRulesString(styleNode.sheet)).toBe('@import url("toto.css");')
+  })
+})

packages/rum/src/domain/record/serialization/serializeAttributes.ts

@@ -126,7 +126,7 @@ export function serializeAttributes(
   return safeAttrs
 }
 
-function getCssRulesString(cssStyleSheet: CSSStyleSheet | undefined | null): string | null {
+export function getCssRulesString(cssStyleSheet: CSSStyleSheet | undefined | null): string | null {
   if (!cssStyleSheet) {
     return null
   }
@@ -144,7 +144,12 @@ function getCssRulesString(cssStyleSheet: CSSStyleSheet | undefined | null): str
 }
 
 function getCssRuleString(rule: CSSRule): string {
-  return isCSSImportRule(rule) ? getCssRulesString(rule.styleSheet) || '' : rule.cssText
+  return (
+    // If it's an @import rule, try to inline sub-rules recursively with `getCssRulesString`. This
+    // operation can fail if the imported stylesheet is protected by CORS, in which case we fallback
+    // to the @import rule CSS text.
+    (isCSSImportRule(rule) && getCssRulesString(rule.styleSheet)) || rule.cssText
+  )
 }
 
 function isCSSImportRule(rule: CSSRule): rule is CSSImportRule {