Implement cross-origin restrictions

This CL disables the input if the context is from a different origin
and shows a message that the user needs to start a new conversation.

Fixed: 377227220
Change-Id: I122678e49ac18ad170240357da0d115cd28fd75c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5987815
Commit-Queue: Alex Rudenko <[email protected]>
Reviewed-by: Nikolay Vitkov <[email protected]>

Author: OrKoN

front_end/panels/freestyler/AiAgent.test.ts

@@ -9,7 +9,7 @@ import {
 
 import * as Freestyler from './freestyler.js';
 
-const {AiAgent, ResponseType} = Freestyler;
+const {AiAgent, ResponseType, ConversationContext} = Freestyler;
 
 class AiAgentMock extends AiAgent<unknown> {
   type = Freestyler.AgentType.FREESTYLER;
@@ -225,4 +225,55 @@ describeWithEnvironment('AiAgent', () => {
       ]);
     });
   });
+
+  describe('ConversationContext', () => {
+    function getTestContext(origin: string) {
+      class TestContext extends ConversationContext<undefined> {
+        override getOrigin(): string {
+          return origin;
+        }
+        override getItem(): undefined {
+          return undefined;
+        }
+      }
+      return new TestContext();
+    }
+    it('checks context origins', () => {
+      const tests = [
+        {
+          contextOrigin: 'https://google.test',
+          agentOrigin: 'https://google.test',
+          isAllowed: true,
+        },
+        {
+          contextOrigin: 'https://google.test',
+          agentOrigin: 'about:blank',
+          isAllowed: false,
+        },
+        {
+          contextOrigin: 'https://google.test',
+          agentOrigin: 'https://www.google.test',
+          isAllowed: false,
+        },
+        {
+          contextOrigin: 'https://a.test',
+          agentOrigin: 'https://b.test',
+          isAllowed: false,
+        },
+        {
+          contextOrigin: 'https://a.test',
+          agentOrigin: 'file:///tmp',
+          isAllowed: false,
+        },
+        {
+          contextOrigin: 'https://a.test',
+          agentOrigin: 'http://a.test',
+          isAllowed: false,
+        },
+      ];
+      for (const test of tests) {
+        assert.strictEqual(getTestContext(test.contextOrigin).isOriginAllowed(test.agentOrigin), test.isAllowed);
+      }
+    });
+  });
 });

front_end/panels/freestyler/AiAgent.ts

