Skip to content

Avoid triggering a CSP (content security policy) error #846

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 22, 2023
Merged

Avoid triggering a CSP (content security policy) error #846

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
386a318
Fix for #816 - avoid triggering a CSP (content security policy) error…
eoghanmurray Feb 26, 2022
efcea7d
The bare unattachedDoc that I previously naively created didn't have …
eoghanmurray Apr 12, 2023
f36073d
Add a try/catch to provide some robustness in case `document.implemen…
eoghanmurray Apr 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion packages/rrweb/src/record/mutation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -462,6 +462,14 @@ export default class MutationBuffer {
if (isIgnored(m.target, this.mirror)) {
return;
}
let unattachedDoc;
try {
// avoid upsetting original document from a Content Security point of view
unattachedDoc = document.implementation.createHTMLDocument();
} catch (e) {
// fallback to more direct method
Copy link

@razor-x razor-x Apr 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we know when we will fallback? I'm curious what would trigger errors and the fallback case? Unsupported browsers?

Copy link
Contributor Author

@eoghanmurray eoghanmurray Apr 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm just not 100% about that document.implementation.createHTMLDocument(); so took the prudent option of falling back to the previous method (which is working fine but wouldn't work for you from a CSP POV)

I just looked it up now and it seems fine:
https://caniuse.com/?search=implementation.createhtmldocument
E.g. it could fail on IE11 as there is a 'title' attribute missing
I don't think anyone is supporting IE11

You could add some reporting in there if it happens, or to add a custom commit on top (for your deployment) to revert this last commit.
I'm putting this out to a 'canary' environment today, but I don't have any reporting on whether the fallback kicks in; I'm happy enough that it worked in the rrweb test environment (Puppeteer/Chrome).

unattachedDoc = this.doc;
}
switch (m.type) {
case 'characterData': {
const value = m.target.textContent;
Expand Down Expand Up @@ -543,7 +551,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);
}
Expand Down