Fix for rrweb-io#816 - avoid triggering a CSP (content security policy) error with .setAttribute('style')

eoghanmurray · eoghanmurray · commit 1c065e82b5c6 · 2023-04-13T10:42:34.000+01:00
diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
@@ -462,6 +462,7 @@ export default class MutationBuffer {
     if (isIgnored(m.target, this.mirror)) {
       return;
     }
+    const unattachedDoc = new Document(); // avoid upsetting original document from a Content Security point of view
     switch (m.type) {
       case 'characterData': {
         const value = m.target.textContent;
@@ -543,7 +544,7 @@ export default class MutationBuffer {
         }
 
         if (attributeName === 'style') {
-          const old = this.doc.createElement('span');
+          const old = unattachedDoc.createElement('span');
           if (m.oldValue) {
             old.setAttribute('style', m.oldValue);
           }

Original file line number	Diff line number	Diff line change
`@@ -462,6 +462,7 @@ export default class MutationBuffer {`
`462`	`462`	`if (isIgnored(m.target, this.mirror)) {`
`463`	`463`	`return;`
`464`	`464`	`}`
	`465`	`+ const unattachedDoc = new Document(); // avoid upsetting original document from a Content Security point of view`
`465`	`466`	`switch (m.type) {`
`466`	`467`	`case 'characterData': {`
`467`	`468`	`const value = m.target.textContent;`
`@@ -543,7 +544,7 @@ export default class MutationBuffer {`
`543`	`544`	`}`
`544`	`545`
`545`	`546`	`if (attributeName === 'style') {`
`546`		`- const old = this.doc.createElement('span');`
	`547`	`+ const old = unattachedDoc.createElement('span');`
`547`	`548`	`if (m.oldValue) {`
`548`	`549`	`old.setAttribute('style', m.oldValue);`
`549`	`550`	`}`