@@ -151,7 +151,6 @@ export abstract class AiAgent<T> {
   readonly #sessionId: string = crypto.randomUUID();
   #aidaClient: Host.AidaClient.AidaClient;
   #serverSideLoggingEnabled: boolean;
-  #origin?: string;
   abstract readonly preamble: string;
   abstract readonly options: AidaRequestOptions;
   abstract readonly clientFeature: Host.AidaClient.ClientFeature;
@@ -163,6 +162,11 @@ export abstract class AiAgent<T> {
    * the history chuck it created
    */
   #history = new Map<number, ResponseData[]>();
+  /**
+   * Might need to be part of history in case we allow chatting in
+   * historical conversations.
+   */
+  #origin?: string;
 
   constructor(opts: AgentOptions) {
     this.#aidaClient = opts.aidaClient;

front_end/panels/freestyler/FreestylerPanel.test.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import {findMenuItemWithLabel, getMenu} from '../../testing/ContextMenuHelpers.js';
@@ -799,4 +800,42 @@ describeWithEnvironment('FreestylerPanel', () => {
     // We don't show the context menu if there are not entries
     assert.isUndefined(contextMenu);
   });
+  describe('cross-origin', () => {
+    it('blocks input on cross origin requests', async () => {
+      const networkRequest = sinon.createStubInstance(SDK.NetworkRequest.NetworkRequest, {
+        url: 'https://a.test' as Platform.DevToolsPath.UrlString,
+      });
+      UI.Context.Context.instance().setFlavor(SDK.NetworkRequest.NetworkRequest, networkRequest);
+      panel = new Freestyler.FreestylerPanel(mockView, {
+        aidaClient: getTestAidaClient(),
+        aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+        syncInfo: getTestSyncInfo(),
+      });
+      panel.markAsRoot();
+      panel.show(document.body);
+
+      sinon.assert.calledWith(mockView, sinon.match({
+        selectedNetworkRequest: new Freestyler.RequestContext(networkRequest),
+        blockedByCrossOrigin: false,
+      }));
+
+      // Send a query for https://a.test.
+      panel.handleAction('drjones.network-floating-button');
+      mockView.lastCall.args[0].onTextSubmit('test');
+      await drainMicroTasks();
+
+      // Change context to https://b.test.
+      const networkRequest2 = sinon.createStubInstance(SDK.NetworkRequest.NetworkRequest, {
+        url: 'https://b.test' as Platform.DevToolsPath.UrlString,
+      });
+      UI.Context.Context.instance().setFlavor(SDK.NetworkRequest.NetworkRequest, networkRequest2);
+      panel.handleAction('drjones.network-floating-button');
+      await drainMicroTasks();
+
+      sinon.assert.calledWith(mockView, sinon.match({
+        selectedNetworkRequest: new Freestyler.RequestContext(networkRequest2),
+        blockedByCrossOrigin: true,
+      }));
+    });
+  });
 });

front_end/panels/freestyler/FreestylerPanel.ts

@@ -216,6 +216,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
       selectedFile: null,
       selectedNetworkRequest: null,
       selectedAiCallTree: null,
+      blockedByCrossOrigin: false,
     };
   }
 
@@ -433,7 +434,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
     }
 
     this.#viewProps.selectedElement = createNodeContext(selectedElementFilter(ev.data));
-    this.doUpdate();
+    this.#onContextSelectionChanged();
   };
 
   #handleNetworkRequestFlavorChange =
@@ -443,7 +444,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
         }
 
         this.#viewProps.selectedNetworkRequest = Boolean(ev.data) ? new RequestContext(ev.data) : null;
-        this.doUpdate();
+        this.#onContextSelectionChanged();
       };
 
   #handleTraceEntryNodeFlavorChange =
@@ -453,7 +454,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
         }
 
         this.#viewProps.selectedAiCallTree = Boolean(ev.data) ? new CallTreeContext(ev.data) : null;
-        this.doUpdate();
+        this.#onContextSelectionChanged();
       };
 
   #handleUISourceCodeFlavorChange =
@@ -463,7 +464,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
         }
 
         this.#viewProps.selectedFile = Boolean(ev.data) ? new FileContext(ev.data) : null;
-        this.doUpdate();
+        this.#onContextSelectionChanged();
       };
 
   #handleFreestylerEnabledSettingChanged = (): void => {
@@ -568,6 +569,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
     this.#viewOutput.freestylerChatUi?.focusTextInput();
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.FreestylerOpenedFromElementsPanelFloatingButton);
     this.#viewProps.messages = [];
+    this.#onContextSelectionChanged();
     this.doUpdate();
     void this.#doConversation(this.#currentAgent.runFromHistory());
   }
@@ -618,6 +620,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
     }
     this.#viewProps.messages = [];
     this.#viewProps.agentType = undefined;
+    this.#onContextSelectionChanged();
     this.doUpdate();
   }
 
@@ -633,6 +636,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
     this.#viewProps.isLoading = false;
     if (this.#currentAgent) {
       this.#currentAgent = this.#createAgent(this.#currentAgent.type);
+      this.#onContextSelectionChanged();
     }
     this.#cancel();
     this.doUpdate();
@@ -646,12 +650,26 @@ export class FreestylerPanel extends UI.Panel.Panel {
     this.doUpdate();
   }
 
