[0.85] Add support for custom headers in devsupport (#55976)

Author: cipolleschi

packages/react-native/Libraries/Core/setUpReactDevTools.js

@@ -146,17 +146,34 @@ if (__DEV__) {
         ? guessHostFromDevServerUrl(devServer.url)
         : 'localhost';
 
-      // Read the optional global variable for backward compatibility.
-      // It was added in https://github.com/facebook/react-native/commit/bf2b435322e89d0aeee8792b1c6e04656c2719a0.
-      const port =
+      // Derive scheme and port from the dev server URL when possible,
+      // falling back to ws://host:8097 for local development.
+      let wsScheme = 'ws';
+      let port = 8097;
+
+      if (
         // $FlowFixMe[prop-missing]
         // $FlowFixMe[incompatible-use]
         window.__REACT_DEVTOOLS_PORT__ != null
-          ? window.__REACT_DEVTOOLS_PORT__
-          : 8097;
+      ) {
+        // $FlowFixMe[prop-missing]
+        port = window.__REACT_DEVTOOLS_PORT__;
+      } else if (devServer.bundleLoadedFromServer) {
+        try {
+          const devUrl = new URL(devServer.url);
+          if (devUrl.protocol === 'https:') {
+            wsScheme = 'wss';
+          }
+          if (devUrl.port) {
+            port = parseInt(devUrl.port, 10);
+          } else if (devUrl.protocol === 'https:') {
+            port = 443;
+          }
+        } catch (e) {}
+      }
 
       const WebSocket = require('../WebSocket/WebSocket').default;
-      ws = new WebSocket('ws://' + host + ':' + port);
+      ws = new WebSocket(wsScheme + '://' + host + ':' + port);
       ws.addEventListener('close', event => {
         isWebSocketOpen = false;
       });

packages/react-native/Libraries/Network/RCTHTTPRequestHandler.h

@@ -14,6 +14,15 @@ typedef NSURLSessionConfiguration * (^NSURLSessionConfigurationProvider)(void);
  * app.
  */
 RCT_EXTERN void RCTSetCustomNSURLSessionConfigurationProvider(NSURLSessionConfigurationProvider /*provider*/);
+
+typedef NSURLRequest *_Nullable (^RCTHTTPRequestInterceptor)(NSURLRequest *request);
+/**
+ * The block provided via this function can inspect/modify HTTP requests before
+ * they are sent. Return a modified request to override, or nil to use the
+ * original request unchanged.
+ */
+RCT_EXTERN void RCTSetCustomHTTPRequestInterceptor(RCTHTTPRequestInterceptor /*interceptor*/);
+
 /**
  * This is the default RCTURLRequestHandler implementation for HTTP requests.
  */

packages/react-native/Libraries/Network/RCTHTTPRequestHandler.mm

@@ -25,6 +25,13 @@ void RCTSetCustomNSURLSessionConfigurationProvider(NSURLSessionConfigurationProv
   urlSessionConfigurationProvider = provider;
 }
 
+static RCTHTTPRequestInterceptor httpRequestInterceptor;
+
+void RCTSetCustomHTTPRequestInterceptor(RCTHTTPRequestInterceptor interceptor)
+{
+  httpRequestInterceptor = interceptor;
+}
+
 @implementation RCTHTTPRequestHandler {
   NSMapTable *_delegates;
   NSURLSession *_session;
@@ -99,7 +106,14 @@ - (NSURLSessionDataTask *)sendRequest:(NSURLRequest *)request withDelegate:(id<R
                                            valueOptions:NSPointerFunctionsStrongMemory
                                                capacity:0];
   }
-  NSURLSessionDataTask *task = [_session dataTaskWithRequest:request];
+  NSURLRequest *finalRequest = request;
+  if (httpRequestInterceptor != nullptr) {
+    NSURLRequest *intercepted = httpRequestInterceptor(request);
+    if (intercepted != nil) {
+      finalRequest = intercepted;
+    }
+  }
+  NSURLSessionDataTask *task = [_session dataTaskWithRequest:finalRequest];
   [_delegates setObject:delegate forKey:task];
   [task resume];
   return task;

packages/react-native/React/Base/RCTMultipartDataTask.h

@@ -7,6 +7,7 @@
 
 #import <Foundation/Foundation.h>
 
+#import <React/RCTDefines.h>
 #import <React/RCTMultipartStreamReader.h>
 
 typedef void (^RCTMultipartDataTaskCallback)(
@@ -16,6 +17,14 @@ typedef void (^RCTMultipartDataTaskCallback)(
     NSError *error,
     BOOL done);
 
+typedef NSURLRequest * _Nullable (^RCTMultipartDataTaskRequestInterceptor)(NSURLRequest *request);
+/**
+ * The block provided via this function can inspect/modify multipart data task
+ * requests before they are sent. Return a modified request to override, or nil
+ * to use the original request unchanged.
+ */
+RCT_EXTERN void RCTSetCustomMultipartDataTaskRequestInterceptor(RCTMultipartDataTaskRequestInterceptor /*interceptor*/);
+
 @interface RCTMultipartDataTask : NSObject
 
 - (instancetype)initWithURL:(NSURL *)url

packages/react-native/React/Base/RCTMultipartDataTask.m

@@ -7,6 +7,13 @@
 
 #import "RCTMultipartDataTask.h"
 
+static RCTMultipartDataTaskRequestInterceptor multipartRequestInterceptor;
+
+void RCTSetCustomMultipartDataTaskRequestInterceptor(RCTMultipartDataTaskRequestInterceptor interceptor)
+{
+  multipartRequestInterceptor = interceptor;
+}
+
 #import "RCTDevSupportHttpHeaders.h"
 
 @interface RCTMultipartDataTask () <NSURLSessionDataDelegate, NSURLSessionDataDelegate>
@@ -43,7 +50,15 @@ - (void)startTask
   NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:_url];
   [request addValue:@"multipart/mixed" forHTTPHeaderField:@"Accept"];
   [[RCTDevSupportHttpHeaders sharedInstance] applyHeadersToRequest:request];
-  NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request];
+  NSURLRequest *finalRequest = request;
+  if (multipartRequestInterceptor != nil) {
+    NSURLRequest *intercepted = multipartRequestInterceptor(request);
+    if (intercepted != nil) {
+      finalRequest = intercepted;
+    }
+  }
+  NSLog(@"[RCTMultipartDataTask] %@ %@", finalRequest.HTTPMethod ?: @"GET", finalRequest.URL.absoluteString);
+  NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:finalRequest];
   [dataTask resume];
   [session finishTasksAndInvalidate];
 }

