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

eoghanmurray · eoghanmurray · commit 92febdaa23e7 · 2022-03-03T11:51:29.000Z
diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
@@ -426,6 +426,7 @@ export default class MutationBuffer {
     if (isIgnored(m.target)) {
       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;
@@ -472,7 +473,7 @@ export default class MutationBuffer {
           this.attributes.push(item);
         }
         if (m.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
`@@ -426,6 +426,7 @@ export default class MutationBuffer {`
`426`	`426`	`if (isIgnored(m.target)) {`
`427`	`427`	`return;`
`428`	`428`	`}`
	`429`	`+ const unattachedDoc = new Document(); // avoid upsetting original document from a Content Security point of view`
`429`	`430`	`switch (m.type) {`
`430`	`431`	`case 'characterData': {`
`431`	`432`	`const value = m.target.textContent;`
`@@ -472,7 +473,7 @@ export default class MutationBuffer {`
`472`	`473`	`this.attributes.push(item);`
`473`	`474`	`}`
`474`	`475`	`if (m.attributeName === 'style') {`
`475`		`- const old = this.doc.createElement('span');`
	`476`	`+ const old = unattachedDoc.createElement('span');`
`476`	`477`	`if (m.oldValue) {`
`477`	`478`	`old.setAttribute('style', m.oldValue);`
`478`	`479`	`}`