Skip to content

feat: auto-submit iframe challenge answers via postMessage#43

Open
Rinse12 wants to merge 2 commits intomasterfrom
iframe-challenge-auto-answer
Open

feat: auto-submit iframe challenge answers via postMessage#43
Rinse12 wants to merge 2 commits intomasterfrom
iframe-challenge-auto-answer

Conversation

@Rinse12
Copy link
Member

@Rinse12 Rinse12 commented Feb 23, 2026

Summary

  • Adds a useIframeChallengeAutoAnswer hook that listens for postMessage events from url/iframe challenges (OAuth, CAPTCHA, mintpass, etc.)
  • When the iframe posts {type: 'challengeanswer', challengeAnswer: '...'}, the hook auto-submits the answers — no manual "click done" needed
  • Wired into all 5 publish hooks: usePublishComment, usePublishVote, usePublishCommentEdit, usePublishCommentModeration, usePublishSubplebbitEdit
  • Only auto-submits when all challenges are url/iframe type. If there's a mix of iframe + non-iframe challenges, the user must submit manually.

How it works

  1. When a challenge is received, the hook checks if every challenge in the array is url/iframe type
  2. If all iframe: it registers a message event listener for each, matching by origin
  3. Each iframe posts its single answer; the hook collects them into the correct positional slot
  4. Once all slots are filled, it calls publishChallengeAnswers(answers) with the full array

Backwards compatible in both directions: old clients without the listener still show "click done"; old challenge servers without postMessage cause the listener to never fire.

Iframe challenge integration guide

Challenge pages (e.g. mintpass) need to add this snippet to auto-submit their result back to the parent plebbit client:

// after the challenge is completed (e.g. CAPTCHA solved, OAuth done, mint verified)
window.parent.postMessage(
  {
    type: 'challengeanswer',
    challengeAnswer: 'the-answer-string'
  },
  '*'
)

Some iframe challenges handle verification entirely within the iframe itself. In that case, post an empty answer string to notify the subplebbit that the challenge is done:

// challenge was completed inside the iframe, just notify we're done
window.parent.postMessage(
  {
    type: 'challengeanswer',
    challengeAnswer: ''
  },
  '*'
)

Notes for challenge developers

  • challengeAnswer is a single string (one answer per iframe)
  • type must be exactly 'challengeanswer' (all lowercase, matching plebbit event naming convention)
  • The target is window.parent (the iframe's parent window where plebbit-react-hooks runs)
  • The plebbit client validates the message origin against the iframe challenge URL's origin
  • If there are multiple iframe challenges, each iframe posts its own answer independently; the client collects them all before submitting

Test plan

  • yarn build passes
  • yarn test passes
  • Manual: mount a publish hook, simulate window.postMessage({type: 'challengeanswer', challengeAnswer: ''}, '*') and verify publishChallengeAnswers is called

When a url/iframe challenge (e.g. OAuth, CAPTCHA) completes inside an
iframe, the iframe can now signal completion via postMessage and the
client auto-submits the challenge answers without manual user action.
- Fix TypeScript implicit any error by adding type annotations
- Only auto-submit when all challenges are url/iframe type
- Collect answers positionally from each iframe via postMessage
- Use 'challengeanswer' (lowercase) as message type
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant