From 6a956d4ebd75496e2a91cacf701b8a3729371d5b Mon Sep 17 00:00:00 2001
From: Kilian Cirera Sant <kilianc@extrahop.com>
Date: Fri, 13 Oct 2023 09:08:22 -0700
Subject: [PATCH] Stop requiring style-src 'unsafe-inline' CSP

Addresses #171.

Setting the `style` attribute on an element violates stricter CSP and
requires a policy of `style-src 'unsafe-inline'`. Setting each style in
the style property of the element resolves this issue.
---
 src/util.tsx | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/util.tsx b/src/util.tsx
index 1a1606e..7019266 100644
--- a/src/util.tsx
+++ b/src/util.tsx
@@ -218,6 +218,15 @@ interface GetScrollbarWidthFN {
   (force?: boolean): number | undefined;
 }
 
+const setWidthDetectorStyle = (el: HTMLDivElement): void => {
+  el.style.position = 'absolute';
+  el.style.width = '100px';
+  el.style.height = '100px';
+  el.style.top = '-999px';
+  el.style.left = '-999px';
+  el.style.overflow = 'scroll';
+}
+
 /**
  * @description Returns scrollbar width specific for current environment. Can return undefined if DOM is not ready yet.
  */
@@ -233,10 +242,7 @@ export const getScrollbarWidth: GetScrollbarWidthFN = (force = false): number |
   }
 
   const el = doc.createElement('div');
-  el.setAttribute(
-    'style',
-    'position:absolute;width:100px;height:100px;top:-999px;left:-999px;overflow:scroll;'
-  );
+  setWidthDetectorStyle(el);
 
   doc.body.append(el);
 
@@ -277,11 +283,11 @@ export const shouldReverseRtlScroll: ShouldReverseRtlScroll = (force = false): b
 
   el.append(child);
 
-  el.setAttribute(
-    'style',
-    'position:absolute;width:100px;height:100px;top:-999px;left:-999px;overflow:scroll;direction:rtl'
-  );
-  child.setAttribute('style', 'width:1000px;height:1000px');
+  setWidthDetectorStyle(el);
+  el.style.direction = 'rtl';
+
+  child.style.width = '1000px';
+  child.style.left = '1000px';
 
   doc.body.append(el);