xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

close #38, update data uri regexp

Browse Source
This commit is contained in:
Yanzhen Yu
2026-04-01 12:00:00 +08:00
parent 40d754884a
commit 6852da5fe5
2 changed files with 28 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/snapshot.ts
View File

@@ -63,7 +63,7 @@ function extractOrigin(url: string): string {
const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")([^"]*)"|([^)]*))\)/gm; const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")([^"]*)"|([^)]*))\)/gm;
const RELATIVE_PATH = /^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/).*/; const RELATIVE_PATH = /^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/).*/;
const DATA_URI = /^(data:)([\w\/\+\-]+);(charset=[\w-]+|base64|utf-?8).*,(.*)/i; const DATA_URI = /^(data:)([^,]*),(.*)/i;
export function absoluteToStylesheet( export function absoluteToStylesheet(
cssText: string | null, cssText: string | null,
href: string, href: string,

42
test/snapshot.test.ts
View File

@@ -74,11 +74,21 @@ describe('absolute url to stylesheet', () => {
it('preserves quotes around inline svgs with spaces', () => { it('preserves quotes around inline svgs with spaces', () => {
expect( expect(
absoluteToStylesheet("url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2328a745' d='M3'/%3E%3C/svg%3E\")", href), absoluteToStylesheet(
).to.equal("url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2328a745' d='M3'/%3E%3C/svg%3E\")"); "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2328a745' d='M3'/%3E%3C/svg%3E\")",
href,
),
).to.equal(
"url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2328a745' d='M3'/%3E%3C/svg%3E\")",
);
expect( expect(
absoluteToStylesheet('url(\'data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>\')', href), absoluteToStylesheet(
).to.equal('url(\'data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>\')'); 'url(\'data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>\')',
href,
),
).to.equal(
'url(\'data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>\')',
);
}); });
it('can handle empty path', () => { it('can handle empty path', () => {
expect(absoluteToStylesheet(`url('')`, href)).to.equal(`url('')`); expect(absoluteToStylesheet(`url('')`, href)).to.equal(`url('')`);
@@ -87,24 +97,26 @@ describe('absolute url to stylesheet', () => {
describe('isBlockedElement()', () => { describe('isBlockedElement()', () => {
const subject = (html: string, opt: any = {}) => const subject = (html: string, opt: any = {}) =>
_isBlockedElement(render(html), 'rr-block', opt.blockSelector) _isBlockedElement(render(html), 'rr-block', opt.blockSelector);
const render = (html: string): HTMLElement => const render = (html: string): HTMLElement =>
JSDOM.fragment(html).querySelector('div')! JSDOM.fragment(html).querySelector('div')!;
it('can handle empty elements', () => { it('can handle empty elements', () => {
expect(subject('<div />')).to.equal(false) expect(subject('<div />')).to.equal(false);
}) });
it('blocks prohibited className', () => { it('blocks prohibited className', () => {
expect(subject('<div class="foo rr-block bar" />')).to.equal(true) expect(subject('<div class="foo rr-block bar" />')).to.equal(true);
}) });
it('does not block random data selector', () => { it('does not block random data selector', () => {
expect(subject('<div data-rr-block />')).to.equal(false) expect(subject('<div data-rr-block />')).to.equal(false);
}) });
it('blocks blocked selector', () => { it('blocks blocked selector', () => {
expect(subject('<div data-rr-block />', { blockSelector: '[data-rr-block]' })).to.equal(true) expect(
}) subject('<div data-rr-block />', { blockSelector: '[data-rr-block]' }),
}) ).to.equal(true);
});
});