Improve Security: Replace setAttribute with Object.assign for Styles

The Object.assign() method modifies individual CSS properties through the JavaScript API, which is not blocked by Content Security Policy (CSP) without the 'unsafe-inline' directive. In contrast, setAttribute('style', '...') is considered an inline style and would be blocked by CSP without 'unsafe-inline'.
WordPress · Dec 13, 2024 · 53d1e29 · 53d1e29
1 parent 24d5f78
commit 53d1e29
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 28 deletions.
diff --git a/packages/a11y/src/script/add-container.js b/packages/a11y/src/script/add-container.js
@@ -10,20 +10,19 @@ export default function addContainer( ariaLive = 'polite' ) {
 	container.id = `a11y-speak-${ ariaLive }`;
 	container.className = 'a11y-speak-region';
 
-	container.setAttribute(
-		'style',
-		'position: absolute;' +
-			'margin: -1px;' +
-			'padding: 0;' +
-			'height: 1px;' +
-			'width: 1px;' +
-			'overflow: hidden;' +
-			'clip: rect(1px, 1px, 1px, 1px);' +
-			'-webkit-clip-path: inset(50%);' +
-			'clip-path: inset(50%);' +
-			'border: 0;' +
-			'word-wrap: normal !important;'
-	);
+	Object.assign( container.style, {
+		position: 'absolute',
+		margin: '-1px',
+		padding: '0',
+		height: '1px',
+		width: '1px',
+		overflow: 'hidden',
+		clip: 'rect(1px, 1px, 1px, 1px)',
+		webkitClipPath: 'inset(50%)',
+		clipPath: 'inset(50%)',
+		border: '0',
+		wordWrap: 'normal',
+	} );
 	container.setAttribute( 'aria-live', ariaLive );
 	container.setAttribute( 'aria-relevant', 'additions text' );
 	container.setAttribute( 'aria-atomic', 'true' );

diff --git a/packages/a11y/src/script/add-intro-text.ts b/packages/a11y/src/script/add-intro-text.ts
@@ -18,20 +18,19 @@ export default function addIntroText() {
 	introText.className = 'a11y-speak-intro-text';
 	introText.textContent = __( 'Notifications' );
 
-	introText.setAttribute(
-		'style',
-		'position: absolute;' +
-			'margin: -1px;' +
-			'padding: 0;' +
-			'height: 1px;' +
-			'width: 1px;' +
-			'overflow: hidden;' +
-			'clip: rect(1px, 1px, 1px, 1px);' +
-			'-webkit-clip-path: inset(50%);' +
-			'clip-path: inset(50%);' +
-			'border: 0;' +
-			'word-wrap: normal !important;'
-	);
+	Object.assign( introText.style, {
+		position: 'absolute',
+		margin: '-1px',
+		padding: '0',
+		height: '1px',
+		width: '1px',
+		overflow: 'hidden',
+		clip: 'rect(1px, 1px, 1px, 1px)',
+		webkitClipPath: 'inset(50%)',
+		clipPath: 'inset(50%)',
+		border: '0',
+		wordWrap: 'normal',
+	} );
 	introText.setAttribute( 'hidden', 'hidden' );
 
 	const { body } = document;