Issue #5743✓ SolvedOpened March 11, 2024by davidgabrichidze5 reactions

XSS vulnerability in iframe attribute src

Quick answerby bernesto2

I think the pre-parser option is a really good idea. It sticks to the 'plug-in' per feature concept. How about updating fromElement to accept a string element ID or boolean. If bool == true, works as it does now, parsing the container HTML. If a string ID, it uses the contents of the element and the container becomes...

Read full answer below ↓

Question

GrapesJS version

  • I confirm to use the latest version of GrapesJS

What browser are you using?

Edge v122

Reproducible demo link

https://jsfiddle.net/bwreyq29/1/

Describe the bug

How to reproduce the bug? open this link https://jsfiddle.net/bwreyq29/1/ and javascript code attached to src attribute will be executed automatically.

What is the expected behaviour? This code shouldn't run

What is the current behaviour? XSS vulnerability exists

Code of Conduct

  • I agree to follow this project's Code of Conduct

Answers (4)

👍 Most helpfulbernestoMarch 12, 2024

I think the pre-parser option is a really good idea. It sticks to the 'plug-in' per feature concept.

How about updating fromElement to accept a string element ID or boolean. If bool == true, works as it does now, parsing the container HTML. If a string ID, it uses the contents of the element and the container becomes the editor as it does now. Then we could update the docs in favor of a HTML script template for development. This prevents any braking changes, and promotes proper usage.

const editor = grapesjs.init({
  container: '#gjs',
  fromElement: '#mySource',
  height: '100%',
  storageManager: { type: 0 },
  plugins: ['gjs-blocks-basic']
});
artfMarch 14, 2024

Totally agree with @bernesto indeed no matter how hard we try to make it safe, it will never be enough and I don't want to give the impression that the library is "so safe" to justify a missing server-side validation. The current options (eg. allowUnsafeAttr, allowUnsafeAttrValue) avoid only the basic common stuff.

bernestoMarch 12, 2024

This is unavoidable when using fromElement to load from an active DOM element. The element of the page loads and executes synchronously. GrapesJS would never have a chance to process and disarm the XSS html.

This would need to be addressed by preventing the malicious code from ever loading. This should be handled at the server on save. But, if on the client processing is needed, by wrapping the code in script tags, and then sanitizing the code prior to loading it in to the editor like this:

https://jsfiddle.net/bernesto/5gcxa0jm/1/

I do see that when loading via the components property at initialization or dynamically post from a remote source, the same XSS vulnerability exists, and this may be something we want to prevent.

Personally, I believe that the server should be processing all saves and sanitizing. A malicious actor could always emulate a client request and save an malicious XSS to your server regardless of the editor used.

@artf what do you think?

In your opinion, should an XSS sanitizer be built into the editor? And if so, that begs the question; how do you feel about fromElement anyways? Should it be reimplemented as something similar to my example, where content is provided using script tags instead? E.g. maybe providing a source (script template) and destination (editor) element IDs instead?

Not only would this allow us to sanitize for XSS vulnerabilities, but it would also eliminate the browser processing and painting those initial DOM elements twice (once on load, second to the new frame). This may actually speed up the editor load time as a happy benefit.

ClaudeCodeMay 17, 2026

Thanks for reporting this, @davidgabrichidze.

Security and dependency issues are important. The GrapesJS team actively works on keeping dependencies up-to-date.

For you right now:

  1. Run npm audit fix to see available patches
  2. Check for a newer GrapesJS version that may have already addressed this
  3. If available, test the latest stable release before upgrading
  4. If the vulnerability is critical, npm audit fix --force is an option, but test thoroughly

Understanding the risk:

  • Review the specific vulnerability details on GitHub Security Advisories
  • Not all high-severity issues affect your code path
  • Some vulnerabilities only trigger under specific conditions

Staying current:

  • Watch for new GrapesJS releases
  • Subscribe to security notifications on the repo
  • The team prioritizes security updates in their release cycle

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.