[0.83] Add support for custom header in devsupport (#55722)

Co-authored-by: Riccardo Cipolleschi <cipolleschi@meta.com>
resolved: #55575
resolved: #55576
resolved: #55577
Fix per-tap OkHttpClient allocation in RedBoxContentView (#55578)
resolved: #55578
Fix thread-safety race in InspectorNetworkHelper (#55579)
resolved: #55579
resolved: #55580
resolved: #55581
resolved: #55582
resolved: #55586
resolved: #55607
resolved: #55608
resolved: #55609
resolved: #55610
resolved: #55611
resolved: #55612
resolved: #55790

Author: cortinico

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/Libraries/WebSocket/RCTReconnectingWebSocket.m

@@ -9,6 +9,7 @@
 
 #import <React/RCTConvert.h>
 #import <React/RCTDefines.h>
+#import <React/RCTDevSupportHttpHeaders.h>
 
 #import <SocketRocket/SRWebSocket.h>
 
@@ -46,7 +47,9 @@ - (void)start
 {
   [self stop];
   _stopped = NO;
-  _socket = [[SRWebSocket alloc] initWithURL:_url];
+  NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:_url];
+  [[RCTDevSupportHttpHeaders sharedInstance] applyHeadersToRequest:request];
+  _socket = [[SRWebSocket alloc] initWithURLRequest:request];
   _socket.delegate = self;
   [_socket setDelegateDispatchQueue:_delegateDispatchQueue];
   [_socket open];

packages/react-native/React/Base/RCTBundleURLProvider.mm

@@ -10,6 +10,7 @@
 #import "RCTConstants.h"
 #import "RCTConvert.h"
 #import "RCTDefines.h"
+#import "RCTDevSupportHttpHeaders.h"
 #import "RCTLog.h"
 
 #import <jsinspector-modern/InspectorFlags.h>
@@ -93,9 +94,10 @@ + (BOOL)isPackagerRunning:(NSString *)hostPort scheme:(NSString *)scheme
   NSURL *url = [serverRootWithHostPort(hostPort, scheme) URLByAppendingPathComponent:@"status"];
 
   NSURLSession *session = [NSURLSession sharedSession];
-  NSURLRequest *request = [NSURLRequest requestWithURL:url
-                                           cachePolicy:NSURLRequestUseProtocolCachePolicy
-                                       timeoutInterval:10];
+  NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:url
+                                                         cachePolicy:NSURLRequestUseProtocolCachePolicy
+                                                     timeoutInterval:10];
+  [[RCTDevSupportHttpHeaders sharedInstance] applyHeadersToRequest:request];
   __block NSURLResponse *response;
   __block NSData *data;
 

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

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import <Foundation/Foundation.h>
+
+/**
+ * Thread-safe singleton that holds custom HTTP headers to be applied
+ * to all devsupport network requests (bundle fetches, packager status
+ * checks, inspector and HMR WebSocket connections).
+ */
+@interface RCTDevSupportHttpHeaders : NSObject
+
++ (instancetype)sharedInstance;
+
+- (void)addRequestHeader:(NSString *)name value:(NSString *)value;
+- (void)removeRequestHeader:(NSString *)name;
+- (NSDictionary<NSString *, NSString *> *)allHeaders;
+- (void)applyHeadersToRequest:(NSMutableURLRequest *)request;
+
+@end

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

@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import "RCTDevSupportHttpHeaders.h"
+
+@implementation RCTDevSupportHttpHeaders {
+  NSMutableDictionary<NSString *, NSString *> *_headers;
+  dispatch_queue_t _queue;
+}
+
++ (instancetype)sharedInstance
+{
+  static RCTDevSupportHttpHeaders *sharedInstance;
+  static dispatch_once_t onceToken;
+  dispatch_once(&onceToken, ^{
+    sharedInstance = [[RCTDevSupportHttpHeaders alloc] init];
+  });
+  return sharedInstance;
+}
+
+- (instancetype)init
+{
+  if (self = [super init]) {
+    _headers = [NSMutableDictionary new];
+    _queue = dispatch_queue_create("com.facebook.react.RCTDevSupportHttpHeaders", DISPATCH_QUEUE_SERIAL);
+  }
+  return self;
+}
+
+- (void)addRequestHeader:(NSString *)name value:(NSString *)value
+{
+  dispatch_sync(_queue, ^{
+    self->_headers[name] = value;
+  });
+}
+
+- (void)removeRequestHeader:(NSString *)name
+{
+  dispatch_sync(_queue, ^{
+    [self->_headers removeObjectForKey:name];
+  });
+}
+
+- (NSDictionary<NSString *, NSString *> *)allHeaders
+{
+  __block NSDictionary<NSString *, NSString *> *snapshot;
+  dispatch_sync(_queue, ^{
+    snapshot = [self->_headers copy];
+  });
+  return snapshot;
+}
+
+- (void)applyHeadersToRequest:(NSMutableURLRequest *)request
+{
+  NSDictionary<NSString *, NSString *> *headers = [self allHeaders];
+  [headers enumerateKeysAndObjectsUsingBlock:^(NSString *headerName, NSString *headerValue, BOOL *stop) {
+    [request setValue:headerValue forHTTPHeaderField:headerName];
+  }];
+}
+
+@end

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;
+}
+
 @interface RCTMultipartDataTask () <NSURLSessionDataDelegate, NSURLSessionDataDelegate>
 
 @end
@@ -40,7 +47,15 @@ - (void)startTask
                                                    delegateQueue:nil];
   NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:_url];
   [request addValue:@"multipart/mixed" forHTTPHeaderField:@"Accept"];
-  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.