From 2a809499480ae4f7118432f09871c5f75fda06d7 Mon Sep 17 00:00:00 2001
From: Justin Halsall
Date: Wed, 16 Nov 2022 06:11:11 +0100
Subject: [PATCH] Cross origin iframe support (#1035)
* Add `recordCrossOriginIframe` setting
* Set up messaging between iframes
* should emit full snapshot event from iframe as mutation event
* this.mirror was dropped on attachIframe
* should use unique id for child of iframe
* Cross origin iframe recording in `yarn live-stream`
* Root iframe check thats supported by firefox
* Live stream: Inject script in all frames
* Record same origin and cross origin iframes differently
* Should map Input events correctly
* Turn on other tests
* Fix compatibility with newer puppeteer
* puppeteer vs 12 seems stable without to many changes needed
* normalize port numbers in snapshots
* Handle scroll and ViewportResize events in cross origin iframe
* Correctly map cross origin mutations
* Map selection events for cross origin iframes
* Map canvas mutations for cross origin iframes
* Update snapshot to include canvas events
* Skip all meta events
* Support custom events as best we can in cross origin iframes
* Use earliest version of puppeteer that works with cross origin live-stream
* Map mouse/touch interaction events
* Update snapshots for correctly mapped click events
* Tweak tests for new puppeteer version
* Map MediaInteraction correctly for cross origin iframes
* Make tests consistent between high and low dpi devices
* Make test less flaky
* Make test less flaky
* Make test less flaky
* Make test less flaky
* Add support for styles in cross origin iframes
* Map traditional stylesheet mutations on cross origin iframes
* Add todo
* Add iframe mirror
* Get iframe manager to use iframe mirrors internally
* Rename `IframeMirror` to `CrossOriginIframeMirror`
* Setup basic cross origin canvas webrtc streaming
* Clean up removed canvas elements
* reset style mirror on new full snapshot
* Fix cross origin canvas webrtc streaming
* Make emit optional
* Run tests on github actions
* Upload image artifacts from failed tests
* Use newer github actions
* Test: hopefully adding more wait will fix it
* add extra wait
* Fix image snapshot tests
* Make tests run with new puppeteer version
* upgrade eslint-plugin-jest
* Chore: Remove travis ci as ci's running on github actions
* Chore: Support recording cross origin iframe in repl
* Force developers to update the cross origin iframe mapping when adding new events
https://github.com/rrweb-io/rrweb/pull/1035#discussion_r1012516277
* Document cross origin iframe recording
* Docs: cross origin iframes recording methods
* Docs: AI translated, cross origin iframe recording
* rename getParentId to getId
* Migrate to @rrweb/types
* Run on pull request
* doc: improve Chinese doc
* Rename `parentId` to `Id`
Co-authored-by: Mark-Fenng
---
docs/recipes/cross-origin-iframes.md | 116 +
docs/recipes/cross-origin-iframes.zh_CN.md | 113 +
docs/recipes/dive-into-event.md | 2 +-
guide.md | 53 +-
guide.zh_CN.md | 53 +-
package.json | 2 +-
packages/rrweb-player/typings/index.d.ts | 2 +-
packages/rrweb-snapshot/src/index.ts | 2 +
packages/rrweb-snapshot/src/snapshot.ts | 2 +-
packages/rrweb/package.json | 6 +-
packages/rrweb/scripts/repl.js | 78 +-
packages/rrweb/scripts/stream.js | 112 +-
.../src/plugins/canvas-webrtc/record/index.ts | 269 +-
.../src/plugins/canvas-webrtc/replay/index.ts | 4 +-
.../src/record/cross-origin-iframe-mirror.ts | 88 +
packages/rrweb/src/record/iframe-manager.ts | 228 +-
packages/rrweb/src/record/index.ts | 55 +-
packages/rrweb/src/record/mutation.ts | 2 +-
packages/rrweb/src/replay/index.ts | 2 +-
packages/rrweb/src/types.ts | 12 +-
packages/rrweb/src/utils.ts | 4 +
.../__snapshots__/integration.test.ts.snap | 575 ++-
.../test/__snapshots__/record.test.ts.snap | 798 +--
...record-and-replay-a-webgl-image-1-snap.png | Bin 10913 -> 10752 bytes
...ecord-and-replay-a-webgl-square-1-snap.png | Bin 10812 -> 10650 bytes
packages/rrweb/test/e2e/webgl.test.ts | 22 +-
.../test/html/assets/1-minute-of-silence.mp3 | Bin 0 -> 96246 bytes
packages/rrweb/test/html/assets/style.css | 3 +
packages/rrweb/test/html/audio.html | 16 +
.../rrweb/test/html/blocked-unblocked.html | 108 +-
packages/rrweb/test/html/hello-world.html | 12 +
packages/rrweb/test/integration.test.ts | 146 +-
packages/rrweb/test/record.test.ts | 329 +-
.../cross-origin-iframes.test.ts.snap | 4496 +++++++++++++++++
.../test/record/cross-origin-iframes.test.ts | 514 ++
packages/rrweb/test/utils.ts | 5 +
packages/types/src/index.ts | 36 +-
yarn.lock | 135 +-
38 files changed, 7362 insertions(+), 1038 deletions(-)
create mode 100644 docs/recipes/cross-origin-iframes.md
create mode 100644 docs/recipes/cross-origin-iframes.zh_CN.md
create mode 100644 packages/rrweb/src/record/cross-origin-iframe-mirror.ts
create mode 100644 packages/rrweb/test/html/assets/1-minute-of-silence.mp3
create mode 100644 packages/rrweb/test/html/assets/style.css
create mode 100644 packages/rrweb/test/html/audio.html
create mode 100644 packages/rrweb/test/html/hello-world.html
create mode 100644 packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap
create mode 100644 packages/rrweb/test/record/cross-origin-iframes.test.ts
diff --git a/docs/recipes/cross-origin-iframes.md b/docs/recipes/cross-origin-iframes.md
new file mode 100644
index 00000000..89c01dee
--- /dev/null
+++ b/docs/recipes/cross-origin-iframes.md
@@ -0,0 +1,116 @@
+# Cross origin iframes
+
+By default browsers make it difficult to access the contents of an iframe that is hosted on a different domain. This is a security feature to prevent malicious sites from accessing sensitive information on other sites. It is possible to work around this security feature, but it is not recommended unless you [are very strict](https://stackoverflow.com/a/21629575) about allowing only the sites you trust to embed your website inside of an iframe.
+Since if you allow recording cross origin iframes, any malicious website can embed your website and as long as they have rrweb running they can record all the contents of your website.
+
+## How to record cross origin iframes
+
+Enable recording cross-origin iframes in your parent page:
+
+```js
+rrweb.record({
+ emit(event) {}, // all events will be emitted here, including events from cross origin iframes
+ recordCrossOriginIframes: true,
+});
+```
+
+Enable replaying cross-origin iframes in your child page:
+
+```js
+rrweb.record({
+ emit(event) {}, // this is required for rrweb, but the child page will not emit any events
+ recordCrossOriginIframes: true,
+});
+```
+
+## Considerations
+
+When cross origin iframe recording is turned on rrweb will check to see if it is being run in a top level window.
+If it isn't it'll send the events to the parent window via `postMessage`.
+
+If you don't have rrweb running in the top level window, the events will be lost when `recordCrossOriginIframes` is turned on.
+
+If the top level window is a malicious website it can listen to the events and send them to a server of its choosing.
+
+Or if a malicious script is running in on your page they can listen in on `postMessage` and as communication between the child and parent window is not encrypted. And they can see the events.
+
+## Options for injecting rrweb into cross origin iframes
+
+### 1. Website owners, add rrweb in the iframes
+
+If you own the website that with the iframe and the website that is being embedded in an iframe, you can add rrweb to both pages via a script tag.
+
+### 2. Browser extension
+
+See https://developer.chrome.com/docs/extensions/mv3/content_scripts/#functionality
+
+### 3. Puppeteer script
+
+```js
+import puppeteer from 'puppeteer';
+
+async function injectRecording(frame) {
+ await frame.evaluate((rrwebCode) => {
+ if (window.__IS_RECORDING__) return;
+ window.__IS_RECORDING__ = true;
+
+ (async () => {
+ function loadScript(code) {
+ const s = document.createElement('script');
+ s.type = 'text/javascript';
+ s.innerHTML = code;
+ if (document.head) {
+ document.head.append(s);
+ } else {
+ requestAnimationFrame(() => {
+ document.head.append(s);
+ });
+ }
+ }
+ loadScript(rrwebCode);
+
+ window.rrweb.record({
+ emit: (event) => {
+ window._captureEvent(event);
+ },
+ recordCrossOriginIframes: true,
+ });
+ })();
+ }, code);
+}
+
+const browser = await puppeteer.launch();
+const page = (await browser.pages())[0];
+
+const events = []; // contains all events from all frames
+
+await page.exposeFunction('_captureEvent', (event) => {
+ events.push(event);
+});
+
+page.on('framenavigated', async (frame) => {
+ await injectRecording(frame); // injects rrweb into the iframe
+});
+
+await page.goto('https://example.com');
+
+// your events are in the events array
+```
+
+### 4. Electron
+
+```ts
+const win = new BrowserWindow({
+ width: 800,
+ height: 600,
+ webPreferences: {
+ preload: path.join(__dirname, 'rrweb-recording-script.js'),
+ // this turns on preload inside iframes, but disables node integration
+ nodeIntegrationInSubFrames: true,
+ nodeIntegration: false,
+ },
+});
+```
+
+See https://www.electronjs.org/docs/latest/tutorial/tutorial-preload
+And https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts
diff --git a/docs/recipes/cross-origin-iframes.zh_CN.md b/docs/recipes/cross-origin-iframes.zh_CN.md
new file mode 100644
index 00000000..b56f9542
--- /dev/null
+++ b/docs/recipes/cross-origin-iframes.zh_CN.md
@@ -0,0 +1,113 @@
+# 跨域 IFrame 录制
+
+默认情况下，浏览器很难访问托管在不同域上的 iframe 的内容。 这是一项安全功能，可防止恶意站点访问其他站点上的敏感信息。 rrweb 提供了一个解决方案，但如果您对网站的安全有严格的要求https://stackoverflow.com/a/21629575， 只允许您信任的网站将您的网站嵌入 iframe 中，那我们不建议使用我们的解决方案。
+因为如果您允许记录跨源 iframe，任何恶意网站都可以嵌入您的网站，并且只要它们运行 rrweb，它们就可以记录您网站的所有内容。
+
+## 如何记录跨源 iframe
+
+在父页面中启用录制跨域 iframe:
+
+```js
+rrweb.record({
+ emit(event) {}, // 所有事件都将在此处发出，包括来自跨源 iframe 的事件
+ recordCrossOriginIframes: true,
+});
+```
+
+在您的子页面中启用重放跨域 iframe:
+
+```js
+rrweb.record({
+ emit(event) {}, // 这是 rrweb 所必需的，但子页面不会发出任何事件
+ recordCrossOriginIframes: true,
+});
+```
+
+## 注意事项
+
+当跨源 iframe 录制开启时，rrweb 将检查它是否正在顶级窗口中运行。 如果不是，它将通过 `postMessage` 将事件发送到父窗口。
+
+如果您没有在顶层窗口中运行 rrweb，则打开 `recordCrossOriginIframes` 时事件将丢失。
+
+如果顶层窗口是一个恶意网站，它可以监听事件并将它们发送到它选择的服务器。或者如果您的页面上正在运行恶意脚本，则它们可以监听“postMessage”，又因为子窗口和父窗口之间的通信未加密，所以他们可以获取到所有事件。
+
+## 将 rrweb 注入跨源 iframe 的选项
+
+### 1. 网站所有者，在 iframe 中添加 rrweb
+
+如果您拥有使用 iframe 的网站和嵌入在 iframe 中的网站，您可以通过脚本标签将 rrweb 添加到这两个页面。
+
+### 2. 浏览器扩展
+
+请查看 https://developer.chrome.com/docs/extensions/mv3/content_scripts/#functionality
+
+### 3. Puppeteer script
+
+```js
+import puppeteer from 'puppeteer';
+
+async function injectRecording(frame) {
+ await frame.evaluate((rrwebCode) => {
+ if (window.__IS_RECORDING__) return;
+ window.__IS_RECORDING__ = true;
+
+ (async () => {
+ function loadScript(code) {
+ const s = document.createElement('script');
+ s.type = 'text/javascript';
+ s.innerHTML = code;
+ if (document.head) {
+ document.head.append(s);
+ } else {
+ requestAnimationFrame(() => {
+ document.head.append(s);
+ });
+ }
+ }
+ loadScript(rrwebCode);
+
+ window.rrweb.record({
+ emit: (event) => {
+ window._captureEvent(event);
+ },
+ recordCrossOriginIframes: true,
+ });
+ })();
+ }, code);
+}
+
+const browser = await puppeteer.launch();
+const page = (await browser.pages())[0];
+
+const events = []; // 包含来自所有Frame的所有事件
+
+await page.exposeFunction('_captureEvent', (event) => {
+ events.push(event);
+});
+
+page.on('framenavigated', async (frame) => {
+ await injectRecording(frame); // 将 rrweb 注入 iframe
+});
+
+await page.goto('https://example.com');
+
+// 您的事件将在事件数组中
+```
+
+### 4. Electron
+
+```ts
+const win = new BrowserWindow({
+ width: 800,
+ height: 600,
+ webPreferences: {
+ preload: path.join(__dirname, 'rrweb-recording-script.js'),
+ // 这会打开 iframe 内的预加载，但会禁用节点集成
+ nodeIntegrationInSubFrames: true,
+ nodeIntegration: false,
+ },
+});
+```
+
+请查看 https://www.electronjs.org/docs/latest/tutorial/tutorial-preload
+和 https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts
diff --git a/docs/recipes/dive-into-event.md b/docs/recipes/dive-into-event.md
index 4df9152c..be63972a 100644
--- a/docs/recipes/dive-into-event.md
+++ b/docs/recipes/dive-into-event.md
@@ -67,4 +67,4 @@ source -> IncrementalSource.Font
data -> fontData
```
-enum IncrementalSource's definition can be found in this [list](https://github.com/rrweb-io/rrweb/blob/master/packages/rrweb/typings/types.d.ts#L62).
+enum IncrementalSource's definition can be found in this [list](https://github.com/rrweb-io/rrweb/blob/98e71cd0d23628cd1fbdbe47664a65748084c4a4/packages/types/src/index.ts#L69).
diff --git a/guide.md b/guide.md
index 206fa053..76f781d0 100644
--- a/guide.md
+++ b/guide.md
@@ -135,32 +135,33 @@ setInterval(save, 10 * 1000);
The parameter of `rrweb.record` accepts the following options.
-| key | default | description |
-| -------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| emit | required | the callback function to get emitted events |
-| checkoutEveryNth | - | take a full snapshot after every N events
refer to the [checkout](#checkout) chapter |
-| checkoutEveryNms | - | take a full snapshot after every N ms
refer to the [checkout](#checkout) chapter |
-| blockClass | 'rr-block' | Use a string or RegExp to configure which elements should be blocked, refer to the [privacy](#privacy) chapter |
-| blockSelector | null | Use a string to configure which selector should be blocked, refer to the [privacy](#privacy) chapter |
-| ignoreClass | 'rr-ignore' | Use a string or RegExp to configure which elements should be ignored, refer to the [privacy](#privacy) chapter |
-| ignoreCSSAttributes | null | array of CSS attributes that should be ignored |
-| maskTextClass | 'rr-mask' | Use a string or RegExp to configure which elements should be masked, refer to the [privacy](#privacy) chapter |
-| maskTextSelector | null | Use a string to configure which selector should be masked, refer to the [privacy](#privacy) chapter |
-| maskAllInputs | false | mask all input content as \* |
-| maskInputOptions | { password: true } | mask some kinds of input \*
refer to the [list](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L77-L95) |
-| maskInputFn | - | customize mask input content recording logic |
-| maskTextFn | - | customize mask text content recording logic |
-| slimDOMOptions | {} | remove unnecessary parts of the DOM
refer to the [list](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L97-L108) |
-| dataURLOptions | {} | Canvas image format and quality ,This parameter will be passed to the OffscreenCanvas.convertToBlob(),Using this parameter effectively reduces the size of the recorded data |
-| inlineStylesheet | true | whether to inline the stylesheet in the events |
-| hooks | {} | hooks for events
refer to the [list](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207) |
-| packFn | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
-| sampling | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
-| recordCanvas | false | Whether to record the canvas element. Available options:
`false`,
`true` |
-| inlineImages | false | whether to record the image content |
-| collectFonts | false | whether to collect fonts in the website |
-| userTriggeredOnInput | false | whether to add `userTriggered` on input events that indicates if this event was triggered directly by the user or not. [What is `userTriggered`?](https://github.com/rrweb-io/rrweb/pull/495) |
-| plugins | [] | load plugins to provide extended record functions. [What is plugins?](./docs/recipes/plugin.md) |
+| key | default | description |
+| ------------------------ | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| emit | required | the callback function to get emitted events |
+| checkoutEveryNth | - | take a full snapshot after every N events
refer to the [checkout](#checkout) chapter |
+| checkoutEveryNms | - | take a full snapshot after every N ms
refer to the [checkout](#checkout) chapter |
+| blockClass | 'rr-block' | Use a string or RegExp to configure which elements should be blocked, refer to the [privacy](#privacy) chapter |
+| blockSelector | null | Use a string to configure which selector should be blocked, refer to the [privacy](#privacy) chapter |
+| ignoreClass | 'rr-ignore' | Use a string or RegExp to configure which elements should be ignored, refer to the [privacy](#privacy) chapter |
+| ignoreCSSAttributes | null | array of CSS attributes that should be ignored |
+| maskTextClass | 'rr-mask' | Use a string or RegExp to configure which elements should be masked, refer to the [privacy](#privacy) chapter |
+| maskTextSelector | null | Use a string to configure which selector should be masked, refer to the [privacy](#privacy) chapter |
+| maskAllInputs | false | mask all input content as \* |
+| maskInputOptions | { password: true } | mask some kinds of input \*
refer to the [list](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L77-L95) |
+| maskInputFn | - | customize mask input content recording logic |
+| maskTextFn | - | customize mask text content recording logic |
+| slimDOMOptions | {} | remove unnecessary parts of the DOM
refer to the [list](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L97-L108) |
+| dataURLOptions | {} | Canvas image format and quality ,This parameter will be passed to the OffscreenCanvas.convertToBlob(),Using this parameter effectively reduces the size of the recorded data |
+| inlineStylesheet | true | whether to inline the stylesheet in the events |
+| hooks | {} | hooks for events
refer to the [list](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207) |
+| packFn | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
+| sampling | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
+| recordCanvas | false | Whether to record the canvas element. Available options:
`false`,
`true` |
+| recordCrossOriginIframes | false | Whether to record cross origin iframes. rrweb has to be injected in each child iframe for this to work. Available options:
`false`,
`true` |
+| inlineImages | false | whether to record the image content |
+| collectFonts | false | whether to collect fonts in the website |
+| userTriggeredOnInput | false | whether to add `userTriggered` on input events that indicates if this event was triggered directly by the user or not. [What is `userTriggered`?](https://github.com/rrweb-io/rrweb/pull/495) |
+| plugins | [] | load plugins to provide extended record functions. [What is plugins?](./docs/recipes/plugin.md) |
#### Privacy
diff --git a/guide.zh_CN.md b/guide.zh_CN.md
index e867c93d..1093dbb3 100644
--- a/guide.zh_CN.md
+++ b/guide.zh_CN.md
@@ -131,32 +131,33 @@ setInterval(save, 10 * 1000);
`rrweb.record(config)` 的 config 部分接受以下参数
-| key | 默认值 | 功能 |
-| -------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| emit | 必填 | 获取当前录制的数据 |
-| checkoutEveryNth | - | 每 N 次事件重新制作一次全量快照
详见[“重新制作快照”](#重新制作快照)章节 |
-| checkoutEveryNms | - | 每 N 毫秒重新制作一次全量快照
详见[“重新制作快照”](#重新制作快照)章节 |
-| blockClass | 'rr-block' | 字符串或正则表达式，可用于自定义屏蔽元素的类名，详见[“隐私”](#隐私)章节 |
-| blockSelector | null | 所有 element.matches(blockSelector)为 true 的元素都不会被录制，回放时取而代之的是一个同等宽高的占位元素 |
-| ignoreClass | 'rr-ignore' | 字符串或正则表达式，可用于自定义忽略元素的类名，详见[“隐私”](#隐私)章节 |
-| ignoreCSSAttributes | null | 应该被忽略的 CSS 属性数组 |
-| maskTextClass | 'rr-mask' | 字符串或正则表达式，可用于自定义忽略元素 text 内容的类名，详见[“隐私”](#隐私)章节 |
-| maskTextSelector | null | 所有 element.matches(maskTextSelector)为 true 的元素及其子元素的 text 内容将会被屏蔽 |
-| maskAllInputs | false | 将所有输入内容记录为 \* |
-| maskInputOptions | { password: true } | 选择将特定类型的输入框内容记录为 \*
类型详见[列表](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L77-L95) |
-| maskInputFn | - | 自定义特定类型的输入框内容记录逻辑 |
-| maskTextFn | - | 自定义文字内容的记录逻辑 |
-| slimDOMOptions | {} | 去除 DOM 中不必要的部分
类型详见[列表](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L97-L108) |
-| inlineStylesheet | true | 是否将样式表内联 |
-| hooks | {} | 各类事件的回调
类型详见[列表](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207) |
-| packFn | - | 数据压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
-| sampling | - | 数据抽样策略，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
-| dataURLOptions | {} | Canvas 图像快照的格式和质量,这个参数将传递给 OffscreenCanvas.convertToBlob()，使用这个参数能有效减小录制数据的大小 |
-| recordCanvas | false | 是否记录 canvas 内容, 可用选项：false, true |
-| inlineImages | false | 是否将图片内容记内联录制 |
-| collectFonts | false | 是否记录页面中的字体文件 |
-| userTriggeredOnInput | false | [什么是 `userTriggered`](https://github.com/rrweb-io/rrweb/pull/495) |
-| plugins | [] | 加载插件以获得额外的录制功能. [什么是插件？](./docs/recipes/plugin.zh_CN.md) |
+| key | 默认值 | 功能 |
+| ------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| emit | 必填 | 获取当前录制的数据 |
+| checkoutEveryNth | - | 每 N 次事件重新制作一次全量快照
详见[“重新制作快照”](#重新制作快照)章节 |
+| checkoutEveryNms | - | 每 N 毫秒重新制作一次全量快照
详见[“重新制作快照”](#重新制作快照)章节 |
+| blockClass | 'rr-block' | 字符串或正则表达式，可用于自定义屏蔽元素的类名，详见[“隐私”](#隐私)章节 |
+| blockSelector | null | 所有 element.matches(blockSelector)为 true 的元素都不会被录制，回放时取而代之的是一个同等宽高的占位元素 |
+| ignoreClass | 'rr-ignore' | 字符串或正则表达式，可用于自定义忽略元素的类名，详见[“隐私”](#隐私)章节 |
+| ignoreCSSAttributes | null | 应该被忽略的 CSS 属性数组 |
+| maskTextClass | 'rr-mask' | 字符串或正则表达式，可用于自定义忽略元素 text 内容的类名，详见[“隐私”](#隐私)章节 |
+| maskTextSelector | null | 所有 element.matches(maskTextSelector)为 true 的元素及其子元素的 text 内容将会被屏蔽 |
+| maskAllInputs | false | 将所有输入内容记录为 \* |
+| maskInputOptions | { password: true } | 选择将特定类型的输入框内容记录为 \*
类型详见[列表](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L77-L95) |
+| maskInputFn | - | 自定义特定类型的输入框内容记录逻辑 |
+| maskTextFn | - | 自定义文字内容的记录逻辑 |
+| slimDOMOptions | {} | 去除 DOM 中不必要的部分
类型详见[列表](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L97-L108) |
+| inlineStylesheet | true | 是否将样式表内联 |
+| hooks | {} | 各类事件的回调
类型详见[列表](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207) |
+| packFn | - | 数据压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
+| sampling | - | 数据抽样策略，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
+| dataURLOptions | {} | Canvas 图像快照的格式和质量,这个参数将传递给 OffscreenCanvas.convertToBlob()，使用这个参数能有效减小录制数据的大小 |
+| recordCanvas | false | 是否记录 canvas 内容, 可用选项：`false`, `true` |
+| recordCrossOriginIframes | false | 是否记录 cross origin iframes。 必须在每个子 iframe 中注入 rrweb 才能使其工作。 可用选项：`false`, `true` |
+| inlineImages | false | 是否将图片内容记内联录制 |
+| collectFonts | false | 是否记录页面中的字体文件 |
+| userTriggeredOnInput | false | [什么是 `userTriggered`](https://github.com/rrweb-io/rrweb/pull/495) |
+| plugins | [] | 加载插件以获得额外的录制功能. [什么是插件？](./docs/recipes/plugin.zh_CN.md) |
#### 隐私
diff --git a/package.json b/package.json
index 66ae51cc..71921302 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
"concurrently": "^7.1.0",
"eslint": "^8.19.0",
"eslint-plugin-compat": "^4.0.2",
- "eslint-plugin-jest": "^26.5.3",
+ "eslint-plugin-jest": "^27.1.3",
"eslint-plugin-tsdoc": "^0.2.16",
"lerna": "^4.0.0",
"markdownlint": "^0.25.1",
diff --git a/packages/rrweb-player/typings/index.d.ts b/packages/rrweb-player/typings/index.d.ts
index c3c3b802..b27799aa 100755
--- a/packages/rrweb-player/typings/index.d.ts
+++ b/packages/rrweb-player/typings/index.d.ts
@@ -1,5 +1,5 @@
import { playerConfig } from 'rrweb/typings/types';
-import type { eventWithTime } from '@rrweb/types';
+import { eventWithTime } from '@rrweb/types';
import { Replayer, mirror } from 'rrweb';
import { SvelteComponent } from 'svelte';
diff --git a/packages/rrweb-snapshot/src/index.ts b/packages/rrweb-snapshot/src/index.ts
index 82dd6a42..b2417187 100644
--- a/packages/rrweb-snapshot/src/index.ts
+++ b/packages/rrweb-snapshot/src/index.ts
@@ -6,6 +6,7 @@ import snapshot, {
needMaskingText,
classMatchesRegex,
IGNORED_NODE,
+ genId,
} from './snapshot';
import rebuild, {
buildNodeWithSN,
@@ -28,4 +29,5 @@ export {
needMaskingText,
classMatchesRegex,
IGNORED_NODE,
+ genId,
};
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index 37080015..99a23ff7 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -27,7 +27,7 @@ const tagNameRegex = new RegExp('[^a-z0-9-_:]');
export const IGNORED_NODE = -2;
-function genId(): number {
+export function genId(): number {
return _id++;
}
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index a51c2af1..8e09e593 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -50,7 +50,7 @@
"@types/dom-mediacapture-transform": "^0.1.3",
"@types/inquirer": "^8.2.1",
"@types/jest": "^27.4.1",
- "@types/jest-image-snapshot": "^4.3.1",
+ "@types/jest-image-snapshot": "^5.1.0",
"@types/node": "^17.0.21",
"@types/offscreencanvas": "^2019.6.4",
"@types/prettier": "^2.3.2",
@@ -63,10 +63,10 @@
"ignore-styles": "^5.0.1",
"inquirer": "^9.0.0",
"jest": "^27.5.1",
- "jest-image-snapshot": "^4.5.1",
+ "jest-image-snapshot": "^5.2.0",
"jest-snapshot": "^23.6.0",
"prettier": "2.2.1",
- "puppeteer": "^9.1.1",
+ "puppeteer": "^11.0.0",
"rollup": "^2.68.0",
"rollup-plugin-esbuild": "^4.9.1",
"rollup-plugin-postcss": "^3.1.1",
diff --git a/packages/rrweb/scripts/repl.js b/packages/rrweb/scripts/repl.js
index 4edb07a3..0bf4a7de 100644
--- a/packages/rrweb/scripts/repl.js
+++ b/packages/rrweb/scripts/repl.js
@@ -21,6 +21,43 @@ void (async () => {
const code = getCode();
let events = [];
+ async function injectRecording(frame) {
+ await frame.evaluate((rrwebCode) => {
+ const win = window;
+ if (win.__IS_RECORDING__) return;
+ win.__IS_RECORDING__ = true;
+
+ (async () => {
+ function loadScript(code) {
+ const s = document.createElement('script');
+ let r = false;
+ s.type = 'text/javascript';
+ s.innerHTML = code;
+ if (document.head) {
+ document.head.append(s);
+ } else {
+ requestAnimationFrame(() => {
+ document.head.append(s);
+ });
+ }
+ }
+ loadScript(rrwebCode);
+
+ win.events = [];
+ rrweb.record({
+ emit: (event) => {
+ win.events.push(event);
+ win._replLog(event);
+ },
+ plugins: [],
+ recordCanvas: true,
+ recordCrossOriginIframes: true,
+ collectFonts: true,
+ });
+ })();
+ }, code);
+ }
+
await start('https://react-redux.realworld.io');
const fakeGoto = async (page, url) => {
@@ -44,8 +81,7 @@ void (async () => {
{
type: 'input',
name: 'url',
- message:
- `Enter the url you want to record, e.g [${defaultURL}]: `,
+ message: `Enter the url you want to record, e.g [${defaultURL}]: `,
},
]);
@@ -116,34 +152,18 @@ void (async () => {
],
});
const page = await browser.newPage();
- await page.goto(url, {
- waitUntil: 'domcontentloaded',
- timeout: 300000,
- });
await page.exposeFunction('_replLog', (event) => {
events.push(event);
});
- await page.evaluate(`;${code}
- window.__IS_RECORDING__ = true
- rrweb.record({
- emit: event => window._replLog(event),
- recordCanvas: true,
- collectFonts: true
- });
- `);
- page.on('framenavigated', async () => {
- const isRecording = await page.evaluate('window.__IS_RECORDING__');
- if (!isRecording) {
- await page.evaluate(`;${code}
- window.__IS_RECORDING__ = true
- rrweb.record({
- emit: event => window._replLog(event),
- recordCanvas: true,
- collectFonts: true
- });
- `);
- }
+
+ page.on('framenavigated', async (frame) => {
+ await injectRecording(frame);
+ });
+
+ await page.goto(url, {
+ waitUntil: 'domcontentloaded',
+ timeout: 300000,
});
emitter.once('done', async (shouldReplay) => {
@@ -211,9 +231,9 @@ void (async () => {
-
-
- Verify that block class bugs are fixed
-
-
+
+ Verify that block class bugs are fixed
+
-
+
-
+
-
+
-
+
-
+
diff --git a/packages/rrweb/test/html/hello-world.html b/packages/rrweb/test/html/hello-world.html
new file mode 100644
index 00000000..04c1907d
--- /dev/null
+++ b/packages/rrweb/test/html/hello-world.html
@@ -0,0 +1,12 @@
+
+
+