Description

Vulnerability Overview

• In the editor's text-editing flow, user input has only its newlines converted to <br> and is then injected directly via innerHTML. There is no filtering or escaping for HTML tags or event attributes, so event-driven payloads like <img onerror=...> and <svg onload=...> execute immediately.
• The input's delivery path is as follows: the editor's inline text editor collects newContent → it is sent to the iframe (preview) via the Penpal RPC → the preload script inserts it into the target DOM's innerHTML.
• Therefore, DOM XSS can be triggered solely by editing a text element.

Vulnerable Code

• The text the user types becomes content and is passed to this.edit(content)

  https://github.com/onlook-dev/onlook/blob/8770e5460c30bbfa612cbe948a1632f9f93ba43e/apps/web/client/src/components/store/editor/text/index.ts#L58-L71

  this.editorEngine.overlay.clearUI();
  
  this.editorEngine.overlay.state.addTextEditor(
      adjustedRect,
      this.originalContent,
      el.styles?.computed ?? {},
      (content: string) => {
          this.edit(content);
      },
      () => {
          this.end();
      },
      isComponent,
  );
  

• newContent is passed directly to the frame view’s remote method. https://github.com/onlook-dev/onlook/blob/8770e5460c30bbfa612cbe948a1632f9f93ba43e/apps/web/client/src/components/store/editor/text/index.ts#L87-L96

  const res = await frameData.view.editText(
      this.targetDomEl.domId,
      newContent,
  );
  if (!res) {
      throw new Error('Failed to edit text. No dom element returned');
  }
  
  await this.handleEditedText(res.domEl, newContent, frameData.view);
  } catch (error) {
  

• The Penpal bridge exposes editText so it can be invoked remotely. https://github.com/onlook-dev/onlook/blob/8770e5460c30bbfa612cbe948a1632f9f93ba43e/apps/web/client/src/app/project/[id]/_components/canvas/frame/view.tsx#L224-L226

  startEditingText: promisifyMethod(penpalChild?.startEditingText),
  editText: promisifyMethod(penpalChild?.editText),
  stopEditingText: promisifyMethod(penpalChild?.stopEditingText),
  

• Event handlers execute because the content is injected into innerHTML without any filtering. https://github.com/onlook-dev/onlook/blob/8770e5460c30bbfa612cbe948a1632f9f93ba43e/apps/web/preload/script/api/elements/text.ts#L91-L95

  function updateTextContent(el: HTMLElement, content: string): void {
      // Convert newlines to <br> tags in the DOM
      const htmlContent = content.replace(/\\n/g, '<br>');
      el.innerHTML = htmlContent;
  }
  

PoC

PoC Description

1. Create or open a project
2. Switch the frame to P (Preview) and allow click passthrough
3. Select a text element (for example, "Welcome to your app") and press Enter to enter inline edit mode