Enable WebChannel messages for custom FxA servers

[eoger]

Right now setting up a different FxA server on Fenix will not work, because WebChannel messages can't get through. (JavaScript Error: "account_updates error message. No Such Channel")

This is caused by the fxawebchannel.js content script only getting injected on the prod server pages.

What we could do is either:

• Inject the script everywhere and move the origin checking in FxaWebChannelFeature.kt.
• Somehow find a way to change the content script URL matching at runtime.
• Ensure a user can still log-in when WebChannel is not working.

@grigoryk @csadilek @vladikoff thoughts?

┆Issue is synchronized with this Jira Task

[rfk]

In a different (possibly out-of-band?) conversation, I recall @csadilek suggesting to make a couple of different copies of the fxa-webchannel support module - one that is used by default and hard-codes the prod FxA domain, one that can be used when configured to talk to stage, and perhaps one that has slightly different perf characteristics that can be used with any arbitrary domain. This sounds like a lot of potential for code duplication but perhaps we could avoid that with careful factoring.

Another option is to disable webchannels for non-prod servers and fall back to the plain OAuth flow, at the cost of losing CWTS during signup. We probably shouldn't do this for stage (since it changes QA experience between stage and prod) but we could do it for self-hosters.

[eoger]

In a different (possibly out-of-band?) conversation, I recall @csadilek suggesting to make a couple of different copies of the fxa-webchannel support module - one that is used by default and hard-codes the prod FxA domain, one that can be used when configured to talk to stage, and perhaps one that has slightly different perf characteristics that can be used with any arbitrary domain. This sounds like a lot of potential for code duplication but perhaps we could avoid that with careful factoring.

FYIW I'd be fine with either making a version of the extension or even changing the behavior the current one to set itself up (with the connectNative call and other listeners) only after it receives a WebChannelMessageToChrome event. If I remember right FxA always starts off the communication as the chrome code cannot send a message out of the blue anyway.

[rfk]

If I remember right FxA always starts off the communication as the chrome code cannot send a
message out of the blue anyway.

This is accurate.

[eoger]

even changing the behavior the current one

Just be extra clear, this would change the current extension to be injected for all domains, while the Kotlin code would have to grow the capability to decide whether or not it wants to listen from a particular domain. (e.g. by comparing msg.origin with origin(fxAccountManager.getContentUrl))

[csadilek]

In a different (possibly out-of-band?) conversation, I recall @csadilek suggesting to make a couple of different copies of the fxa-webchannel support module...

Other conversation was here: #6012. I think we can combine and close one of these tickets.

Duplication can be minimal and would definitely address this concern: #6012 (comment)

But other solutions welcome, of course :).

[eoger]

Summary of the latest developments:

• Made a POC branch where we generate an extension at runtime containing the "right" manifest. It's a bit crazy but it does work.
• However we may a found a better way: lgreco on Slack suggested we could use contentScripts.register(). @csadilek says we could load a background script on every webpage, that checks the content URL and sends a message back to Kotlin to ask whether or not it can use contentScripts.register.

[eoger]

Renaming the ticket to acknowledge this ticket is about allowing arbitrary FxA servers to send WebChannel messages to Kotlin. #6012 is for Mozilla-owned non-prod servers.

[rfk]

Inject the script everywhere and move the origin checking in FxaWebChannelFeature.kt.

We've done part of this now - the origin-checking is now performed in FxaWebChannelFeature.kt, but we're only injecting the webextension on a handful of known domains rather than injecting it everywhere.

[jackyzy823]

Hello there. I'm working on self hosting fxa stack and i try to use @eoger 's second method to make fenix work with self hosting fxa.

* However we may a found a better way: lgreco on Slack suggested we could use [contentScripts.register()](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/contentScripts). @csadilek says we could load a background script on every webpage, that checks the content URL and sends a message back to Kotlin to ask whether or not it can use `contentScripts.register`.

However I cannot make this work.
Here's my changes.

diff --git a/components/feature/accounts/src/main/assets/extensions/fxawebchannel/background.js b/components/feature/accounts/src/main/assets/extensions/fxawebchannel/background.js
new file mode 100644
index 000000000..b3ce7148e
--- /dev/null
+++ b/components/feature/accounts/src/main/assets/extensions/fxawebchannel/background.js
@@ -0,0 +1,18 @@
+/*
+Establish communication with native application.
+*/
+let port = browser.runtime.connectNative("mozacWebchannelBackground");
+/*
+Handle messages from native application, dispatch them to FxA via an event.
+*/
+port.onMessage.addListener( event => {
+  if(event.type == "overrideFxAServer"){
+    // TODO: unregister
+    browser.contentScripts.register({
+      "matches": [ event.url+"/*" ],
+      "js": [{file: "fxawebchannel.js"}],
+      "runAt": "document_start"
+    })
+  }
+});
+
diff --git a/components/feature/accounts/src/main/assets/extensions/fxawebchannel/manifest.json b/components/feature/accounts/src/main/assets/extensions/fxawebchannel/manifest.json
index 007b9bc1c..264179844 100644
--- a/components/feature/accounts/src/main/assets/extensions/fxawebchannel/manifest.json
+++ b/components/feature/accounts/src/main/assets/extensions/fxawebchannel/manifest.json
@@ -15,6 +15,9 @@
       "run_at": "document_start"
     }
   ],
+  "background": {
+    "scripts": ["background.js"]
+  },
   "permissions": [
     "mozillaAddons",
     "geckoViewAddons",
diff --git a/components/feature/accounts/src/main/java/mozilla/components/feature/accounts/FxaWebChannelFeature.kt b/components/feature/accounts/src/main/java/mozilla/components/feature/accounts/FxaWebChannelFeature.kt
index 421f4fd1a..263d1bac6 100644
--- a/components/feature/accounts/src/main/java/mozilla/components/feature/accounts/FxaWebChannelFeature.kt
+++ b/components/feature/accounts/src/main/java/mozilla/components/feature/accounts/FxaWebChannelFeature.kt
@@ -73,7 +73,7 @@ class FxaWebChannelFeature(
 
     override fun start() {
         extensionController.install(runtime)
-
+	extensionController.registerBackgroundMessageHandler(WebChannelViewBackgroundMessageHandler(serverConfig),"mozacWebchannelBackground")
         scope = store.flowScoped { flow ->
             flow.mapNotNull { state -> state.findCustomTabOrSelectedTab(customTabSessionId) }
                 .ifChanged { it.engineState.engineSession }
@@ -161,6 +161,17 @@ class FxaWebChannelFeature(
         extensionController.registerContentMessageHandler(engineSession, messageHandler)
     }
 
+    private class WebChannelViewBackgroundMessageHandler(
+        private val serverConfig: ServerConfig
+    ) : MessageHandler {
+        @SuppressWarnings("ComplexMethod")
+        override fun onPortConnected(port: Port) {
+            logger.debug("in  WebChannelViewBackgroundMessageHandler onPortConnected begin")
+            port.postMessage(JSONObject().put("type", "overrideFxAServer").put("url",serverConfig.contentUrl))
+            logger.debug("in  WebChannelViewBackgroundMessageHandler onPortConnected done")
+        }
+    }
+
     @VisibleForTesting
     companion object {
         private val logger = Logger("mozac-fxawebchannel")

Any help would be appericated. Thanks.