@arcblock/ux 2.10.82 → 2.10.84

package/lib/Util/index.js

@@ -245,6 +245,7 @@ export function openWebWallet({
     mergedWindowFeatures.top = winTop;
   }
   const strWindowFeatures = Object.keys(mergedWindowFeatures).map(key => `${key}=${mergedWindowFeatures[key]}`).join(',');
+  // 这里打开的是钱包的 URL，是安全的
   window.open(windowUrl, 'targetWindow', strWindowFeatures);
   return {
     type: 'web'

package/lib/Util/security.d.ts

@@ -0,0 +1,6 @@
+export declare function getSafeUrl(url: string, { throwOnError, returnRaw, allowProtocol, allowHost, }?: {
+    throwOnError?: boolean | undefined;
+    returnRaw?: boolean | undefined;
+    allowProtocol?: string[] | undefined;
+    allowHost?: string[] | undefined;
+}): string | null;

package/lib/Util/security.js

@@ -0,0 +1,43 @@
+/* eslint-disable import/prefer-default-export */
+
+class CustomError extends Error {}
+export function getSafeUrl(
+// 只允许 / 开头， ./ 开头和带有 protocol 的 URL
+url, {
+  throwOnError = true,
+  returnRaw = false,
+  // 根据 URL 的规范，protocol 以 : 结尾
+  allowProtocol = ['https:', 'http:'],
+  // host 中可能会携带端口号，需要使用 hostname 来获取干净的域名
+  allowHost = [window.location.href]
+} = {}) {
+  try {
+    let base;
+    if (url.startsWith('/')) {
+      base = window.location.origin;
+    } else if (url.startsWith('./')) {
+      base = window.location.href;
+    }
+    const urlInstance = new URL(url, base);
+    const allowHostName = allowHost ? allowHost.map(host => new URL(host).hostname) : allowHost;
+    if (allowProtocol !== null && !allowProtocol.includes(urlInstance.protocol)) {
+      console.error(`Invalid protocol: ${urlInstance.protocol}`);
+      if (throwOnError) throw new CustomError(`Invalid protocol: ${urlInstance.protocol}`);
+      return null;
+    }
+    if (allowHostName !== null && !allowHostName.includes(urlInstance.hostname)) {
+      console.error(`Invalid host: ${urlInstance.hostname}`);
+      if (throwOnError) throw new CustomError(`Invalid host: ${urlInstance.hostname}`);
+      return null;
+    }
+    return returnRaw ? url : urlInstance.href;
+  } catch (error) {
+    if (error instanceof CustomError) {
+      if (throwOnError) throw error;
+      return null;
+    }
+    console.error(`Failed to convert url: ${url}`);
+    if (throwOnError) throw new Error(`Failed to convert url: ${url}`);
+    return null;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.82",
+  "version": "2.10.84",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -68,12 +68,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "25840ab8e0b037d16ef4fa8ead378ff81db95c46",
+  "gitHead": "1311dd7d9ce3a6b0164404de828e64dcd900ce6d",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.82",
-    "@arcblock/nft-display": "^2.10.82",
-    "@arcblock/react-hooks": "^2.10.82",
+    "@arcblock/icons": "^2.10.84",
+    "@arcblock/nft-display": "^2.10.84",
+    "@arcblock/react-hooks": "^2.10.84",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/Util/index.ts

@@ -306,6 +306,7 @@ export function openWebWallet({
   const strWindowFeatures = Object.keys(mergedWindowFeatures)
     .map((key) => `${key}=${mergedWindowFeatures[key]}`)
     .join(',');
+  // 这里打开的是钱包的 URL，是安全的
   window.open(windowUrl, 'targetWindow', strWindowFeatures);
   return { type: 'web' };
 }

package/src/Util/security.ts

@@ -0,0 +1,57 @@
+/* eslint-disable import/prefer-default-export */
+
+type GetSafeUrlOptions = {
+  returnRaw?: boolean;
+  throwOnError?: Boolean;
+  // 为 null 时代表不检查 protocol
+  allowProtocol?: Array<string> | null;
+  // 为 null 时代表不检查 host
+  allowHost?: Array<string> | null;
+};
+
+class CustomError extends Error {}
+
+export function getSafeUrl(
+  // 只允许 / 开头， ./ 开头和带有 protocol 的 URL
+  url: string,
+  {
+    throwOnError = true,
+    returnRaw = false,
+    // 根据 URL 的规范，protocol 以 : 结尾
+    allowProtocol = ['https:', 'http:'],
+    // host 中可能会携带端口号，需要使用 hostname 来获取干净的域名
+    allowHost = [window.location.href],
+  } = {}
+) {
+  try {
+    let base;
+    if (url.startsWith('/')) {
+      base = window.location.origin;
+    } else if (url.startsWith('./')) {
+      base = window.location.href;
+    }
+
+    const urlInstance = new URL(url, base);
+    const allowHostName = allowHost ? allowHost.map((host) => new URL(host).hostname) : allowHost;
+    if (allowProtocol !== null && !allowProtocol.includes(urlInstance.protocol)) {
+      console.error(`Invalid protocol: ${urlInstance.protocol}`);
+      if (throwOnError) throw new CustomError(`Invalid protocol: ${urlInstance.protocol}`);
+      return null;
+    }
+    if (allowHostName !== null && !allowHostName.includes(urlInstance.hostname)) {
+      console.error(`Invalid host: ${urlInstance.hostname}`);
+      if (throwOnError) throw new CustomError(`Invalid host: ${urlInstance.hostname}`);
+      return null;
+    }
+
+    return returnRaw ? url : urlInstance.href;
+  } catch (error) {
+    if (error instanceof CustomError) {
+      if (throwOnError) throw error;
+      return null;
+    }
+    console.error(`Failed to convert url: ${url}`);
+    if (throwOnError) throw new Error(`Failed to convert url: ${url}`);
+    return null;
+  }
+}