-  async #startConversation(text: string): Promise<void> {
+  #onContextSelectionChanged(): void {
     if (!this.#currentAgent) {
+      this.#viewProps.blockedByCrossOrigin = false;
+      this.doUpdate();
       return;
     }
-    this.#runAbortController = new AbortController();
-    const signal = this.#runAbortController.signal;
+    const currentContext = this.#getConversationContext();
+    if (!currentContext) {
+      this.#viewProps.blockedByCrossOrigin = false;
+      this.doUpdate();
+      return;
+    }
+    this.#viewProps.blockedByCrossOrigin = !currentContext.isOriginAllowed(this.#currentAgent.origin);
+    this.doUpdate();
+  }
+
+  #getConversationContext(): ConversationContext<unknown>|null {
+    if (!this.#currentAgent) {
+      return null;
+    }
     let context: ConversationContext<unknown>|null;
     switch (this.#currentAgent.type) {
       case AgentType.FREESTYLER:
@@ -667,10 +685,21 @@ export class FreestylerPanel extends UI.Panel.Panel {
         context = this.#viewProps.selectedAiCallTree;
         break;
     }
+    return context;
+  }
+
+  async #startConversation(text: string): Promise<void> {
+    if (!this.#currentAgent) {
+      return;
+    }
+    this.#runAbortController = new AbortController();
+    const signal = this.#runAbortController.signal;
+    const context = this.#getConversationContext();
     // If a different context is provided, it must be from the same origin.
     if (context && !context.isOriginAllowed(this.#currentAgent.origin)) {
-      // TODO: inform the user here.
-      // throw new Error('cross-origin context data should not be included');
+      // This error should not be reached. If it happens, some
+      // invariants do not hold anymore.
+      throw new Error('cross-origin context data should not be included');
     }
     const runner = this.#currentAgent.run(text, {
       signal,

front_end/panels/freestyler/components/FreestylerChatUi.test.ts

@@ -60,6 +60,7 @@ css
       isLoading: false,
       canShowFeedbackForm: false,
       userInfo: {},
+      blockedByCrossOrigin: false,
       ...options,
     };
   }

front_end/panels/freestyler/components/FreestylerChatUi.ts

