From db13d8bdfbd49e564452461aeefc6e3024ce4435 Mon Sep 17 00:00:00 2001
From: Guillaume Chervet <guillaume.chervet@gmail.com>
Date: Fri, 23 Feb 2024 16:14:22 +0100
Subject: [PATCH] doc(oidc-client-demo): fix workflow

---
 examples/oidc-client-demo/index.html    |   1 +
 examples/oidc-client-demo/src/index.tsx | 115 +++++++++++++-----------
 2 files changed, 63 insertions(+), 53 deletions(-)

diff --git a/examples/oidc-client-demo/index.html b/examples/oidc-client-demo/index.html
index db3d3a00d..d43e866d5 100644
--- a/examples/oidc-client-demo/index.html
+++ b/examples/oidc-client-demo/index.html
@@ -12,6 +12,7 @@
     <h1>@axa-de/oidc-client</h1>
     <p>OpenId Connect, OIDC client is free under licence MIT. Available on <a href="https://github.com/AxaFrance/oidc-client">github axa oidc-client</a></p>
     <div id="root"></div>
+    <div id="game"></div>
     <script crossorigin type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/examples/oidc-client-demo/src/index.tsx b/examples/oidc-client-demo/src/index.tsx
index 43592f6cd..b81c4f853 100644
--- a/examples/oidc-client-demo/src/index.tsx
+++ b/examples/oidc-client-demo/src/index.tsx
@@ -70,12 +70,52 @@ class Router
 
 }
 
