Skip to content

fix: The EchartsRander component injects stored XSS via Eval #4957

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
shaohuzhang1 merged 1 commit into from
Mar 26, 2026
+7 −1
Merged

fix: The EchartsRander component injects stored XSS via Eval #4957

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 7 additions & 1 deletion ui/src/components/markdown/EchartsRander.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
<template>
<div class="charts-container">
<iframe v-show="false" ref="iframeRef" :srcdoc="iframeHtml" @load="onIframeLoad"></iframe>
<iframe
v-show="false"
ref="iframeRef"
sandbox="allow-scripts"
:srcdoc="iframeHtml"
@load="onIframeLoad"
></iframe>
<div ref="chartsRef" :style="style" v-resize="onResize"></div>
</div>
</template>
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Mar 26, 2026

Choose a reason for hiding this comment

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

The provided code appears to be well-formed and does not contain any significant irregularities. However, there are several potential areas where improvements can be made:

  1. Sandboxing: The sandbox attribute is already present on the <iframe>, which restricts certain behavior within the frame. Ensure that this is appropriate based on your application's security requirements.

  2. Performance Considerations:

    • Iframe SrcDoc: If you're embedding content from an external source using ${baseURL}${chart}?${params}, ensure that this approach doesn't introduce performance bottlenecks or CORS issues.
    • On Resize Event: The use of v-resize seems to be custom Vue directive, ensuring it exists somewhere else in your code base. If needed, consider optimizing how resize events affect performance if they aren't crucial immediately after change.

  3. Styling Flexibility:

    • The default flexbox properties (d-flex justify-content-between align-items-center) might need adjustment depending on your layout goals. Review CSS to confirm these styles fit logically with the parent container structure.

  4. Error Handling:

    • Add event listeners (such as @error) to handle cases where the iframe fails to load due to network errors or other issues.

  5. Responsive Design:

    • Check if the responsive design implemented by resizing works correctly across different browsers and devices. Test various layouts and ensure the div containing charts remains flexible and visually appealing.

  6. Documentation:

    • Document changes made to improve future maintenance and understanding by colleagues who will work on this component later.

  7. Security Best Practices:

    • Double-check that the sandbox settings do not inadvertently expose sensitive information or allow unnecessary access features like popups or camera access without user consent.

Overall, the current setup looks functional and efficient for most basic use cases, but refining it further should enhance its robustness and maintainability.

Expand Down
Loading