CI: add a prettier GitHub action to format code automatically (#988)

* CI: add a prettier GitHub action to format code automatically

* improve GitHub Action config and format some files

* Apply formatting changes

* CI: make the prettier action a standalone action

* Apply formatting changes

* CI: add push as new trigger event

Co-authored-by: Mark-Fenng <Mark-Fenng@users.noreply.github.com>
This commit is contained in:
Yun Feng
2026-04-01 12:00:00 +08:00
committed by GitHub
parent c94b5783c4
commit f878cc032d
22 changed files with 109 additions and 54 deletions

View File

@@ -5,6 +5,7 @@ In the [serialization design](./serialization.md) we mentioned the "de-scripting
There are many kinds of scripting behaviors. A filtering approach to getting rid of these scripts will never be a complete solution, and once a script slips through and is executed, it may cause irreversible unintended consequences. So we use the iframe sandbox feature provided by HTML for browser-level restrictions.
## iframe sandbox
We reconstruct the recorded DOM in an `iframe` element when we rebuild the snapshot. By setting its `sandbox` attribute, we can disable the following behavior:
- Form submission
@@ -14,6 +15,7 @@ We reconstruct the recorded DOM in an `iframe` element when we rebuild the snaps
This is in line with our expectations, especially when dealing with JS scripts is safer and more reliable than implementing this security ourselves.
## Avoid link jumps
When you click the a element link, the default event is to jump to the URL corresponding to its href attribute. During replay, we will ensure visually correct replay by rebuilding the page DOM after the jump, and the original jump should be prohibited.
Usually we will capture all an elements click events through the event handler proxy and disable the default event via `event.preventDefault()`. But when we put the replay page in the sandbox, all the event handlers will not be executed, and we will not be able to implement the event delegation.
@@ -21,6 +23,7 @@ Usually we will capture all an elements click events through the event handler p
When replaying interactive events, note that replaying the JS `click` event is not nessecary because click events do not have any impact when JS is disabled. However, in order to optimize the replay effect, we can add special animation effects to visualize elements being clicked with the mouse, to clearly show the viewer that a click has occurred.
## iframe style settings
Since we're rebuilding the DOM in an iframe, we can't affect the elements in the iframe through the CSS stylesheet of the parent page. But if JS scripts are not allowed to execute, the `noscript` tag will be displayed, and we want to hide it. So we need to dynamically add styles to the iframe. The sample code is as follows:
```typescript