agentic-browser-context-injection-demo/index.html at main · agentoverlay/agentic-browser-context-injection-demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Authorization Demo</title>
  <script>
    // Helper: Run this in your browser console to inject context.
    // For example, open the console and type: injectContext();
    window.injectContext = function() {
      window.myAppContext = {
        sessionType: 'AI',
        agentId: 'agent-123',
        sessionToken: 'abc123',
        serviceEndpoint: 'http://localhost:3005/authorize'
      };
      console.log('Context injected:', window.myAppContext);
    };

    // Function to call the backend authorization endpoint using the context
    async function requestAuthorization(context, scope) {
      // Use the injected service endpoint instead of a hard-coded URL
      const authorizationEndpoint = context.serviceEndpoint;

      // The payload includes everything needed for the back end
      const payload = {
        agentId: context.agentId,
        sessionType: context.sessionType,
        sessionToken: context.sessionToken,
        scope: scope
      };

      const response = await fetch(authorizationEndpoint, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });

      if (!response.ok) {
        throw new Error('Failed to get authorization');
      }
      return await response.json();
    }

    // On DOM ready, inject the "Click Me!" button
    document.addEventListener('DOMContentLoaded', () => {
      const button = document.createElement('button');
      button.textContent = 'Click Me!';
      button.style.fontSize = '16px';
      button.style.padding = '10px 20px';
      button.style.margin = '20px';
      document.body.appendChild(button);

      button.addEventListener('click', async (event) => {
        event.preventDefault();

        // For demonstration, let's define the scope here in the front end:
        const requiredScope = 'read:importantData';

        // If context is injected, require authorization before proceeding.
        if (window.myAppContext) {
          console.log('Injected context detected. Initiating authorization process...');
          try {
            const result = await requestAuthorization(window.myAppContext, requiredScope);
            if (result.authorized) {
              console.log('Authorization approved. Executing secure action...');
              alert('Secure action executed (authorization approved).');
              // ... Place your secure action code here.
            } else {
              console.warn('Authorization denied.');
              alert('Secure action aborted (authorization denied).');
            }
          } catch (error) {
            console.error('Error during authorization:', error);
            alert('There was an error with the authorization process.');
          }
        } else {
          // No context injected: simply run the normal process.
          console.log('No injected context found. Running normal action.');
          alert('Normal action executed (no authorization required).');
          // ... Place your normal action code here.
        }
      });
    });
  </script>
</head>
<body>
  <!-- The "Click Me!" button is dynamically added -->
  <p>
    <strong>How to test:</strong> Open your browser's console and run:
    <code>injectContext()</code>. Then click the button. The scope is
    <code>read:importantData</code> (hard-coded in the button's listener).
  </p>
</body>
</html>