Webcam Custom Component Works in One Org, But Fails in Another (SecurityError: Invalid security origin)

💬 App Building
, ,
1

Hey Retool Community, :wave:

:mag: Problem Summary:

  • :white_check_mark: In Org A (Retool cloud-hosted), the custom component works as expected: the browser prompts for webcam permissions, access is granted, and everything functions normally.
  • :x: In Org B (Retool self-hosted), (on the same device, same browser), the webcam component does not prompt for permission, and I get this error:
Webcam Error: SecurityError: Invalid security origin
  • I’ve tested across browsers (Chrome, Edge, Firefox), cleared cache, used Incognito, and confirmed HTTPS is in use.

:test_tube: Additional Notes:

  • I’m accessing Org B through a VPN, which could be affecting network policies or origin trust.
  • Even when I manually allow webcam permissions for the domain in browser settings, the error persists.
  • Verified that window.isSecureContext is true, so that doesn't seem to be the issue.

:package: Technical Setup:

  • Retool version: 3.148.0
  • Library: react-webcam
  • Framework: React (with @tryretool/custom-component-support)
  • SSL: HTTPS is enabled
  • Browser Security: Camera and mic are enabled in settings

Any ideas, suggestions, or things I should look into would be incredibly helpful. Thanks!

4 Likes
2

Thanks for reaching out, @WidleStudioLLP! I think the most likely cause, given what you've already shared, is related to CORS. Custom components are rendered within a nested iframe and self-hosted deployments enforce a same-origin policy, by default. You can read about how to override that behavior here.

Just to be sure, do you see any other error messages in the browser console or just the one that you've shared above?