@nice-digital/global-nav 7.1.1202 → 7.1.1203-GN-264-load-aws-chal

package/README.md

@@ -313,6 +313,13 @@ For a full list of all the available props, see the [props section](#props) belo
   
 Optional spacing between page content and footer back-to-top link.
 
+###### Main.awsWafScriptURL
+
+- Type: `String | false`
+- Default: `undefined`
+
+See [Header.awsWafScriptURL](#headerawswafscripturl).
+
 ##### Header props
 
 ###### Header.service
@@ -663,6 +670,27 @@ If the authentication provider has been set to "idam", then an array of links mu
 
 The displayName is the user's name and must be provided if the "idam" provider is used and the user is logged in.
 
+###### Header.awsWafScriptURL
+
+- Type: `String | false`
+- Default: `undefined`
+
+Overrides how the [AWS WAF challenge](#aws-waf-challenge) script is loaded. Leave it out and Global Nav loads the script for the page's hostname, if it knows of one.
+
+Pass a URL to load that script instead, for example to test against a stand-in locally:
+
+```js
+<Header awsWafScriptURL="https://localhost:4000/mock-aws-waf-jsapi.js" />
+```
+
+Pass `false` to stop Global Nav loading the script at all, for example because your app includes it itself:
+
+```js
+<Header awsWafScriptURL={false} />
+```
+
+The `Header`, `Footer` and `Main` components all take this prop and all behave the same way, because no one of them is on every page of every service. Whichever mounts first does the work. `false` from any of them switches the challenge off for the rest of the page's life, so there's no need to pass it to all three as long as the one you pass it to mounts first - the header, usually.
+
 ##### Footer props
 
 ###### Footer.service
@@ -674,6 +702,13 @@ The displayName is the user's name and must be provided if the "idam" provider i
 The identifier of the currently active service.
 See [services.json](src/services.json) for a list of the available service identifiers.
 
+###### Footer.awsWafScriptURL
+
+- Type: `String | false`
+- Default: `undefined`
+
+See [Header.awsWafScriptURL](#headerawswafscripturl).
+
 ### CDN
 
 Reference the Global Nav bundle directly from the NICE CDN to render the Global Nav. We recommend including this before the closing `</body>` tag but before your application's scripts:
@@ -816,6 +851,69 @@ The footer renders by default, set `footer` to `false` to stop it from rendering
 Or, pass an object of key/value pairs of settings specific to the footer.
 See the [footer props](#footer-props) section for available options.
 
+##### awsWafScriptURL
+
+- Type: `String | Boolean`
+- Default: `undefined`
+
+Overrides how the [AWS WAF challenge](#aws-waf-challenge) script is loaded: a URL to load that script instead of the one for the page's hostname, or `false` to not load it at all e.g. `global_nav_config = { awsWafScriptURL: false }`.
+
+This sits at the top level of the config, next to `service`, rather than under `header` or `footer`. That's deliberate: it still applies when either of those is set to `false`.
+
+### AWS WAF challenge
+
+Global Nav loads the [AWS WAF JavaScript SDK](https://docs.aws.amazon.com/waf/latest/developerguide/waf-js-challenge-api.html) on services that sit behind an AWS WAF web ACL. The SDK silently acquires an `aws-waf-token` cookie in the background. The web ACL checks requests for that token and challenges the ones without it, which is how we tell real browsers from bots.
+
+It's the web ACL that keeps the bots out, not this script. The script is there so that real users already hold a token by the time they need one, and never see the challenge interstitial.
+
+Global Nav carries this because it's the one piece of code already on every NICE service. The alternative is each service adding the script for itself.
+
+#### How it picks the script
+
+Each web ACL issues its own script URL, and the ids in that URL are generated by AWS, so it can't be worked out from the hostname. Instead there's a lookup table in [_src/aws-waf/integrations.js_](src/aws-waf/integrations.js), with one entry per web ACL listing the hostnames it protects.
+
+When Global Nav loads, it looks up `window.location.hostname` in that table. If there's an entry, it adds the script to the `<head>`. If there isn't, it does nothing, which is what we want for localhost and for any environment with no web ACL in front of it.
+
+> The table lists ops' sandbox and our live, alpha, beta, test and dev hostnames already, but a `scriptURL` stays empty until ops create that web ACL. An entry with an empty URL does nothing, so on the other hostnames the script only loads when `awsWafScriptURL` prop is passed.
+
+The script is only ever added once per page. Global Nav also does nothing if the SDK is already there, i.e. `window.AwsWafIntegration` exists or the page has its own script tag pointing at `awswaf.com`.
+
+Use [`awsWafScriptURL`](#headerawswafscripturl) to override the lookup, or to switch the whole thing off.
+
+#### Adding or filling in a web ACL
+
+Each entry in [_src/aws-waf/integrations.js_](src/aws-waf/integrations.js) looks like this:
+
+```js
+export const integrations = [
+  {
+    hosts: ['www.nice.org.uk'],
+    scriptURL: 'https://<id>.eu-west-1.sdk.awswaf.com/<id>/<id>/challenge.js',
+    cookieDomains: ['.nice.org.uk'],
+  },
+];
+```
+
+- `hosts` are exact hostnames, or a leading wildcard like `*.nice.org.uk`, which matches any subdomain at any depth but not the bare domain. An exact hostname always wins over a wildcard, wherever either one is in the table. Hostnames that share a load balancer (or CloudFront distribution) share a web ACL, so list them all against the one entry. The entries we ship were grouped by which hostnames resolve to the same address, which is a best guess at that: confirm it against the web ACLs ops actually create, and merge or split entries to match.
+- `scriptURL` comes from _Application integration_ in the AWS WAF console. Ops are issuing the _Intelligent threat integration_ URL, which ends in `challenge.js`; the _CAPTCHA integration_ one ends in `jsapi.js` and works the same way. It isn't a secret: it ends up in the page source. Leave it empty for a web ACL that doesn't exist yet and the entry does nothing.
+- `cookieDomains` is optional, e.g. `['.nice.org.uk']`. It widens the token cookie from the exact hostname so that one token works across subdomains. It's only valid once the same domain is on the web ACL's token domain list, otherwise AWS rejects the tokens, so ask ops for that at the same time as the URL. The shipped entries all set it.
+
+A new or changed entry needs a Global Nav release. Services loading the unversioned CDN bundle pick that up straight away; services using the npm package pick it up when they next upgrade and deploy.
+
+#### NICE Accounts
+
+NICE Accounts sits behind a web ACL too, and the header calls it to find out whether you're signed in. That call is a script tag, which can't send the token as a header, so it relies on the `aws-waf-token` cookie instead. Global Nav waits for the SDK to have a token before it makes the call, so the cookie is there to send. With no SDK on the page it doesn't wait at all, and if the SDK hasn't got a token after 5 seconds it makes the call anyway.
+
+This only works when the cookie reaches `accounts.nice.org.uk`:
+
+- The page has to be on `nice.org.uk`. A browser won't send a cookie from one domain to another, so services on other domains, and sandbox on `sandbox1-ds.net`, call NICE Accounts without a token.
+- The cookie has to be set on `.nice.org.uk` and not on the exact hostname. The shipped entries do that with `cookieDomains`. An [`awsWafScriptURL`](#headerawswafscripturl) override doesn't, so set `window.awsWafCookieDomainList = ['.nice.org.uk']` on the page before Global Nav loads.
+- `.nice.org.uk` has to be on the token domain list of both web ACLs: the one in front of the page and the one in front of NICE Accounts.
+
+#### Content Security Policy
+
+If your service sets a Content Security Policy then `script-src` and `connect-src` need to allow `https://*.awswaf.com`.
+
 ## Deployments
 
 We create 2 deployment artifacts: one for deploying to the CDN and one test site for previewing the header and footer.

package/lib/Footer/Footer.js

@@ -14,10 +14,16 @@ var _Pages = _interopRequireDefault(require("./Pages"));
 var _FooterModule = _interopRequireDefault(require("./Footer.module.scss"));
 var _TrackedLink = _interopRequireDefault(require("../TrackedLink"));
 var _tracker = require("../tracker");
+var _propTypes2 = require("../aws-waf/propTypes");
+var _useAwsWafChallenge = require("../hooks/useAwsWafChallenge");
 var _jsxRuntime = require("react/jsx-runtime");
 //TODO add string type for service prop
 const Footer = _ref => {
-  let service = _ref.service;
+  let {
+    service,
+    awsWafScriptURL
+  } = _ref;
+  (0, _useAwsWafChallenge.useAwsWafChallenge)(awsWafScriptURL);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("footer", {
     className: _FooterModule.default.footer,
     "data-tracking": "Global footer",
@@ -39,6 +45,7 @@ const Footer = _ref => {
   });
 };
 Footer.propTypes = {
-  service: _propTypes.default.string
+  service: _propTypes.default.string,
+  awsWafScriptURL: _propTypes2.awsWafScriptURLPropType
 };
 var _default = exports.default = Footer;

package/lib/Footer/Pages/Pages.js

@@ -13,7 +13,9 @@ var _tracker = require("../../tracker");
 var _jsxRuntime = require("react/jsx-runtime");
 //TODO add string type for service prop
 const Pages = _ref => {
-  let service = _ref.service;
+  let {
+    service
+  } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
     className: _PagesModule.default.wrapper,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {

package/lib/Footer/Services/Services.js

@@ -5,15 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ServicesModule = _interopRequireDefault(require("./Services.module.scss"));
 var _TrackedLink = _interopRequireDefault(require("../../TrackedLink"));
 var _tracker = require("../../tracker");
 var _services = _interopRequireDefault(require("../../services.json"));
 var _jsxRuntime = require("react/jsx-runtime");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const Services = () => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
     className: _ServicesModule.default.wrapper,
@@ -25,10 +22,14 @@ const Services = () => {
       }).map(function (link) {
         if (link.nestedLinks) {
           return link.nestedLinks.map(nestedLink => {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(FooterLink, _objectSpread({}, nestedLink), nestedLink.id);
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(FooterLink, {
+              ...nestedLink
+            }, nestedLink.id);
           });
         } else {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(FooterLink, _objectSpread({}, link), link.id);
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(FooterLink, {
+            ...link
+          }, link.id);
         }
       })
     })
@@ -45,14 +46,16 @@ FooterLink.propTypes = {
   title: _propTypes.default.string
 };
 function FooterLink(_ref) {
-  let host = _ref.host,
-    landingPath = _ref.landingPath,
-    text = _ref.text,
-    abbreviation = _ref.abbreviation,
-    title = _ref.title;
+  let {
+    host,
+    landingPath,
+    text,
+    abbreviation,
+    title
+  } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TrackedLink.default, {
-      href: "https://".concat(host).concat(landingPath),
+      href: `https://${host}${landingPath}`,
       eventAction: _tracker.footerClickEventAction,
       eventLabel: text,
       className: _ServicesModule.default.link,

package/lib/Header/Account/Account.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _HeaderContext = require("../context/HeaderContext");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -15,18 +13,16 @@ var _niceAccounts = require("./nice-accounts");
 var _AccountModule = _interopRequireDefault(require("./Account.module.scss"));
 var _tracker = require("../../tracker");
 var _jsxRuntime = require("react/jsx-runtime");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function Account(props) {
-  const _props$provider = props.provider,
-    provider = _props$provider === void 0 ? "niceAccounts" : _props$provider;
+  const {
+    provider = "niceAccounts"
+  } = props;
   // We've left this is state as per the pre-hook implementation
-  const _useState = (0, _react.useState)(provider == Account.providers.idam),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
-    doesUseIdAM = _useState2[0];
-  const _useContext = (0, _react.useContext)(_HeaderContext.HeaderContext),
-    accountMenuIsExpanded = _useContext.accountMenuIsExpanded,
-    setAccountMenuIsExpanded = _useContext.setAccountMenuIsExpanded;
+  const [doesUseIdAM] = (0, _react.useState)(provider == Account.providers.idam);
+  const {
+    accountMenuIsExpanded,
+    setAccountMenuIsExpanded
+  } = (0, _react.useContext)(_HeaderContext.HeaderContext);
   const keypress = (0, _react.useRef)(),
     myAccountButton = (0, _react.useRef)(),
     myAccountMenu = (0, _react.useRef)();
@@ -76,14 +72,19 @@ function Account(props) {
       //idam supplies links like:[{ key: "My profile", value: "/Account/todo" },{ key: "Sign out", value: "/Account/Logout" }]
       //the following just converts the idam format to the nice accounts format.
 
-      const displayName = props.displayName;
+      const {
+        displayName
+      } = props;
       const isLoggedIn = !!displayName;
       let links = props.links.reduce(function (links, link) {
         links[link.text] = link.url;
         return links;
       }, {});
       if (isLoggedIn) {
-        links = _objectSpread(_objectSpread({}, consultationsResponsesLink), links);
+        links = {
+          ...consultationsResponsesLink,
+          ...links
+        };
       }
       const convertedData = {
         display_name: displayName,
@@ -96,7 +97,10 @@ function Account(props) {
       //NICE accounts
       (0, _niceAccounts.checkIsLoggedIn)(props.environment).then(function (data) {
         if (props.onLoginStatusChecked) {
-          data.links = _objectSpread(_objectSpread({}, consultationsResponsesLink), data.links);
+          data.links = {
+            ...consultationsResponsesLink,
+            ...data.links
+          };
           props.onLoginStatusChecked(data);
         }
       }).catch(function (e) {
@@ -104,9 +108,10 @@ function Account(props) {
       });
     }
   }, []);
-  const accountsData = props.accountsData,
-    _props$environment = props.environment,
-    environment = _props$environment === void 0 ? "live" : _props$environment;
+  const {
+    accountsData,
+    environment = "live"
+  } = props;
   let signInLink = {};
   if (doesUseIdAM) {
     signInLink = props.links[0];

package/lib/Header/Account/nice-accounts.js

@@ -4,11 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getDomainBaseUrl = exports.checkIsLoggedIn = void 0;
+var _awsWaf = require("../../aws-waf");
 // Checks if you are logged in via NICE Accounts
 // Returns a promise that resolves with the data from NICE Accounts.
 // Returns a promise that rejects if the data could not be loaded.
 
 const checkIsLoggedIn = function (environment) {
+  // NICE Accounts sits behind an AWS WAF web ACL. A script tag can't send the token as a header,
+  // so wait for the SDK to set the token cookie, which the browser then sends along by itself
+  return (0, _awsWaf.whenAwsWafTokenReady)().then(function () {
+    return loadAccountsData(environment);
+  });
+};
+exports.checkIsLoggedIn = checkIsLoggedIn;
+const loadAccountsData = function (environment) {
   return new Promise(function (resolve, reject) {
     const url = getDomainBaseUrl(environment) + "tophat";
     var body = document.body;
@@ -30,8 +39,7 @@ const checkIsLoggedIn = function (environment) {
     body.insertBefore(script, body.firstChild);
   });
 };
-exports.checkIsLoggedIn = checkIsLoggedIn;
 const getDomainBaseUrl = function (environment) {
-  return "https://".concat(environment !== "live" ? environment + "-" : "", "accounts.nice.org.uk/");
+  return `https://${environment !== "live" ? environment + "-" : ""}accounts.nice.org.uk/`;
 };
 exports.getDomainBaseUrl = getDomainBaseUrl;

package/lib/Header/Header.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.OldHeader = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _LogoFull = _interopRequireDefault(require("@nice-digital/icons/lib/LogoFull"));
@@ -17,40 +15,31 @@ var _Search = _interopRequireDefault(require("./Search"));
 var _Account = _interopRequireDefault(require("./Account"));
 var _SkipLink = _interopRequireDefault(require("./SkipLink"));
 var _utils = require("../utils");
+var _propTypes2 = require("../aws-waf/propTypes");
+var _useAwsWafChallenge = require("../hooks/useAwsWafChallenge");
 var _HeaderModule = _interopRequireDefault(require("./Header.module.scss"));
 var _HeaderContext = require("./context/HeaderContext");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const Header = _ref => {
-  let _ref$skipLinkId = _ref.skipLinkId,
-    skipLinkId = _ref$skipLinkId === void 0 ? "content-start" : _ref$skipLinkId,
-    _ref$renderSearchOnly = _ref.renderSearchOnly,
-    renderSearchOnly = _ref$renderSearchOnly === void 0 ? false : _ref$renderSearchOnly,
-    onNavigating = _ref.onNavigating,
-    _ref$search = _ref.search,
-    search = _ref$search === void 0 ? {} : _ref$search,
-    enabled = _ref.enabled,
-    onRendered = _ref.onRendered,
-    auth = _ref.auth,
-    service = _ref.service,
-    _ref$additionalSubMen = _ref.additionalSubMenuItems,
-    additionalSubMenuItems = _ref$additionalSubMen === void 0 ? [] : _ref$additionalSubMen,
-    onDropdownOpen = _ref.onDropdownOpen,
-    onDropdownClose = _ref.onDropdownClose;
-  const _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isExpanded = _useState2[0],
-    setIsExpanded = _useState2[1];
-  const _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isLoggedIn = _useState4[0],
-    setIsLoggedIn = _useState4[1];
-  const _useState5 = (0, _react.useState)(null),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    accountsData = _useState6[0],
-    setAccountsData = _useState6[1];
+  let {
+    skipLinkId = "content-start",
+    renderSearchOnly = false,
+    onNavigating,
+    search = {},
+    enabled,
+    onRendered,
+    auth,
+    service,
+    additionalSubMenuItems = [],
+    onDropdownOpen,
+    onDropdownClose,
+    awsWafScriptURL
+  } = _ref;
+  const [isExpanded, setIsExpanded] = (0, _react.useState)(false);
+  const [isLoggedIn, setIsLoggedIn] = (0, _react.useState)(false);
+  const [accountsData, setAccountsData] = (0, _react.useState)(null);
+  (0, _useAwsWafChallenge.useAwsWafChallenge)(awsWafScriptURL);
   (0, _react.useEffect)(() => {
     if (!document.getElementById(skipLinkId)) {
       const firstH1OnPage = document.getElementsByTagName("h1")[0];
@@ -96,15 +85,18 @@ const Header = _ref => {
     }
   };
   if (renderSearchOnly) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, _objectSpread({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {
       skipLinkId: skipLinkId,
-      onNavigating: onNavigating
-    }, search));
+      onNavigating: onNavigating,
+      ...search
+    });
   }
   return enabled !== false && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_HeaderContext.HeaderContextProvider, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderContext.HeaderContext.Consumer, {
       children: _ref2 => {
-        let idOfOpenDropdown = _ref2.idOfOpenDropdown;
+        let {
+          idOfOpenDropdown
+        } = _ref2;
         dropdownToggleHandler(idOfOpenDropdown);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           id: "scrim",
@@ -124,7 +116,7 @@ const Header = _ref => {
           "aria-label": "Accessibility links",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkipLink.default, {
-              to: "#".concat(skipLinkId),
+              to: `#${skipLinkId}`,
               children: "Skip to content"
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
@@ -150,10 +142,11 @@ const Header = _ref => {
             className: _HeaderModule.default.wrapper,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: _HeaderModule.default.search,
-              children: search && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, _objectSpread({
+              children: search && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {
                 skipLinkId: skipLinkId,
-                onNavigating: onNavigating
-              }, search))
+                onNavigating: onNavigating,
+                ...search
+              })
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
               className: _HeaderModule.default.mobileMenuBtn,
               id: "header-menu-button",
@@ -166,11 +159,12 @@ const Header = _ref => {
               children: isExpanded ? "Close" : "Menu"
             }), auth !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: _HeaderModule.default.account,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, _objectSpread({
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, {
                 onLoginStatusChecked: handleLoginStatusChecked,
                 isLoggedIn: isLoggedIn,
-                accountsData: accountsData
-              }, auth))
+                accountsData: accountsData,
+                ...auth
+              })
             })]
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Nav.default, {
@@ -233,9 +227,10 @@ class OldHeader extends _react.Component {
   }
   dropdownToggleHandler(idOfOpenDropdown) {
     // If we've got an onDropdownOpen or onDropdownClose prop call the onDropdownOpen or onDropdownClose callback based on idOfOpenDropdown.
-    const _this$props = this.props,
-      onDropdownOpen = _this$props.onDropdownOpen,
-      onDropdownClose = _this$props.onDropdownClose;
+    const {
+      onDropdownOpen,
+      onDropdownClose
+    } = this.props;
     if (onDropdownOpen && idOfOpenDropdown !== null) {
       const onDropdownOpenCallback = (0, _utils.getCallbackFunction)(onDropdownOpen);
       if (onDropdownOpenCallback) {
@@ -251,15 +246,18 @@ class OldHeader extends _react.Component {
   }
   render() {
     if (this.props.renderSearchOnly) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, _objectSpread({
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {
         skipLinkId: this.props.skipLinkId,
-        onNavigating: this.props.onNavigating
-      }, this.props.search));
+        onNavigating: this.props.onNavigating,
+        ...this.props.search
+      });
     }
     return this.props.enabled !== false && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_HeaderContext.HeaderContextProvider, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderContext.HeaderContext.Consumer, {
         children: _ref3 => {
-          let idOfOpenDropdown = _ref3.idOfOpenDropdown;
+          let {
+            idOfOpenDropdown
+          } = _ref3;
           this.dropdownToggleHandler(idOfOpenDropdown);
           return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             id: "scrim",
@@ -279,7 +277,7 @@ class OldHeader extends _react.Component {
             "aria-label": "Accessibility links",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkipLink.default, {
-                to: "#".concat(this.props.skipLinkId),
+                to: `#${this.props.skipLinkId}`,
                 children: "Skip to content"
               })
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
@@ -305,10 +303,11 @@ class OldHeader extends _react.Component {
               className: _HeaderModule.default.wrapper,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                 className: _HeaderModule.default.search,
-                children: this.props.search && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, _objectSpread({
+                children: this.props.search && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {
                   skipLinkId: this.props.skipLinkId,
-                  onNavigating: this.props.onNavigating
-                }, this.props.search))
+                  onNavigating: this.props.onNavigating,
+                  ...this.props.search
+                })
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
                 className: _HeaderModule.default.mobileMenuBtn,
                 id: "header-menu-button",
@@ -321,11 +320,12 @@ class OldHeader extends _react.Component {
                 children: this.state.isExpanded ? "Close" : "Menu"
               }), this.props.auth !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                 className: _HeaderModule.default.account,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, _objectSpread({
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, {
                   onLoginStatusChecked: this.handleLoginStatusChecked,
                   isLoggedIn: this.state.isLoggedIn,
-                  accountsData: this.state.accountsData
-                }, this.props.auth))
+                  accountsData: this.state.accountsData,
+                  ...this.props.auth
+                })
               })]
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Nav.default, {
@@ -356,7 +356,8 @@ Header.propTypes = {
   onDropdownClose: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
   onRendered: _propTypes.default.func,
   additionalSubMenuItems: _propTypes.default.arrayOf(_propTypes.default.object),
-  renderSearchOnly: _propTypes.default.bool
+  renderSearchOnly: _propTypes.default.bool,
+  awsWafScriptURL: _propTypes2.awsWafScriptURLPropType
 };
 OldHeader.propTypes = {
   service: _propTypes.default.string,