Securing your WebRTC Applications

            // Example: Ensuring DTLS is enabled with modern certificates
// Note: generateCertificate() returns a Promise, so we must await it first
async function createSecurePeerConnection() {
  // Generate a secure certificate
  const cert = await RTCPeerConnection.generateCertificate({
    name: 'ECDSA',
    namedCurve: 'P-256'
  });

  // Create the peer connection with the certificate
  const peerConnection = new RTCPeerConnection({
    iceServers: [...],
    // Certificates must be provided as an array
    certificates: [cert]
  });

  return peerConnection;
}

// Usage:
async function setupCall() {
  const peerConnection = await createSecurePeerConnection();

  // Modern browsers automatically negotiate the strongest DTLS/SRTP ciphers
  // they mutually support, so we don't need to modify the SDP
  peerConnection.addEventListener('negotiationneeded', async () => {
    const offer = await peerConnection.createOffer({
      offerToReceiveAudio: true,
      offerToReceiveVideo: true
    });

    await peerConnection.setLocalDescription(offer);
    // Send offer to remote peer via secure signaling channel...
  });

  return peerConnection;
}
        

            // Example of connecting to a secure signaling server
function connectToSecureSignaling() {
  // Always use WSS (WebSockets Secure)
  const socket = new WebSocket('wss://signaling.example.com/ws');

  // Implement proper error handling for TLS issues
  socket.onerror = (error) => {
    console.error('Secure connection failed:', error);
    // Consider implementing a fallback only for development
    if (process.env.NODE_ENV === 'development') {
      console.warn('Falling back to insecure connection in dev mode only');
      // In production, never fall back to insecure connections
    }
  };

  return socket;
}
        

            // Example of credential-based authentication before establishing WebRTC connection
async function authenticateUser(username, password) {
  try {
    const response = await fetch('/api/authenticate', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ username, password })
    });

    if (!response.ok) {
      throw new Error('Authentication failed');
    }

    const authData = await response.json();
    // Store authentication token or session information
    sessionStorage.setItem('authToken', authData.token);
    return true;
  } catch (error) {
    console.error('Authentication error:', error);
    return false;
  }
}

// Only establish WebRTC connection after successful authentication
async function initiateWebRTCCall() {
  const authToken = sessionStorage.getItem('authToken');
  if (!authToken) {
    console.error('User not authenticated');
    return false;
  }

  // Proceed with WebRTC connection setup
  // ...
}
        

            // Example using JWT (JSON Web Tokens) for WebRTC authentication
async function getSignalingCredentials() {
  // SECURITY NOTE: Don't store sensitive tokens in sessionStorage or localStorage
  // as they're vulnerable to XSS attacks
  // Instead, use HttpOnly cookies (preferred) or memory storage
  const authToken = getAuthTokenFromSecureStorage();

  try {
    // Always use HTTPS for credential requests
    const response = await fetch('https://api.example.com/webrtc/credentials', {
      method: 'GET',
      headers: {
        // Only use this pattern with memory-stored tokens
        // For production, prefer HttpOnly cookies with SameSite=Strict
        'Authorization': `Bearer ${authToken}`
      },
      // Include credentials to send cookies
      credentials: 'include'
    });

    if (!response.ok) {
      throw new Error('Failed to get signaling credentials');
    }

    const credentials = await response.json();
    return credentials;
  } catch (error) {
    console.error('Error getting credentials:', error);
    return null;
  }
}

// Secure token storage in memory (not persistent across page refreshes,
// but safer than localStorage/sessionStorage)
let secureTokenStorage = null;

function setAuthToken(token) {
  secureTokenStorage = token;
}

function getAuthTokenFromSecureStorage() {
  return secureTokenStorage;
}

// For persistent auth that's more secure than localStorage/sessionStorage,
// use HttpOnly cookies set by your server
        

            // Example of room-based authorization
