Skip to main content

​
Security Considerations

​
Origin Validation

In production, always validate the origin of messages: 
window.addEventListener('message', (event: MessageEvent<IframeResponse>) => {
  // Validate origin
  if (event.origin !== 'https://frame.raze.sh') {
    console.warn('Received message from untrusted origin:', event.origin);
    return;
  }
  
  // Process message
  handleMessage(event.data);
});

​
Content Security Policy

Add CSP headers to allow iframe embedding: 
Content-Security-Policy: frame-ancestors 'self' https://trusted-domain.com;

​
Input Validation

Validate wallet addresses before sending: 
function isValidSolanaAddress(address: string): boolean {
  // Basic Solana address validation
  return /^[1-9A-HJ-NP-Za-km-z]{32,44}$/.test(address);
}

function validateWallets(wallets: (string | Wallet)[]): boolean {
  return wallets.every(wallet => {
    const address = typeof wallet === 'string' 
      ? wallet.split(':')[0] 
      : wallet.address;
    
    return address && address.length >= 3; // Allow partial addresses
  });
}

​
Best Practices

  1. Wait for Ready Signal: Always wait for IFRAME_READY before sending commands
  2. Queue Messages: Queue messages if iframe isn’t ready yet
  3. Validate Input: Validate wallet addresses before sending
  4. Handle Timeouts: Implement timeouts for async operations
  5. Error Handling: Always handle potential errors and edge cases
  6. Type Safety: Use TypeScript types for better development experience
  7. Security: Validate message origins in production

​
Troubleshooting

​
Common Issues

IssueSolution
Messages not receivedCheck if iframe is fully loaded
CORS errorsEnsure proper CORS configuration
Type errorsVerify message structure matches interfaces
Timeout errorsIncrease timeout or check network connectivity