packages/react-native/React/CoreModules/RCTWebSocketModule.h

@@ -18,6 +18,12 @@ NS_ASSUME_NONNULL_BEGIN
 
 @end
 
+@class SRWebSocket;
+
+typedef SRWebSocket * (^SRWebSocketProvider)(NSURLRequest *request);
+
+RCT_EXTERN void RCTSetCustomSRWebSocketProvider(SRWebSocketProvider provider);
+
 @interface RCTWebSocketModule : RCTEventEmitter
 
 // Register a custom handler for a specific websocket. The handler will be strongly held by the WebSocketModule.

packages/react-native/React/CoreModules/RCTWebSocketModule.mm

@@ -34,6 +34,13 @@ @interface RCTWebSocketModule () <SRWebSocketDelegate, NativeWebSocketModuleSpec
 
 @end
 
+static SRWebSocketProvider srWebSocketProvider;
+
+void RCTSetCustomSRWebSocketProvider(SRWebSocketProvider provider)
+{
+  srWebSocketProvider = provider;
+}
+
 @implementation RCTWebSocketModule {
   NSMutableDictionary<NSNumber *, SRWebSocket *> *_sockets;
   NSMutableDictionary<NSNumber *, id<RCTWebSocketContentHandler>> *_contentHandlers;
@@ -88,7 +95,13 @@ - (void)invalidate
     }];
   }
 
-  SRWebSocket *webSocket = [[SRWebSocket alloc] initWithURLRequest:request protocols:protocols];
+  SRWebSocket *webSocket;
+  if (srWebSocketProvider != nullptr) {
+    webSocket = srWebSocketProvider(request);
+  }
+  if (webSocket == nil) {
+    webSocket = [[SRWebSocket alloc] initWithURLRequest:request protocols:protocols];
+  }
   [webSocket setDelegateDispatchQueue:[self methodQueue]];
   webSocket.delegate = self;
   webSocket.reactTag = @(socketID);

packages/react-native/React/DevSupport/RCTInspectorDevServerHelper.mm

@@ -20,28 +20,33 @@
 #import <jsinspector-modern/InspectorFlags.h>
 
 static NSString *const kDebuggerMsgDisable = @"{ \"id\":1,\"method\":\"Debugger.disable\" }";