@@ -115,6 +115,10 @@ const UIStringsNotTranslate = {
    *@description Placeholder text for the chat UI input.
    */
   inputPlaceholderForDrJonesPerformanceAgent: 'Ask a question about the selected item and its call tree',
+  /**
+   * @description Placeholder text for the input shown when the conversation is blocked because a cross-origin context was selected.
+   */
+  crossOriginError: 'To talk about data from another origin, start a new chat',
   /**
    *@description Title for the send icon button.
    */
@@ -246,22 +250,6 @@ const str_ = i18n.i18n.registerUIStrings('panels/freestyler/components/Freestyle
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const lockedString = i18n.i18n.lockedString;
 
-function getInputPlaceholderString(state: State, agentType?: AgentType): Platform.UIString.LocalizedString {
-  if (state === State.CONSENT_VIEW || !agentType) {
-    return i18nString(UIStrings.followTheSteps);
-  }
-  switch (agentType) {
-    case AgentType.FREESTYLER:
-      return lockedString(UIStringsNotTranslate.inputPlaceholderForFreestylerAgent);
-    case AgentType.DRJONES_FILE:
-      return lockedString(UIStringsNotTranslate.inputPlaceholderForDrJonesFileAgent);
-    case AgentType.DRJONES_NETWORK_REQUEST:
-      return lockedString(UIStringsNotTranslate.inputPlaceholderForDrJonesNetworkAgent);
-    case AgentType.DRJONES_PERFORMANCE:
-      return lockedString(UIStringsNotTranslate.inputPlaceholderForDrJonesPerformanceAgent);
-  }
-}
-
 export interface Step {
   isLoading: boolean;
   thought?: string;
@@ -321,6 +309,7 @@ export interface Props {
   canShowFeedbackForm: boolean;
   userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'>;
   agentType?: AgentType;
+  blockedByCrossOrigin: boolean;
 }
 
 // The model returns multiline code blocks in an erroneous way with the language being in new line.
@@ -408,6 +397,9 @@ export class FreestylerChatUi extends HTMLElement {
   }
 
   #isTextInputDisabled = (): boolean => {
+    if (this.#props.blockedByCrossOrigin) {
+      return true;
+    }
     const isAidaAvailable = this.#props.aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE;
     const isConsentView = this.#props.state === State.CONSENT_VIEW;
     const showsSideEffects = this.#props.messages.some(message => {
@@ -867,7 +859,7 @@ export class FreestylerChatUi extends HTMLElement {
         <div class=${resourceClass}>${
           this.#props.selectedElement
             ? LitHtml.Directives.until(
-                  Common.Linkifier.Linkifier.linkify(this.#props.selectedElement),
+                  Common.Linkifier.Linkifier.linkify(this.#props.selectedElement.getItem()),
                 )
             : html`<span>${
               lockedString(UIStringsNotTranslate.noElementSelected)
@@ -994,6 +986,27 @@ export class FreestylerChatUi extends HTMLElement {
     }
   };
 
+  #getInputPlaceholderString(): Platform.UIString.LocalizedString {
+    const state = this.#props.state;
+    const agentType = this.#props.agentType;
+    if (state === State.CONSENT_VIEW || !agentType) {
+      return i18nString(UIStrings.followTheSteps);
+    }
+    if (this.#props.blockedByCrossOrigin) {
+      return lockedString(UIStringsNotTranslate.crossOriginError);
+    }
+    switch (agentType) {
+      case AgentType.FREESTYLER:
+        return lockedString(UIStringsNotTranslate.inputPlaceholderForFreestylerAgent);
+      case AgentType.DRJONES_FILE:
+        return lockedString(UIStringsNotTranslate.inputPlaceholderForDrJonesFileAgent);
+      case AgentType.DRJONES_NETWORK_REQUEST:
+        return lockedString(UIStringsNotTranslate.inputPlaceholderForDrJonesNetworkAgent);
+      case AgentType.DRJONES_PERFORMANCE:
+        return lockedString(UIStringsNotTranslate.inputPlaceholderForDrJonesPerformanceAgent);
+    }
+  }
+
   #renderChatInput = (): LitHtml.TemplateResult => {
     // clang-format off
     return html`
@@ -1002,7 +1015,7 @@ export class FreestylerChatUi extends HTMLElement {
           .disabled=${this.#isTextInputDisabled()}
           wrap="hard"
           @keydown=${this.#handleTextAreaKeyDown}
-          placeholder=${getInputPlaceholderString(this.#props.state, this.#props.agentType)}
+          placeholder=${this.#getInputPlaceholderString()}
           jslog=${VisualLogging.textField('query').track({ keydown: 'Enter' })}></textarea>
           ${this.#props.isLoading
             ? html`<devtools-button

front_end/panels/freestyler/components/freestylerChatUi.css

@@ -101,7 +101,7 @@
   }
 
   &:disabled {
-    color: var(--sys-color-state-disabled);
+    color: var(--sys-color-on-surface-subtle);
     background-color: var(--sys-color-state-disabled-container);
     border-color: transparent;
   }

front_end/ui/components/docs/freestyler/basic.ts

@@ -59,6 +59,7 @@ const component = new Freestyler.FreestylerChatUi({
   isLoading: false,
   canShowFeedbackForm: false,
   userInfo: {},
+  blockedByCrossOrigin: false,
 });
 
 document.getElementById('container')?.appendChild(component);

front_end/ui/components/docs/freestyler/empty_state.ts

@@ -34,6 +34,7 @@ const component = new Freestyler.FreestylerChatUi({
   isLoading: false,
   canShowFeedbackForm: false,
   userInfo: {},
+  blockedByCrossOrigin: false,
 });
 
 document.getElementById('container')?.appendChild(component);