@smileid/web-components 11.4.5 → 11.6.0

package/lib/components/smart-camera-web/src/SmartCameraWeb.js

@@ -8,6 +8,14 @@ import packageJson from '../../../../package.json';
 
 const COMPONENTS_VERSION = packageJson.version;
 
+// Minimal HTML-attribute escaper for values interpolated into the innerHTML
+// template below. Order matters: encode `&` first so we don't double-encode
+// the `&` we introduce when escaping `"`. Used because partner-supplied
+// attributes (partner-name, partner-logo, policy-url, theme-color, ...) flow
+// straight into the template string and an unescaped quote would otherwise
+// allow attribute injection / XSS.
+const escAttr = (s) => String(s).replace(/&/g, '&').replace(/"/g, '"');
+
 function scwTemplateString() {
   return `
   <style>
@@ -19,10 +27,10 @@ function scwTemplateString() {
   ${styles(this.themeColor)}
   <div style="height: 100%;">
     <camera-permission ${this.applyComponentThemeColor} ${this.title} ${this.showNavigation} ${this.hideInstructions ? '' : 'hidden'} ${this.hideAttribution}></camera-permission>
-    <selfie-capture-screens ${this.applyComponentThemeColor} ${this.title} ${this.showNavigation} ${this.disableImageTests} ${this.hideAttribution} ${this.hideInstructions} hidden
-      ${this.hideBackToHost} ${this.allowAgentMode} ${this.allowAgentModeTests} ${this.allowLegacySelfieFallback}
+    <selfie-capture-screens ${this.applyComponentThemeColor} ${this.title} ${this.showNavigation} ${this.disableImageTests} ${this.hideAttribution} ${this.hideInstructions} ${this.hideConsent} ${this.partnerName} ${this.partnerLogo} ${this.policyUrl} hidden
+      ${this.hideBackToHost} ${this.allowAgentMode} ${this.allowAgentModeTests} ${this.allowLegacySelfieFallback} ${this.useStrictMode} ${this.showBackOnGuidelines}
     ></selfie-capture-screens>
-    <document-capture-screens ${this.applyComponentThemeColor} document-type=${this.documentType} ${this.title} ${this.documentCaptureModes} ${this.showNavigation}  ${this.hideAttribution}
+    <document-capture-screens ${this.autoCaptureFeature} ${this.autoCapture} ${this.autoCaptureTimeout} ${this.applyComponentThemeColor} document-type="${escAttr(this.documentType)}" ${this.title} ${this.documentCaptureModes} ${this.showNavigation}  ${this.hideAttribution}
      ${this.hideBackOfId} ${this.newInstructions} ${this.applyComponentThemeColor} hidden></document-capture-screens>
   </div>
 `;
@@ -70,15 +78,24 @@ class SmartCameraWeb extends HTMLElement {
     return [
       'allow-agent-mode',
       'allow-legacy-selfie-fallback',
+      'auto-capture-enabled',
+      'auto-capture',
+      'auto-capture-timeout',
       'disable-image-tests',
       'document-capture-modes',
       'document-type',
       'hide-attribution',
       'hide-back-of-id',
       'hide-back-to-host',
+      'hide-consent',
+      'partner-name',
+      'partner-logo',
+      'policy-url',
       'show-navigation',
+      'show-back-on-guidelines',
       'theme-color',
       'new-instructions',
+      'use-strict-mode',
     ];
   }
 
@@ -86,15 +103,24 @@ class SmartCameraWeb extends HTMLElement {
     switch (name) {
       case 'allow-agent-mode':
       case 'allow-legacy-selfie-fallback':
+      case 'auto-capture-enabled':
+      case 'auto-capture':
+      case 'auto-capture-timeout':
       case 'disable-image-tests':
       case 'document-capture-modes':
       case 'document-type':
       case 'hide-attribution':
       case 'hide-back-of-id':
       case 'hide-back-to-host':
+      case 'hide-consent':
+      case 'partner-name':
+      case 'partner-logo':
+      case 'policy-url':
       case 'show-navigation':
+      case 'show-back-on-guidelines':
       case 'theme-color':
       case 'new-instructions':
+      case 'use-strict-mode':
         this.disconnectedCallback();
         this.shadowRoot.innerHTML = this.render();
         this.setUpEventListeners();
@@ -239,6 +265,12 @@ class SmartCameraWeb extends HTMLElement {
     return this.hasAttribute('show-navigation') ? 'show-navigation' : '';
   }
 
+  get showBackOnGuidelines() {
+    return this.hasAttribute('show-back-on-guidelines')
+      ? 'show-back-on-guidelines'
+      : '';
+  }
+
   get hideBackToHost() {
     return this.hasAttribute('hide-back-to-host') ||
       this.hasAttribute('hide-back')
@@ -248,7 +280,7 @@ class SmartCameraWeb extends HTMLElement {
 
   get allowAgentMode() {
     return this.hasAttribute('allow-agent-mode')
-      ? `allow-agent-mode=${this.getAttribute('allow-agent-mode')}`
+      ? `allow-agent-mode="${escAttr(this.getAttribute('allow-agent-mode'))}"`
       : '';
   }
 
@@ -260,13 +292,31 @@ class SmartCameraWeb extends HTMLElement {
 
   get title() {
     return this.hasAttribute('title')
-      ? `title=${this.getAttribute('title')}`
+      ? `title="${escAttr(this.getAttribute('title'))}"`
       : '';
   }
 
   get documentCaptureModes() {
     return this.hasAttribute('document-capture-modes')
-      ? `document-capture-modes='${this.getAttribute('document-capture-modes')}'`
+      ? `document-capture-modes="${escAttr(this.getAttribute('document-capture-modes'))}"`
+      : '';
+  }
+
+  get autoCaptureFeature() {
+    return this.hasAttribute('auto-capture-enabled')
+      ? 'auto-capture-enabled'
+      : '';
+  }
+
+  get autoCapture() {
+    return this.hasAttribute('auto-capture')
+      ? `auto-capture="${escAttr(this.getAttribute('auto-capture'))}"`
+      : '';
+  }
+
+  get autoCaptureTimeout() {
+    return this.hasAttribute('auto-capture-timeout')
+      ? `auto-capture-timeout="${escAttr(this.getAttribute('auto-capture-timeout'))}"`
       : '';
   }
 
@@ -278,7 +328,14 @@ class SmartCameraWeb extends HTMLElement {
 
   get allowLegacySelfieFallback() {
     return this.hasAttribute('allow-legacy-selfie-fallback')
-      ? `allow-legacy-selfie-fallback='${this.getAttribute('allow-legacy-selfie-fallback')}'`
+      ? `allow-legacy-selfie-fallback="${escAttr(this.getAttribute('allow-legacy-selfie-fallback'))}"`
+      : '';
+  }
+
+  get useStrictMode() {
+    return this.hasAttribute('use-strict-mode') &&
+      this.getAttribute('use-strict-mode') !== 'false'
+      ? 'use-strict-mode="true"'
       : '';
   }
 
@@ -286,6 +343,28 @@ class SmartCameraWeb extends HTMLElement {
     return this.hasAttribute('hide-attribution') ? 'hide-attribution' : '';
   }
 
+  get hideConsent() {
+    return this.hasAttribute('hide-consent') ? 'hide-consent' : '';
+  }
+
+  get partnerName() {
+    return this.hasAttribute('partner-name')
+      ? `partner-name="${escAttr(this.getAttribute('partner-name'))}"`
+      : '';
+  }
+
+  get partnerLogo() {
+    return this.hasAttribute('partner-logo')
+      ? `partner-logo="${escAttr(this.getAttribute('partner-logo'))}"`
+      : '';
+  }
+
+  get policyUrl() {
+    return this.hasAttribute('policy-url')
+      ? `policy-url="${escAttr(this.getAttribute('policy-url'))}"`
+      : '';
+  }
+
   get hasThemeColor() {
     return (
       this.hasAttribute('theme-color') &&
@@ -300,7 +379,9 @@ class SmartCameraWeb extends HTMLElement {
   }
 
   get applyComponentThemeColor() {
-    return this.hasThemeColor ? `theme-color='${this.themeColor}'` : '';
+    return this.hasThemeColor
+      ? `theme-color="${escAttr(this.themeColor)}"`
+      : '';
   }
 
   setActiveScreen(screen) {

package/lib/components/totp-consent/src/TotpConsent.js

@@ -1,4 +1,4 @@
-import validate from 'validate.js';
+import validate from '../../../utils/validate';
 import { getDirection } from '../../../domain/localisation';
 
 function postData(url, data) {

package/lib/domain/localisation/index.js

@@ -218,7 +218,7 @@ export function t(key) {
   const resolvedLocale = resolveLocale(currentLocale);
   const currentLocaleData = locales[resolvedLocale];
   const value = getNestedValue(currentLocaleData, key);
-  if (value) {
+  if (typeof value === 'string') {
     return value;
   }
 
@@ -226,7 +226,7 @@ export function t(key) {
   const resolvedDefault = resolveLocale(DEFAULT_LOCALE);
   if (resolvedLocale !== resolvedDefault) {
     const defaultValue = getNestedValue(locales[resolvedDefault], key);
-    if (defaultValue) {
+    if (typeof defaultValue === 'string') {
       return defaultValue;
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/web-components",
-  "version": "11.4.5",
+  "version": "11.6.0",
   "private": false,
   "main": "dist/esm/main.js",
   "module": "dist/esm/main.js",
@@ -45,6 +45,10 @@
     "./localisation": {
       "types": "./dist/types/localisation.d.ts",
       "import": "./dist/esm/localisation.js"
+    },
+    "./validate": {
+      "types": "./dist/types/validate.d.ts",
+      "import": "./dist/esm/validate.js"
     }
   },
   "files": [
@@ -86,7 +90,7 @@
   },
   "homepage": "https://github.com/smileidentity/web-client#readme",
   "dependencies": {
-    "@lottiefiles/dotlottie-web": "^0.71.0",
+    "@lottiefiles/dotlottie-web": "^0.72.1",
     "@mediapipe/tasks-vision": "^0.10.22-rc.20250304",
     "@preact/signals": "^2.1.1",
     "@tabler/icons-preact": "^3.34.0",
@@ -94,8 +98,7 @@
     "preact": "^10.27.3",
     "preact-custom-element": "^4.3.0",
     "preact-router": "^4.1.2",
-    "signature_pad": "^5.0.2",
-    "validate.js": "^0.13.1"
+    "signature_pad": "^5.0.2"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.10.2",
@@ -104,8 +107,9 @@
     "@types/preact-custom-element": "^4.0.4",
     "@typescript-eslint/eslint-plugin": "^8.49.0",
     "@typescript-eslint/parser": "^8.49.0",
+    "@vitejs/plugin-basic-ssl": "^2.3.0",
     "cross-env": "^7.0.3",
-    "cypress": "^13.17.0",
+    "cypress": "^15.16.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",