+static const int kDefaultMetroPort = 8081;
 
 static NSString *getServerHost(NSURL *bundleURL)
 {
-  NSNumber *port = @8081;
-  NSString *portStr = [[[NSProcessInfo processInfo] environment] objectForKey:@"RCT_METRO_PORT"];
-  if ((portStr != nullptr) && [portStr length] > 0) {
-    port = [NSNumber numberWithInt:[portStr intValue]];
-  }
-  if ([bundleURL port] != nullptr) {
-    port = [bundleURL port];
-  }
   NSString *host = [bundleURL host];
   if (host == nullptr) {
     host = @"localhost";
   }
 
-  // this is consistent with the Android implementation, where http:// is the
-  // hardcoded implicit scheme for the debug server. Note, packagerURL
-  // technically looks like it could handle schemes/protocols other than HTTP,
-  // so rather than force HTTP, leave it be for now, in case someone is relying
-  // on that ability when developing against iOS.
-  return [NSString stringWithFormat:@"%@:%@", host, port];
+  // Use explicit port from URL if available
+  if ([bundleURL port] != nullptr) {
+    return [NSString stringWithFormat:@"%@:%@", host, [bundleURL port]];
+  }
+
+  // Check environment variable
+  NSString *portStr = [[[NSProcessInfo processInfo] environment] objectForKey:@"RCT_METRO_PORT"];
+  if ((portStr != nullptr) && [portStr length] > 0) {
+    return [NSString stringWithFormat:@"%@:%@", host, portStr];
+  }
+
+  // For https, omit port — the scheme implies 443
+  if ([[bundleURL scheme] isEqualToString:@"https"]) {
+    return host;
+  }
+
+  // Default to 8081 for local development (Metro's default port)
+  return [NSString stringWithFormat:@"%@:%d", host, kDefaultMetroPort];
 }
 
 static NSString *getSHA256(NSString *string)
@@ -112,13 +117,15 @@
   NSString *escapedInspectorDeviceId = [getInspectorDeviceId()
       stringByAddingPercentEncodingWithAllowedCharacters:NSCharacterSet.URLQueryAllowedCharacterSet];
 
-  return [NSURL
-      URLWithString:[NSString stringWithFormat:@"http://%@/inspector/device?name=%@&app=%@&device=%@&profiling=%@",
-                                               getServerHost(bundleURL),
-                                               escapedDeviceName,
-                                               escapedAppName,
-                                               escapedInspectorDeviceId,
-                                               isProfilingBuild ? @"true" : @"false"]];
+  NSString *scheme = [bundleURL scheme] != nullptr ? [bundleURL scheme] : @"http";
+  return
+      [NSURL URLWithString:[NSString stringWithFormat:@"%@://%@/inspector/device?name=%@&app=%@&device=%@&profiling=%@",
+                                                      scheme,
+                                                      getServerHost(bundleURL),
+                                                      escapedDeviceName,
+                                                      escapedAppName,
+                                                      escapedInspectorDeviceId,
+                                                      isProfilingBuild ? @"true" : @"false"]];
 }
 
 @implementation RCTInspectorDevServerHelper
@@ -150,7 +157,9 @@ + (void)openDebugger:(NSURL *)bundleURL withErrorMessage:(NSString *)errorMessag
   NSString *escapedInspectorDeviceId = [getInspectorDeviceId()
       stringByAddingPercentEncodingWithAllowedCharacters:NSCharacterSet.URLQueryAllowedCharacterSet];
 
-  NSURL *url = [NSURL URLWithString:[NSString stringWithFormat:@"http://%@/open-debugger?device=%@",
+  NSString *scheme = [bundleURL scheme] != nullptr ? [bundleURL scheme] : @"http";
+  NSURL *url = [NSURL URLWithString:[NSString stringWithFormat:@"%@://%@/open-debugger?device=%@",
+                                                               scheme,
                                                                getServerHost(bundleURL),
                                                                escapedInspectorDeviceId]];
   NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:url];

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/websocket/WebSocketModule.kt

@@ -22,6 +22,7 @@ import com.facebook.react.common.ReactConstants
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.modules.network.CustomClientBuilder
 import com.facebook.react.modules.network.ForwardingCookieHandler
+import com.facebook.react.modules.network.OkHttpClientProvider
 import java.io.IOException
 import java.net.URI
 import java.net.URISyntaxException
@@ -80,7 +81,8 @@ public class WebSocketModule(context: ReactApplicationContext) :
   ) {
     val id = socketID.toInt()
     val okHttpBuilder =
-        OkHttpClient.Builder()
+        OkHttpClientProvider.getOkHttpClient()
+            .newBuilder()
             .connectTimeout(10, TimeUnit.SECONDS)
             .writeTimeout(10, TimeUnit.SECONDS)
             .readTimeout(0, TimeUnit.MINUTES) // Disable timeouts for read
@@ -198,9 +200,6 @@ public class WebSocketModule(context: ReactApplicationContext) :
           }
         },
     )
-
-    // Trigger shutdown of the dispatcher's executor so this process can exit cleanly
-    client.dispatcher().executorService().shutdown()
   }
 
   override fun close(code: Double, reason: String?, socketID: Double) {

packages/react-native/scripts/ios-prebuild/templates/React-umbrella.h

@@ -86,6 +86,7 @@
 #import <React/RCTDevLoadingViewProtocol.h>
 #import <React/RCTDevLoadingViewSetEnabled.h>
 #import <React/RCTDevMenu.h>
+#import <React/RCTDevSupportHttpHeaders.h>
 #import <React/RCTDevSettings.h>
 #import <React/RCTDevToolsRuntimeSettingsModule.h>
 #import <React/RCTDeviceInfo.h>