feat: ability to send headers via ws connection to browser in node.js…

… environment (#9314) **What kind of change does this PR introduce?** I have browsers pool in some cloud. I want that only users with access will be able to connect to them. So they must provide token through headers. But puppeteer does not allow to send headers when connected to browser by ws connection. So I added this feature. Closes #7218
puppeteer · Nov 24, 2022 · 937fffa · 937fffa
1 parent da92055
commit 937fffa
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 12 deletions.
diff --git a/docs/api/puppeteer.connectoptions.headers.md b/docs/api/puppeteer.connectoptions.headers.md
@@ -0,0 +1,19 @@
+---
+sidebar_label: ConnectOptions.headers
+---
+
+# ConnectOptions.headers property
+
+Headers to use for the web socket connection.
+
+#### Signature:
+
+```typescript
+interface ConnectOptions {
+  headers?: Record<string, string>;
+}
+```
+
+## Remarks
+
+Only works in the Node.js environment.
diff --git a/docs/api/puppeteer.connectoptions.md b/docs/api/puppeteer.connectoptions.md
@@ -14,8 +14,9 @@ export interface ConnectOptions extends BrowserConnectOptions
 
 ## Properties
 
-| Property                                                              | Modifiers | Type                                                      | Description       | Default |
-| --------------------------------------------------------------------- | --------- | --------------------------------------------------------- | ----------------- | ------- |
-| [browserURL?](./puppeteer.connectoptions.browserurl.md)               |           | string                                                    | <i>(Optional)</i> |         |
-| [browserWSEndpoint?](./puppeteer.connectoptions.browserwsendpoint.md) |           | string                                                    | <i>(Optional)</i> |         |
-| [transport?](./puppeteer.connectoptions.transport.md)                 |           | [ConnectionTransport](./puppeteer.connectiontransport.md) | <i>(Optional)</i> |         |
+| Property                                                              | Modifiers | Type                                                      | Description                                                     | Default |
+| --------------------------------------------------------------------- | --------- | --------------------------------------------------------- | --------------------------------------------------------------- | ------- |
+| [browserURL?](./puppeteer.connectoptions.browserurl.md)               |           | string                                                    | <i>(Optional)</i>                                               |         |
+| [browserWSEndpoint?](./puppeteer.connectoptions.browserwsendpoint.md) |           | string                                                    | <i>(Optional)</i>                                               |         |
+| [headers?](./puppeteer.connectoptions.headers.md)                     |           | Record&lt;string, string&gt;                              | <i>(Optional)</i> Headers to use for the web socket connection. |         |
+| [transport?](./puppeteer.connectoptions.transport.md)                 |           | [ConnectionTransport](./puppeteer.connectiontransport.md) | <i>(Optional)</i>                                               |         |
diff --git a/packages/puppeteer-core/src/common/BrowserConnector.ts b/packages/puppeteer-core/src/common/BrowserConnector.ts
@@ -24,6 +24,8 @@ import {Connection} from './Connection.js';
 import {ConnectionTransport} from './ConnectionTransport.js';
 import {getFetch} from './fetch.js';
 import {Viewport} from './PuppeteerViewport.js';
+
+import type {ConnectOptions} from './Puppeteer.js';
 /**
  * Generic browser options that can be passed when launching any browser or when
  * connecting to an existing browser instance.
@@ -73,18 +75,15 @@ const getWebSocketTransportClass = async () => {
  * @internal
  */
 export async function _connectToCDPBrowser(
-  options: BrowserConnectOptions & {
-    browserWSEndpoint?: string;
-    browserURL?: string;
-    transport?: ConnectionTransport;
-  }
+  options: BrowserConnectOptions & ConnectOptions
 ): Promise<CDPBrowser> {
   const {
     browserWSEndpoint,
     browserURL,
     ignoreHTTPSErrors = false,
     defaultViewport = {width: 800, height: 600},
     transport,
+    headers = {},
     slowMo = 0,
     targetFilter,
     _isPageTarget: isPageTarget,
@@ -102,7 +101,7 @@ export async function _connectToCDPBrowser(
   } else if (browserWSEndpoint) {
     const WebSocketClass = await getWebSocketTransportClass();
     const connectionTransport: ConnectionTransport =
-      await WebSocketClass.create(browserWSEndpoint);
+      await WebSocketClass.create(browserWSEndpoint, headers);
     connection = new Connection(browserWSEndpoint, connectionTransport, slowMo);
   } else if (browserURL) {
     const connectionURL = await getWSEndpoint(browserURL);

diff --git a/packages/puppeteer-core/src/common/NodeWebSocketTransport.ts b/packages/puppeteer-core/src/common/NodeWebSocketTransport.ts
@@ -21,14 +21,18 @@ import {packageVersion} from '../generated/version.js';
  * @internal
  */
 export class NodeWebSocketTransport implements ConnectionTransport {
-  static create(url: string): Promise<NodeWebSocketTransport> {
+  static create(
+    url: string,
+    headers?: Record<string, string>
+  ): Promise<NodeWebSocketTransport> {
     return new Promise((resolve, reject) => {
       const ws = new NodeWebSocket(url, [], {
         followRedirects: true,
         perMessageDeflate: false,
         maxPayload: 256 * 1024 * 1024, // 256Mb
         headers: {
           'User-Agent': `Puppeteer ${packageVersion}`,
+          ...headers,
         },
       });
 

diff --git a/packages/puppeteer-core/src/common/Puppeteer.ts b/packages/puppeteer-core/src/common/Puppeteer.ts
@@ -42,6 +42,12 @@ export interface ConnectOptions extends BrowserConnectOptions {
   browserWSEndpoint?: string;
   browserURL?: string;
   transport?: ConnectionTransport;
+  /**
+   * Headers to use for the web socket connection.
+   * @remarks
+   * Only works in the Node.js environment.
+   */
+  headers?: Record<string, string>;
 }
 
 /**