Merge branch 'stage-6-extras' of https://github.com/panva/jsonwebtoken.github.io into stage-6-pr-305

Author: sebadoom

src/utils.js

@@ -1,6 +1,7 @@
 import { KEYUTIL } from 'jsrsasign';
 import log from 'loglevel';
 import clipboard from 'clipboard-polyfill';
+import { isToken } from './editor/jwt.js';
 
 export function httpGet(url, cache = true) {
   return new Promise((resolve, reject) => {
@@ -117,6 +118,25 @@ export function copyTokenLink(token, publicKeyOptional) {
   return url;
 }
 
+function regexp(body, flag) {
+  return new RegExp("[?&#]" + body + "(?:=([^&#]*)|&|#|$)", flag);
+}
+
+const tokenRegexp = regexp('((?:id_|access_)?token|value)', 'g');
+
+export function getTokensFromLocation() {
+  const { href } = window.location;
+  let name, value;
+  const val = {};
+
+  try {
+    while ([, name, value] = tokenRegexp.exec(href)) {
+      if(isToken(value)) val[name] = value;
+    }
+  } catch (err) {}
+  return val;
+}
+
 // https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
 export function getParameterByName(name, url) {
   if(!url) {
@@ -125,16 +145,16 @@ export function getParameterByName(name, url) {
 
   name = name.replace(/[\[\]]/g, "\\$&");
 
-  const regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)");
+  const regex = regexp(name);
   const results = regex.exec(url);
   if(!results) {
     return null;
   }
-  if(!results[2]) {
+  if(!results[1]) {
     return '';
   }
 
-  return decodeURIComponent(results[2].replace(/\+/g, " "));
+  return decodeURIComponent(results[1].replace(/\+/g, " "));
 }
 
 export function isWideScreen() {

src/website/index.js

@@ -5,7 +5,7 @@ import { setupTokenEditor, setTokenEditorValue } from '../editor';
 import { setupJwtCounter } from './counter.js';
 import { setupSmoothScrolling } from './smooth-scrolling.js';
 import { setupHighlighting } from './highlighting.js';
-import { getParameterByName } from '../utils.js';
+import { getParameterByName, getTokensFromLocation } from '../utils.js';
 import { isChrome, isFirefox } from './utils.js';
 import { setupShareJwtButton } from '../share-button.js';
 import { 
@@ -22,20 +22,17 @@ import {
 
 function parseLocationQuery() {
   const publicKey = getParameterByName('publicKey');
-  const value = getParameterByName('value');
-  const token = getParameterByName('token');
+  const { id_token, access_token, value, token } = getTokensFromLocation();
 
   let scroll = false;
   if(publicKey) {
     publicKeyTextArea.value = publicKey;
     scroll = true;
   }
-  if(value) {
-    setTokenEditorValue(value);
-    scroll = true;
-  }
-  if(token) {
-    setTokenEditorValue(token);
+
+  const val = value || token || id_token || access_token;
+  if(val) {
+    setTokenEditorValue(val);
     scroll = true;
   }
 

test/functional/editor.js

@@ -1151,4 +1151,23 @@ describe('Editor', function() {
       }
     );
   });
+  
+  describe('parsing tokens from window.location.href', () => {
+    const token = 'eyJhbGciOiJub25lIiwidHlwIjoiSldUIn0.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.';
+    ['token', 'value', 'id_token', 'access_token'].forEach((key) => {
+      [
+        `/?${key}=${token}`,
+        `/#${key}=${token}`,
+        `/?foo=bar&${key}=${token}`,
+        `/#foo=bar&${key}=${token}`,
+      ].forEach((structure, i) => {
+        it(`Should parse ${key} from window.location.href [${i}]`, async function () {
+          await this.page.goto(`http://localhost:8000${structure}${key}${i}`);
+          expect(await this.page.evaluate(() => {
+            return window.test.tokenEditor.getValue();
+          })).to.equal(`${token}${key}${i}`);
+        });
+      })
+    });
+  });
 });