async function joinRoom(roomId) {
  const authToken = sessionStorage.getItem('authToken');

  try {
    // Verify user has permission to join this specific room
    const response = await fetch(`/api/rooms/${roomId}/authorize`, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${authToken}`
      }
    });

    if (!response.ok) {
      throw new Error('Not authorized to join this room');
    }

    const roomCredentials = await response.json();

    // Now initialize WebRTC connection with room-specific credentials
    initializeWebRTCForRoom(roomId, roomCredentials);
  } catch (error) {
    console.error('Room authorization error:', error);
    return false;
  }
}
        

            // Example of checking role-based permissions before allowing media publishing
function canPublishMedia(userRole) {
  const publishingRoles = ['admin', 'moderator', 'presenter'];
  return publishingRoles.includes(userRole);
}

// When user tries to publish media
function handlePublishRequest() {
  const userRole = getUserRoleFromToken(); // Extract from JWT or session

  if (!canPublishMedia(userRole)) {
    showError('Your role does not allow publishing media');
    return false;
  }

  // Proceed with media publishing
  startLocalMedia();
}
        

            // Example of secure signaling connection with authentication
function connectToSignalingServer() {
  const authToken = sessionStorage.getItem('authToken');

  // Connect to signaling server with authentication
  const socket = new WebSocket(`wss://signaling.example.com?token=${authToken}`);

  socket.onopen = () => {
    console.log('Secure connection to signaling server established');
  };

  socket.onmessage = (event) => {
    const message = JSON.parse(event.data);

    // Verify message integrity and authorization
    if (!verifyMessageIntegrity(message)) {
      console.error('Received tampered message');
      return;
    }

    // Process valid signaling message
    handleSignalingMessage(message);
  };

  return socket;
}
        

            // Example configuration to handle firewall restrictions
const peerConnection = new RTCPeerConnection({
  iceServers: [
    {
      // Standard STUN - most browsers don't yet support STUNS (STUN over TLS)
      // despite the URI scheme being valid in RFC 7064
      urls: 'stun:stun.example.com:19302'
    },
    {
      // For TCP fallback (more compatible than STUNS currently)
      urls: 'stun:stun.example.com:443?transport=tcp'
    },
    {
      // TURN over TLS - supported by all major browsers
      urls: 'turns:turn.example.com:443',
      username: 'username',
      credential: 'password'
    },
    {
      // Standard TURN over UDP (add as fallback)
      urls: 'turn:turn.example.com:3478',
      username: 'username',
      credential: 'password'
    }
  ],
  // NOTE: Only set to 'relay' in high-security environments that require it
  // This forces TURN usage which adds latency and server costs
  // iceTransportPolicy: 'relay'
});
        

            // Example of implementing secure TURN with short-lived credentials
async function getTurnCredentials() {
  const authToken = sessionStorage.getItem('authToken');

  try {
    // Request time-limited TURN credentials from your server
    const response = await fetch('/api/get-turn-credentials', {
      method: 'GET',
      headers: {
        'Authorization': `Bearer ${authToken}`
      }
    });

    if (!response.ok) {
      throw new Error('Failed to get TURN credentials');
    }

    const credentials = await response.json();
    // credentials should contain username, credential, and ttl (time to live)

    // Configure peer connection with the secure, time-limited credentials
    const peerConnection = new RTCPeerConnection({
      iceServers: [
        {
          urls: `turns:${credentials.turnServer}`,
          username: credentials.username,
          credential: credentials.credential
        }
      ]
    });

    return peerConnection;
  } catch (error) {
    console.error('Error getting secure TURN credentials:', error);
    return null;
  }
}
        

            // Modern browsers now use mDNS host candidates to protect privacy
// Manual filtering is typically unnecessary and can break connectivity
peerConnection.onicecandidate = (event) => {
  if (event.candidate) {
    // Modern browsers automatically protect private IPs with mDNS
    // (candidates will look like "1234abc.local" instead of "192.168.1.5")

    // Simply send all candidates to the remote peer
    sendCandidateToRemotePeer(event.candidate);

    // Log candidate types for debugging - NEVER log full candidate strings
    // in production as they may contain private IP addresses in older browsers
    // or non-mDNS configurations
    const candidateType = event.candidate.candidate.split(' ')[7]; // "typ host/srflx/relay"
    console.log('ICE candidate type:', candidateType);

    // Do not log or store mDNS hostnames as they should remain unresolved
    // to preserve privacy
    if (event.candidate.address && event.candidate.address.endsWith('.local')) {
      // Don't log or attempt to resolve the .local address
    }
  }
};

// For legacy applications or special requirements, filtering can be done
// but is generally not recommended in modern WebRTC applications
function legacyCandidateFiltering(candidate) {
  // NOTE: Modern browsers use mDNS for host candidates, making manual
  // filtering largely obsolete and potentially harmful to connectivity

  // Example: Only share relay candidates in high-security mode
  const highSecurityMode = getSecurityPreference();
  if (highSecurityMode && !candidate.candidate.includes('typ relay')) {
    return false;
  }

  return true;
}
        

            // Example of secure media access with explicit user permission
async function requestMediaWithPermissionUI() {
  try {
    // Always show permission UI to user for transparency
    const constraints = {
      audio: true,
      video: true
    };

    // Browser will show permission UI
    const stream = await navigator.mediaDevices.getUserMedia(constraints);

    // Once permission is granted, check if it's still appropriate to use media
    if (!isCurrentlyInCall()) {
      // Stop all tracks if user isn't actually in a call
      stream.getTracks().forEach(track => track.stop());
      return null;
    }

    return stream;
  } catch (error) {
    console.error('Media access error:', error);
    return null;
  }
}
        

            // Modern E2EE in WebRTC using RTCRtpScriptTransform API (W3C standard)
// Note: This approach is more cross-browser compatible than direct MediaStreamTrackProcessor

// On sender side
async function implementE2EEncryption(sender, encryptionKey) {
  // Check browser compatibility
  if (!RTCRtpSender.prototype.transform) {
    console.error("This browser doesn't support insertable streams for WebRTC E2EE");
    return false;
  }

  try {
    // Create a worker to handle encryption (keeps crypto operations off main thread)
    const worker = new Worker('e2ee-worker.js');

    // Send encryption key to worker
    worker.postMessage({
      operation: 'initialize',
      encryptionKey: encryptionKey
    });

    // Create RTCRtpScriptTransform with the worker
    const transform = new RTCRtpScriptTransform(worker);

    // Apply transform to the sender
    sender.transform = transform;

    return true;
  } catch (error) {
    console.error('Error setting up E2EE:', error);
    return false;
  }
}

// Example usage
async function setupEncryptedCall(peerConnection, localStream) {
  try {
    // Add tracks to the peer connection
    const senders = localStream.getTracks().map(track => 
      peerConnection.addTrack(track, localStream));

    // Generate or retrieve E2EE key (e.g., from secure key exchange)
    const encryptionKey = await getOrGenerateE2EEKey();

    // Set up E2EE for each sender
    for (const sender of senders) {
      await implementE2EEncryption(sender, encryptionKey);
    }

    console.log('E2EE successfully configured');
  } catch (error) {
    console.error('Failed to set up E2EE:', error);
  }
}

// Content of e2ee-worker.js would handle the actual encryption:
/*
let encryptionKey;

self.onmessage = async (event) => {
  const { operation } = event.data;

  if (operation === 'initialize') {
    encryptionKey = event.data.encryptionKey;
  }
};

// This is the main transform stream handler
self.rtcTransform = (readable, writable) => {
  const transformStream = new TransformStream({
    transform: async (encodedFrame, controller) => {
      // Access frame data properly
      const view = new DataView(encodedFrame.data);

      // Clone the frame data for encryption
      const buffer = new ArrayBuffer(encodedFrame.data.byteLength);
      const newView = new Uint8Array(buffer);

      // Copy original data
      newView.set(new Uint8Array(encodedFrame.data));

      // Perform encryption (actual implementation would use WebCrypto API)
      // This is a placeholder for actual encryption logic
      await encryptFrameData(newView, encryptionKey);

      // Create new encoded frame with encrypted data
      const newFrame = new RTCEncodedFrame({
        data: buffer,
        type: encodedFrame.type,
        timestamp: encodedFrame.timestamp,
        sequenceNumber: encodedFrame.sequenceNumber
      });

      controller.enqueue(newFrame);
    }
  });

  readable
    .pipeThrough(transformStream)
    .pipeTo(writable);
};
*/

// Note: For production use, consider the SFrame E2EE protocol
// which is becoming the industry standard for WebRTC E2EE with SFUs
// https://datatracker.ietf.org/doc/draft-ietf-sframe/

// On receiver side, the process would be reversed to decrypt
        

            // Conceptual SFrame E2EE implementation (simplified)
// The actual implementation would use the SFrame protocol specification
async function setupSFrameE2EE(peerConnection, encryptionKey) {
  // Create SFrame context with the encryption key
  const sframe = new SFrameContext(encryptionKey);

  // Apply E2EE to all senders
  peerConnection.getSenders().forEach(sender => {
    if (sender.track.kind === 'audio' || sender.track.kind === 'video') {
      // Implement SFrame encryption using the available browser APIs
      // (RTCRtpScriptTransform in Chrome, or appropriate fallbacks)
      applySFrameEncryption(sender, sframe);
    }
  });

  // Apply E2EE to all receivers
  peerConnection.getReceivers().forEach(receiver => {
    if (receiver.track.kind === 'audio' || receiver.track.kind === 'video') {
      applySFrameDecryption(receiver, sframe);
    }
  });
}
        

            // Example of initiating SAML authentication before WebRTC connection
function initiateEnterpriseAuth() {
  // Redirect to SAML identity provider
  window.location.href = '/api/auth/saml/login?redirect=' + encodeURIComponent(window.location.href);
}

// After SAML callback, verify the identity assertions
async function verifySamlAssertion(samlResponse) {
  try {
    const response = await fetch('/api/auth/saml/verify', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ samlResponse })
    });

    if (!response.ok) {
      throw new Error('SAML verification failed');
    }

    const authData = await response.json();
    // Store authenticated identity and attributes
    sessionStorage.setItem('authToken', authData.token);
    sessionStorage.setItem('userIdentity', authData.identity);

    // Now safe to proceed with WebRTC setup
    setupSecureWebRTC(authData);
  } catch (error) {
    console.error('SAML verification error:', error);
    return false;
  }
}
        

            // Example of implementing a WebRTC version check