+
+const display = (element:any) => {
+
+    // @ts-ignore
+    element.innerHTML = `<hr/><div>
+            <h2>Game Hack Challenge</h2>
+
+            <p>Game, let's try to make an XSS attacks to retrieve some secure tokens !</p>
+            <p>Service Worker mode is not magic <a href="https://datatracker.ietf.org/doc/html/draft-ietf-oauth-browser-based-apps#payload-new-flow">https://datatracker.ietf.org/doc/html/draft-ietf-oauth-browser-based-apps#payload-new-flow</a>
+            So let try to hack it !
+            </p>
+            <p>Service Worker mode is secure if your follow 2 following rules: </p>
+            <h4>Rule 1: Configure CSP</h4>
+            <p>
+            Add CSP header to forbid to write dynamic iframe with javascript dynamic inside. 
+            You should never add "unsafe-inline" in your CSP header. 
+            <pre>
+            Content-Security-Policy: script-src 'self';  // Secure
+            </pre>
+            <h4>Rule 2: Apply redirect URI before any WebService call</h4>
+            Set up the redirect_uri and redirect_silent_uri at the top level of your javascript application before any XSS attack could be executed.
+            </p>
+            <h4>Let's play</h4>
+            <p>To help you for this game, we set up 'unsafe-eval' in the CSP header to allow the eval function to be executed and allow you to hack the application like a big XSS attack.</p>
+             <pre>
+            Content-Security-Policy: script-src 'self' 'unsafe-eval'; 
+            </pre>
+            <textarea id="xsshack">alert('XSS');</textarea>
+            <button id="buttonxsshack" >Hack</button>
+
+            
+        </div>`;
+    // @ts-ignore
+    window.document.getElementById('buttonxsshack').addEventListener('click',()=> {
+        // @ts-ignore
+        eval(document.getElementById('xsshack').value)
+    });
+}
+
 // @ts-ignore
 export const execute = () => {
 
     const router = new Router();
 
-    const element = document.getElementById("root");
+    const root = document.getElementById("root");
+    const game = document.getElementById("game");
 
     const configuration = {
         client_id: 'interactive.public.short',
@@ -92,92 +132,61 @@ export const execute = () => {
 
     const vanillaOidc = OidcClient.getOrCreate(() => fetch)(configuration);
 
+    // @ts-ignore
+    function logout () {
+        vanillaOidc.logoutAsync();
+    }
+
     console.log(href);
 
     if(href.includes(configuration.redirect_uri)){
         // @ts-ignore
-        element.innerHTML = `<div>
-            <h1>@axa-fr/oidc-client demo</h1>
+        root.innerHTML = `<div>
+            <h1>Login demo</h1>
             <h2>Loading callback</h2>
         </div>`;
         vanillaOidc.loginCallbackAsync().then(()=>{
             router.getCustomHistory().replaceState("/");
+            display(game);
             // @ts-ignore
-            function logout() {
-                vanillaOidc.logoutAsync();
-            }
-            const tokens = vanillaOidc.tokens;
-            // @ts-ignore
-            element.innerHTML = `<div>
-            <h1>@axa-fr/oidc-client demo</h1>
-            <button id="logout" >Logout</button>
-            <h2>Authenticated</h2>
-            <pre>${JSON.stringify(tokens,null,'\t')}</pre>
+            root.innerHTML = `<div>
+            <h3>Login demo Authenticated</h3>
+            <button id="logout">Logout</button>
+            <pre>${JSON.stringify(vanillaOidc.tokens,null,'\t')}</pre>
         </div>`;
-
             // @ts-ignore
             window.document.getElementById('logout').addEventListener('click',logout);
         });
+        return;
     }
 
     vanillaOidc.tryKeepExistingSessionAsync().then(() => {
         const tokens = vanillaOidc.tokens;
         if(tokens){
-
-            // @ts-ignore
-            function logout () {
-                vanillaOidc.logoutAsync();
-            }
+            display(game);
             // @ts-ignore
-            element.innerHTML = `<div>
-            <h2>Demo</h2>
-
-            <p>Game, let's try to make an XSS attacks to retrieve some secure tokens !</p>
-            <p>Service Worker mode is not magic <a href="https://datatracker.ietf.org/doc/html/draft-ietf-oauth-browser-based-apps#payload-new-flow">https://datatracker.ietf.org/doc/html/draft-ietf-oauth-browser-based-apps#payload-new-flow</a>
-            So let try to hack it !
-            </p>
-            <p>Service Worker mode is secure if your follow 2 following rules: </p>
-            <h4>Rule 1: Configure CSP</h4>
-            <p>
-            Add CSP header to forbid to write dynamic iframe with javascript dynamic inside. 
-            You should never add "unsafe-inline" in your CSP header. For this game we set up 'unsafe-eval' in the CSP header to allow the eval function to be executed and allow you to hack the application like a big XSS attack.
-            <pre>
-            Content-Security-Policy: script-src 'self' 'unsafe-eval'; 
-            </pre>
-            <h4>Rule 2: Apply redirect URI before any WebService call</h4>
-            Set up the redirect_uri and redirect_silent_uri at the top level of your javascript application before any XSS attack could be executed.
-            </p>
-            <h4>Let's play</h4>
-            <textarea id="xsshack">alert('XSS');</textarea>
-            <button id="buttonxsshack" >Hack</button>
-            <h3>Authenticated</h3>
+            root.innerHTML = `<div>
+            <h3>Login demo Authenticated</h3>
             <button id="logout">Logout</button>
             <pre>${JSON.stringify(tokens,null,'\t')}</pre>
-            
         </div>`;
             // @ts-ignore
             window.document.getElementById('logout').addEventListener('click',logout);
-            // @ts-ignore
-            window.document.getElementById('buttonxsshack').addEventListener('click',()=> {
-                // @ts-ignore
-                eval(document.getElementById('xsshack').value)
-            });
-
         }
         else {
             // @ts-ignore
             function login()  {
                 // @ts-ignore
-                element.innerHTML = `<div>
-            <h1>@axa-fr/oidc-client demo</h1>
+                root.innerHTML = `<div>
+            <h1>Login demo</h1>
             <h2>Loading</h2>
         </div>`;
                 vanillaOidc.loginAsync("/");
             }
-
+            display(game);
             // @ts-ignore
-            element.innerHTML = `<div>
-            <h1>@axa-fr/oidc-client demo</h1>
+            root.innerHTML = `<div>
+            <h1>Login demo</h1>
             <button id="login" >Login</button>
         </div>`;
             // @ts-ignore