fix: prevent transitive importing of entrypoints (#184)

Author: chrismwendt

src/config/link.entry.js

@@ -0,0 +1 @@
+window.EXTENSION_ENV = 'LINK'

src/config/options.entry.js

@@ -0,0 +1 @@
+window.EXTENSION_ENV = 'OPTIONS'

src/extension/envAssertion.ts

@@ -0,0 +1,11 @@
+export function assertEnv(env: typeof window['EXTENSION_ENV']): void {
+    if (window.EXTENSION_ENV !== env) {
+        throw new Error(
+            'Detected transitive import of an entrypoint! ' +
+                window.EXTENSION_ENV +
+                ' attempted to import a file that is only intended to be imported by ' +
+                env +
+                '.'
+        )
+    }
+}

src/extension/scripts/background.tsx

@@ -15,8 +15,11 @@ import storage, { defaultStorageItems } from '../../browser/storage'
 import * as tabs from '../../browser/tabs'
 import initializeCli from '../../libs/cli'
 import { resolveClientConfiguration } from '../../shared/backend/server'
-import { isBackground } from '../../shared/context'
+import { ExtensionConnectionInfo, onFirstMessage } from '../../shared/messaging'
 import { DEFAULT_SOURCEGRAPH_URL, setSourcegraphUrl } from '../../shared/util/context'
+import { assertEnv } from '../envAssertion'
+
+assertEnv('BACKGROUND')
 
 let customServerOrigins: string[] = []
 
@@ -439,52 +442,29 @@ const spawnAndConnect = ({
         connectPortAndWorker(port, worker)
     })
 
-/**
- * The information necessary to connect to a Sourcegraph extension.
- */
-export interface ExtensionConnectionInfo {
-    extensionID: string
-    jsBundleURL: string
-}
-
-/**
- * Executes the callback only on the first message that's received on the port.
- */
-export const onFirstMessage = (port: chrome.runtime.Port, callback: (message: any) => void) => {
-    const cb = message => {
-        port.onMessage.removeListener(cb)
-        callback(message)
-    }
-    port.onMessage.addListener(cb)
-}
-
-// This must not execute anywhere but the background script, otherwise messages
-// will get duplicated and cause all kinds of unintuitive behavior.
-if (isBackground) {
-    // This is the bridge between content scripts (that want to connect to Sourcegraph extensions) and the background
-    // script (that spawns JS bundles or connects to WebSocket endpoints).:
-    chrome.runtime.onConnect.addListener(port => {
-        // When a content script wants to create a connection to a Sourcegraph extension, it first connects to the
-        // background script on a random port and sends a message containing the platform information for that
-        // Sourcegraph extension (e.g. a JS bundle at localhost:1234/index.js).
-        onFirstMessage(port, (connectionInfo: ExtensionConnectionInfo) => {
-            // The background script receives the message and attempts to spawn the
-            // extension:
-            spawnAndConnect({ connectionInfo, port }).then(
-                // If spawning succeeds, the background script sends {} (so the content script knows it succeeded) and
-                // the port communicates using the internal Sourcegraph extension RPC API after that.
-                () => {
-                    // Success is represented by the absence of an error
-                    port.postMessage({})
-                },
-                // If spawning fails, the background script sends { error } (so the content script knows it failed) and
-                // the port is immediately disconnected. There is always a 1-1 correspondence between ports and content
-                // scripts, so this won't disrupt any other connections.
-                error => {
-                    port.postMessage({ error })
-                    port.disconnect()
-                }
-            )
-        })
+// This is the bridge between content scripts (that want to connect to Sourcegraph extensions) and the background
+// script (that spawns JS bundles or connects to WebSocket endpoints).:
+chrome.runtime.onConnect.addListener(port => {
+    // When a content script wants to create a connection to a Sourcegraph extension, it first connects to the
+    // background script on a random port and sends a message containing the platform information for that
+    // Sourcegraph extension (e.g. a JS bundle at localhost:1234/index.js).
+    onFirstMessage(port, (connectionInfo: ExtensionConnectionInfo) => {
+        // The background script receives the message and attempts to spawn the
+        // extension:
+        spawnAndConnect({ connectionInfo, port }).then(
+            // If spawning succeeds, the background script sends {} (so the content script knows it succeeded) and
+            // the port communicates using the internal Sourcegraph extension RPC API after that.
+            () => {
+                // Success is represented by the absence of an error
+                port.postMessage({})
+            },
+            // If spawning fails, the background script sends { error } (so the content script knows it failed) and
+            // the port is immediately disconnected. There is always a 1-1 correspondence between ports and content
+            // scripts, so this won't disrupt any other connections.
+            error => {
+                port.postMessage({ error })
+                port.disconnect()
+            }
+        )
     })
-}
+})

src/extension/scripts/inject.tsx

@@ -20,6 +20,9 @@ import { injectBitbucketServer } from '../../libs/bitbucket/inject'
 import { injectGitHubApplication } from '../../libs/github/inject'
 import { injectPhabricatorApplication } from '../../libs/phabricator/app'
 import { injectSourcegraphApp } from '../../libs/sourcegraph/inject'
+import { assertEnv } from '../envAssertion'
+
+assertEnv('CONTENT')
 
 /**
  * Main entry point into browser extension.

src/extension/scripts/link.tsx

@@ -1,4 +1,7 @@
 import storage from '../../browser/storage'
+import { assertEnv } from '../envAssertion'
+
+assertEnv('LINK')
 
 const searchParams = new URLSearchParams(window.location.search)
 

src/extension/scripts/options.tsx

@@ -6,6 +6,9 @@ import * as React from 'react'
 import { render } from 'react-dom'
 import storage from '../../browser/storage'
 import { OptionsDashboard } from '../../shared/components/options/OptionsDashboard'
+import { assertEnv } from '../envAssertion'
+
+assertEnv('OPTIONS')
 
 const inject = () => {
     const injectDOM = document.createElement('div')

src/shared/backend/PortMessageTransports.ts

@@ -7,7 +7,7 @@ import {
     MessageReader,
     MessageWriter,
 } from 'sourcegraph/module/protocol/jsonrpc2/transport'
-import { ExtensionConnectionInfo } from '../../extension/scripts/background'
+import { ExtensionConnectionInfo } from '../messaging'
 
 class PortMessageReader extends AbstractMessageReader implements MessageReader {
     private pending: Message[] = []

src/shared/backend/extensions.ts

@@ -11,8 +11,8 @@ import {
     Settings,
 } from '@sourcegraph/extensions-client-common/lib/settings'
 import { LoadingSpinner } from '@sourcegraph/react-loading-spinner'
-import * as JSONC from '@sqs/jsonc-parser'
 import { applyEdits } from '@sqs/jsonc-parser'
+import * as JSONC from '@sqs/jsonc-parser'
 import { removeProperty, setProperty } from '@sqs/jsonc-parser/lib/edit'
 import { isEqual } from 'lodash'
 import Alert from 'mdi-react/AlertIcon'
@@ -25,8 +25,7 @@ import { TextDocumentDecoration } from 'sourcegraph/module/protocol/plainTypes'
 import uuid from 'uuid'
 import { Disposable } from 'vscode-languageserver'
 import storage, { StorageItems } from '../../browser/storage'
-import { onFirstMessage } from '../../extension/scripts/background'
-import { ExtensionConnectionInfo } from '../../extension/scripts/background'
+import { ExtensionConnectionInfo, onFirstMessage } from '../messaging'
 import { getContext } from './context'
 import { createAggregateError, isErrorLike } from './errors'
 import { queryGraphQL } from './graphql'

src/extension/scripts/extensions.tsx …onents/options/BrowserSettingsEditor.tsxsrc/extension/scripts/extensions.tsx renamed to src/shared/components/options/BrowserSettingsEditor.tsx src/extension/scripts/extensions.tsx renamed to src/shared/components/options/BrowserSettingsEditor.tsx

@@ -1,10 +1,10 @@
 // We want to polyfill first.
-import '../../config/polyfill'
+import '../../../config/polyfill'
 
 import * as React from 'react'
 import { Button, FormGroup, Input, Label } from 'reactstrap'
 import { Subscription } from 'rxjs'
-import storage from '../../browser/storage'
+import storage from '../../../browser/storage'
 
 interface State {
     clientSettings: string