async function checkWebRTCVersion() {
  try {
    // Get adapter.js version if used
    const adapterVersion = adapter?.version || 'Not detected';

    // Get browser version
    const browserInfo = {
      name: navigator.userAgent.match(/(chrome|firefox|safari|edge|opera)/i)?.[0] || 'unknown',
      version: navigator.userAgent.match(/(?:chrome|firefox|safari|edge|opera)\/(\d+)/i)?.[1] || 'unknown'
    };

    // Check against known vulnerable versions
    const vulnerableVersions = await fetchVulnerableVersionsDatabase();
    const isVulnerable = checkIfVulnerable(browserInfo, vulnerableVersions);

    if (isVulnerable) {
      console.warn('Security risk: Using potentially vulnerable WebRTC implementation');
      // Consider implementing user notification or degraded functionality
    }

    // Log for monitoring
    logSecurityTelemetry({
      webrtcAdapter: adapterVersion,
      browser: browserInfo,
      potentialVulnerability: isVulnerable
    });

    return !isVulnerable;
  } catch (error) {
    console.error('Failed to check WebRTC security status:', error);
    return false;
  }
}
        

            // Example of privacy-preserving WebRTC analytics
function logCallAnalytics(callId, stats) {
  // Anonymize the call ID by hashing with a rotating salt
  const anonymizedCallId = hashWithRotatingSalt(callId);

  // Extract non-PII metrics that are safe to log
  const safeMetrics = {
    duration: stats.duration,
    videoEnabled: stats.hasVideo,
    audioEnabled: stats.hasAudio,
    // Use bucketed values rather than exact values for potentially identifying info
    roundTripTimeBucket: bucketRTT(stats.roundTripTime),
    // Never include raw IP addresses
    // Instead log general region if needed (country/state level only)
    region: getRegionFromIP(stats.remoteIP),
    // Log generic connection type, not specific network info
    connectionType: categorizeConnectionType(stats.networkType)
  };

  // Send anonymized analytics
  sendAnalytics(anonymizedCallId, safeMetrics);
}