From b4d732ab75cae89a7fa9c5992d19fbeb175f75db Mon Sep 17 00:00:00 2001
From: arturovt <arthurandrosovich@gmail.com>
Date: Fri, 11 Jul 2025 16:29:06 +0300
Subject: [PATCH] fix: avoid using `setAttribute` to set `style` (not allowed
 with CSP)

---
 .../src/lib/fast-svg.component.ts             |  8 +++---
 .../src/lib/svg-registry.service.ts           | 28 ++++++++-----------
 2 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/packages/ngx-fast-lib/src/lib/fast-svg.component.ts b/packages/ngx-fast-lib/src/lib/fast-svg.component.ts
index 626cb75..97d7a9b 100644
--- a/packages/ngx-fast-lib/src/lib/fast-svg.component.ts
+++ b/packages/ngx-fast-lib/src/lib/fast-svg.component.ts
@@ -42,10 +42,10 @@ let element: HTMLElement = undefined as any;
 function createGetImgFn(renderer: Renderer2): (src: string) => HTMLElement {
   if (element === undefined) {
     element = renderer.createElement('img');
-    element.setAttribute(
-      'style',
-      'display: none; contain: content; content-visibility: auto;'
-    );
+    // setAttribute('style', ...) is not allowed when strict CSP is in place.
+    element.style.display = 'none';
+    element.style.contain = 'content';
+    element.style.contentVisibility = 'auto';
     element.setAttribute('loading', 'lazy');
     element.setAttribute('alt', 'loading helper');
     element.setAttribute('width', '0');
diff --git a/packages/ngx-fast-lib/src/lib/svg-registry.service.ts b/packages/ngx-fast-lib/src/lib/svg-registry.service.ts
index 501e529..2190d65 100644
--- a/packages/ngx-fast-lib/src/lib/svg-registry.service.ts
+++ b/packages/ngx-fast-lib/src/lib/svg-registry.service.ts
@@ -22,23 +22,17 @@ function createDomParser(document: Document): (s: string) => HTMLElement {
 }
 
 function styleDomCacheForPerformance(el: HTMLElement): HTMLElement {
-  /**
-   * reduce paint area with width/height 0 and overflow hidden
-   * fixed position of -2000px to always have it offscreen and outside any native trigger (viewport observer in content visibilities)
-   * contain:content to leverage css perf features for older browsers not supporting content-visibility   * : auto to exclude it completely from styles recalculation
-   */
-  el.setAttribute(
-    'style',
-    `
-      overflow: hidden;
-      width: 0px;
-      height: 0px;
-      position: fixed;
-      bottom: -2000px;
-      contain: content;
-      content-visibility: auto;
-    `
-  );
+  // reduce paint area with width/height 0 and overflow hidden
+  // fixed position of -2000px to always have it offscreen and outside any native trigger (viewport observer in content visibilities)
+  // contain:content to leverage css perf features for older browsers not supporting content-visibility   * : auto to exclude it completely from styles recalculation
+  // setAttribute('style', ...) is not allowed when strict CSP is in place.
+  el.style.overflow = 'hidden';
+  el.style.width = '0px';
+  el.style.height = '0px';
+  el.style.position = 'fixed';
+  el.style.bottom = '-2000px';
+  el.style.contain = 'content';
+  el.style.contentVisibility = 'auto';
   return el;
 }