@pequity/squirrel 4.0.1 → 4.1.0

package/dist/cjs/chunks/p-link.js

@@ -0,0 +1,37 @@
+"use strict";
+const vue = require("vue");
+const vueRouter = require("vue-router");
+const link = require("../link.js");
+const sanitization = require("../sanitization.js");
+const _hoisted_1 = ["href"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "PLink"
+  },
+  __name: "p-link",
+  props: {
+    custom: { type: Boolean },
+    activeClass: {},
+    exactActiveClass: {},
+    ariaCurrentValue: {},
+    to: {},
+    replace: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return typeof _ctx.to === "string" && vue.unref(link.isExternalLink)(_ctx.to) ? (vue.openBlock(), vue.createElementBlock("a", {
+        key: 0,
+        href: vue.unref(sanitization.sanitizeUrl)(_ctx.to),
+        target: "_blank"
+      }, [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 8, _hoisted_1)) : (vue.openBlock(), vue.createBlock(vue.unref(vueRouter.RouterLink), vue.normalizeProps(vue.mergeProps({ key: 1 }, _ctx.$props)), {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16));
+    };
+  }
+});
+exports._sfc_main = _sfc_main;

package/dist/cjs/index.js

@@ -25,6 +25,7 @@ const pInput = require("./p-input.js");
 const pInputNumber = require("./p-input-number.js");
 const pInputPercent_vue_vue_type_script_setup_true_lang = require("./chunks/p-input-percent.js");
 const pInputSearch = require("./p-input-search.js");
+const pLink_vue_vue_type_script_setup_true_lang = require("./chunks/p-link.js");
 const pLoading = require("./p-loading.js");
 const pModal = require("./p-modal.js");
 const pPagination_vue_vue_type_script_setup_true_lang = require("./chunks/p-pagination.js");
@@ -58,6 +59,7 @@ const inputClassesShared = require("./inputClassesShared.js");
 const pagination = require("./pagination.js");
 const dom = require("./dom.js");
 const object = require("./object.js");
+const sanitization = require("./sanitization.js");
 const listKeyboardNavigation = require("./listKeyboardNavigation.js");
 const number = require("./number.js");
 const _hoisted_1$4 = { class: "flex h-12 w-max select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white" };
@@ -1060,6 +1062,7 @@ exports.PInput = pInput;
 exports.PInputNumber = pInputNumber;
 exports.PInputPercent = pInputPercent_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.PInputSearch = pInputSearch;
+exports.PLink = pLink_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.PLoading = pLoading;
 exports.PModal = pModal;
 exports.PPagination = pPagination_vue_vue_type_script_setup_true_lang._sfc_main;
@@ -1115,6 +1118,7 @@ exports.getNextActiveElement = dom.getNextActiveElement;
 exports.isElement = dom.isElement;
 exports.isVisible = dom.isVisible;
 exports.isObject = object.isObject;
+exports.sanitizeUrl = sanitization.sanitizeUrl;
 exports.setupListKeyboardNavigation = listKeyboardNavigation.setupListKeyboardNavigation;
 exports.toNumberOrNull = number.toNumberOrNull;
 exports.PActionBar = _sfc_main$4;

package/dist/cjs/link.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const normalizeUrl = (url) => {
+  if (url.indexOf("//") === 0) {
+    url = location.protocol + url;
+  }
+  return url;
+};
+const isValidUrl = (url) => {
+  url = normalizeUrl(url);
+  try {
+    return Boolean(new URL(url));
+  } catch (e) {
+    return false;
+  }
+};
+const checkDomain = function(url) {
+  url = normalizeUrl(url);
+  return url.toLowerCase().replace(/([a-z])?:\/\//, "$1").split("/")[0];
+};
+const isExternalLink = function(url) {
+  url = String(url);
+  return isValidUrl(url) && (url.indexOf(":") > -1 || url.indexOf("//") > -1) && checkDomain(location.href) !== checkDomain(url);
+};
+exports.isExternalLink = isExternalLink;

package/dist/cjs/p-btn.js

@@ -3,6 +3,8 @@ const pRingLoader_vue_vue_type_script_setup_true_lang = require("./chunks/p-ring
 const tailwind = require("./tailwind.js");
 const vue = require("vue");
 const vueRouter = require("vue-router");
+const link = require("./link.js");
+const sanitization = require("./sanitization.js");
 const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
 const BUTTON_TYPES = {
   PRIMARY: "primary",
@@ -128,17 +130,18 @@ const _sfc_main = vue.defineComponent({
     loaderColor() {
       const type = LOADER_COLORS[this.type];
       return tailwind.getColorDeep(type);
-    },
-    isExternalLink() {
-      return typeof this.to === "string" && this.to.startsWith("http");
     }
+  },
+  methods: {
+    isExternalLink: link.isExternalLink,
+    sanitizeUrl: sanitization.sanitizeUrl
   }
 });
 const _hoisted_1 = ["href"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_PRingLoader = vue.resolveComponent("PRingLoader");
-  return _ctx.isExternalLink ? (vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({ key: 0 }, _ctx.$attrs, {
-    href: _ctx.to,
+  return typeof _ctx.to === "string" && _ctx.isExternalLink(_ctx.to) ? (vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({ key: 0 }, _ctx.$attrs, {
+    href: _ctx.sanitizeUrl(_ctx.to),
     target: "_blank",
     class: _ctx.classes
   }), [

package/dist/cjs/p-link.js

@@ -0,0 +1,3 @@
+"use strict";
+const pLink_vue_vue_type_script_setup_true_lang = require("./chunks/p-link.js");
+module.exports = pLink_vue_vue_type_script_setup_true_lang._sfc_main;

package/dist/cjs/sanitization.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const XSS_SECURITY_URL = "https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html";
+const SAFE_URL_PATTERN = /^(?!javascript:)(?:[a-z0-9+.-]+:|[^&:\/?#]*(?:[\/?#]|$))/i;
+const sanitizeUrl = (url) => {
+  url = String(url);
+  if (url.match(SAFE_URL_PATTERN)) {
+    return url;
+  }
+  console.warn(`WARNING: sanitizing unsafe URL value ${url} (see ${XSS_SECURITY_URL})`);
+  return "unsafe:" + url;
+};
+exports.sanitizeUrl = sanitizeUrl;

package/dist/es/chunks/p-link.js

@@ -0,0 +1,38 @@
+import { defineComponent, unref, openBlock, createElementBlock, renderSlot, createBlock, normalizeProps, mergeProps, withCtx } from "vue";
+import { RouterLink } from "vue-router";
+import { isExternalLink } from "../link.js";
+import { sanitizeUrl } from "../sanitization.js";
+const _hoisted_1 = ["href"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PLink"
+  },
+  __name: "p-link",
+  props: {
+    custom: { type: Boolean },
+    activeClass: {},
+    exactActiveClass: {},
+    ariaCurrentValue: {},
+    to: {},
+    replace: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return typeof _ctx.to === "string" && unref(isExternalLink)(_ctx.to) ? (openBlock(), createElementBlock("a", {
+        key: 0,
+        href: unref(sanitizeUrl)(_ctx.to),
+        target: "_blank"
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 8, _hoisted_1)) : (openBlock(), createBlock(unref(RouterLink), normalizeProps(mergeProps({ key: 1 }, _ctx.$props)), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16));
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/es/index.js

@@ -24,14 +24,15 @@ import { default as default11 } from "./p-input.js";
 import { default as default12 } from "./p-input-number.js";
 import { _ as _3 } from "./chunks/p-input-percent.js";
 import PInputSearch from "./p-input-search.js";
+import { _ as _4 } from "./chunks/p-link.js";
 import { default as default13 } from "./p-loading.js";
 import { default as default14 } from "./p-modal.js";
-import { _ as _4 } from "./chunks/p-pagination.js";
-import { _ as _5 } from "./chunks/p-pagination-info.js";
+import { _ as _5 } from "./chunks/p-pagination.js";
+import { _ as _6 } from "./chunks/p-pagination-info.js";
 import { default as default15 } from "./p-progress-bar.js";
-import { _ as _6 } from "./chunks/p-ring-loader.js";
-import { _ as _7 } from "./chunks/p-select.js";
-import { _ as _8 } from "./chunks/p-select-btn.js";
+import { _ as _7 } from "./chunks/p-ring-loader.js";
+import { _ as _8 } from "./chunks/p-select.js";
+import { _ as _9 } from "./chunks/p-select-btn.js";
 import { SIZES } from "./p-select-list.js";
 import { splitStringForHighlight } from "./text.js";
 import { toString } from "./string.js";
@@ -42,10 +43,10 @@ import PTableHeaderCell from "./p-table-header-cell.js";
 import { colsInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionKey, isColsResizableInjectionKey } from "./p-table.js";
 import { MIN_WIDTH_COL_RESIZE } from "./p-table.js";
 import { usePTableColResize } from "./usePTableColResize.js";
-import { _ as _9 } from "./chunks/p-table-loader.js";
+import { _ as _10 } from "./chunks/p-table-loader.js";
 import { SORTING_TYPES } from "./p-table-sort.js";
 import { default as default18 } from "./p-table-td.js";
-import { _ as _10 } from "./chunks/p-tabs.js";
+import { _ as _11 } from "./chunks/p-tabs.js";
 import { default as default19 } from "./p-textarea.js";
 import { default as default20 } from "./p-toggle.js";
 import { usePLoading } from "./usePLoading.js";
@@ -58,6 +59,7 @@ import { ERROR_MSG, INPUT_BASE, INPUT_ERROR, INPUT_NORMAL, INPUT_SIZES, LABEL_BA
 import { createPagingRange } from "./pagination.js";
 import { getNextActiveElement, isElement, isVisible } from "./dom.js";
 import { isObject } from "./object.js";
+import { sanitizeUrl } from "./sanitization.js";
 import { setupListKeyboardNavigation } from "./listKeyboardNavigation.js";
 import { toNumberOrNull } from "./number.js";
 const _hoisted_1$4 = { class: "flex h-12 w-max select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white" };
@@ -1071,23 +1073,24 @@ export {
   default12 as PInputNumber,
   _3 as PInputPercent,
   PInputSearch,
+  _4 as PLink,
   default13 as PLoading,
   default14 as PModal,
-  _4 as PPagination,
-  _5 as PPaginationInfo,
+  _5 as PPagination,
+  _6 as PPaginationInfo,
   default15 as PProgressBar,
-  _6 as PRingLoader,
-  _7 as PSelect,
-  _8 as PSelectBtn,
+  _7 as PRingLoader,
+  _8 as PSelect,
+  _9 as PSelectBtn,
   _sfc_main$2 as PSelectList,
   default16 as PSelectPill,
   default17 as PSkeletonLoader,
   pTable as PTable,
   PTableHeaderCell,
-  _9 as PTableLoader,
+  _10 as PTableLoader,
   pTableSort as PTableSort,
   default18 as PTableTd,
-  _10 as PTabs,
+  _11 as PTabs,
   default19 as PTextarea,
   default20 as PToggle,
   SELECT_ARROW,
@@ -1113,6 +1116,7 @@ export {
   isLastColFixedInjectionKey,
   isObject,
   isVisible,
+  sanitizeUrl,
   setupListKeyboardNavigation,
   splitStringForHighlight,
   toNumberOrNull,

package/dist/es/link.js

@@ -0,0 +1,25 @@
+const normalizeUrl = (url) => {
+  if (url.indexOf("//") === 0) {
+    url = location.protocol + url;
+  }
+  return url;
+};
+const isValidUrl = (url) => {
+  url = normalizeUrl(url);
+  try {
+    return Boolean(new URL(url));
+  } catch (e) {
+    return false;
+  }
+};
+const checkDomain = function(url) {
+  url = normalizeUrl(url);
+  return url.toLowerCase().replace(/([a-z])?:\/\//, "$1").split("/")[0];
+};
+const isExternalLink = function(url) {
+  url = String(url);
+  return isValidUrl(url) && (url.indexOf(":") > -1 || url.indexOf("//") > -1) && checkDomain(location.href) !== checkDomain(url);
+};
+export {
+  isExternalLink
+};

package/dist/es/p-btn.js

@@ -2,6 +2,8 @@ import { _ as _sfc_main$1 } from "./chunks/p-ring-loader.js";
 import { getColorDeep } from "./tailwind.js";
 import { defineComponent, resolveComponent, openBlock, createElementBlock, mergeProps, renderSlot, createBlock, resolveDynamicComponent, withCtx, createElementVNode, normalizeClass, normalizeStyle, createCommentVNode } from "vue";
 import { RouterLink } from "vue-router";
+import { isExternalLink } from "./link.js";
+import { sanitizeUrl } from "./sanitization.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const BUTTON_TYPES = {
   PRIMARY: "primary",
@@ -127,17 +129,18 @@ const _sfc_main = defineComponent({
     loaderColor() {
       const type = LOADER_COLORS[this.type];
       return getColorDeep(type);
-    },
-    isExternalLink() {
-      return typeof this.to === "string" && this.to.startsWith("http");
     }
+  },
+  methods: {
+    isExternalLink,
+    sanitizeUrl
   }
 });
 const _hoisted_1 = ["href"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_PRingLoader = resolveComponent("PRingLoader");
-  return _ctx.isExternalLink ? (openBlock(), createElementBlock("a", mergeProps({ key: 0 }, _ctx.$attrs, {
-    href: _ctx.to,
+  return typeof _ctx.to === "string" && _ctx.isExternalLink(_ctx.to) ? (openBlock(), createElementBlock("a", mergeProps({ key: 0 }, _ctx.$attrs, {
+    href: _ctx.sanitizeUrl(_ctx.to),
     target: "_blank",
     class: _ctx.classes
   }), [

package/dist/es/p-link.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "./chunks/p-link.js";
+export {
+  _sfc_main as default
+};

package/dist/es/sanitization.js

@@ -0,0 +1,13 @@
+const XSS_SECURITY_URL = "https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html";
+const SAFE_URL_PATTERN = /^(?!javascript:)(?:[a-z0-9+.-]+:|[^&:\/?#]*(?:[\/?#]|$))/i;
+const sanitizeUrl = (url) => {
+  url = String(url);
+  if (url.match(SAFE_URL_PATTERN)) {
+    return url;
+  }
+  console.warn(`WARNING: sanitizing unsafe URL value ${url} (see ${XSS_SECURITY_URL})`);
+  return "unsafe:" + url;
+};
+export {
+  sanitizeUrl
+};

package/dist/squirrel/components/index.d.ts

@@ -18,6 +18,7 @@ import PInput from './p-input/p-input.vue';
 import PInputNumber from './p-input-number/p-input-number.vue';
 import PInputPercent from './p-input-percent/p-input-percent.vue';
 import PInputSearch from './p-input-search/p-input-search.vue';
+import PLink from './p-link/p-link.vue';
 import PLoading from './p-loading/p-loading.vue';
 import PModal from './p-modal/p-modal.vue';
 import PPagination from './p-pagination/p-pagination.vue';
@@ -47,4 +48,4 @@ import { usePModal } from './p-modal/usePModal';
 import { usePTableColResize } from './p-table/usePTableColResize';
 import { usePTableRowVirtualizer } from './p-table/usePTableRowVirtualizer';
 import { useSelectList } from './p-select-list/useSelectList';
-export { PActionBar, PActionBarAction, PAlert, PAvatar, PBtn, PCard, PCheckbox, PChips, PCloseBtn, PDatePicker, PDrawer, PDropdown, PDropdownSelect, PFileUpload, PFilterIcon, PInfoIcon, PInlineDatePicker, PInput, PInputNumber, PInputPercent, PInputSearch, PLoading, PModal, PPagination, PPaginationInfo, PProgressBar, PRingLoader, PSelect, PSelectBtn, PSelectList, PSelectPill, PSkeletonLoader, PTable, PTableHeaderCell, PTableLoader, PTableSort, PTableTd, PTabs, PTextarea, PToggle, SORTING_TYPES, MIN_WIDTH_COL_RESIZE, colsInjectionKey, isColsResizableInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionKey, usePModal, usePTableColResize, usePTableRowVirtualizer, useSelectList, usePLoading, SortingType, SortingTypeWithoutNoSorting, Size, FileUploadFile, HeaderCellAttrs, TableCol, ThAttrs, };
+export { PActionBar, PActionBarAction, PAlert, PAvatar, PBtn, PCard, PCheckbox, PChips, PCloseBtn, PDatePicker, PDrawer, PDropdown, PDropdownSelect, PFileUpload, PFilterIcon, PInfoIcon, PInlineDatePicker, PInput, PInputNumber, PInputPercent, PInputSearch, PLink, PLoading, PModal, PPagination, PPaginationInfo, PProgressBar, PRingLoader, PSelect, PSelectBtn, PSelectList, PSelectPill, PSkeletonLoader, PTable, PTableHeaderCell, PTableLoader, PTableSort, PTableTd, PTabs, PTextarea, PToggle, SORTING_TYPES, MIN_WIDTH_COL_RESIZE, colsInjectionKey, isColsResizableInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionKey, usePModal, usePTableColResize, usePTableRowVirtualizer, useSelectList, usePLoading, SortingType, SortingTypeWithoutNoSorting, Size, FileUploadFile, HeaderCellAttrs, TableCol, ThAttrs, };

package/dist/squirrel/components/p-btn/p-btn.vue.d.ts

@@ -72,8 +72,10 @@ declare const _default: import("vue").DefineComponent<{
     classes(): string;
     loaderSize(): number;
     loaderColor(): undefined;
-    isExternalLink(): boolean;
-}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    isExternalLink: (url: string) => boolean;
+    sanitizeUrl: (url: string) => string;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * The button style e.g primary, secondary, primary-outline, secondary-outline, error, success, primary-link
      */

package/dist/squirrel/components/p-link/p-link.vue.d.ts

@@ -0,0 +1,22 @@
+import { type RouterLinkProps } from 'vue-router';
+declare function __VLS_template(): {
+    default?(_: {}): any;
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<RouterLinkProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<RouterLinkProps>>>, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/squirrel/components/p-table/usePTableRowVirtualizer.d.ts

@@ -17,7 +17,7 @@ export declare const usePTableRowVirtualizer: (options: Options) => {
     measureElement: () => Ref<undefined>;
 } | {
     virtualizer: Ref<import("@tanstack/vue-virtual").Virtualizer<HTMLElement, Element>>;
-    virtualRows: ComputedRef<import("@tanstack/vue-virtual").VirtualItem<Element>[]>;
+    virtualRows: ComputedRef<import("@tanstack/vue-virtual").VirtualItem[]>;
     paddingTop: ComputedRef<number>;
     paddingBottom: ComputedRef<number>;
     measureElement: (cmp: ComponentPublicInstance | Ref<HTMLElement>) => undefined;

package/dist/squirrel/utils/index.d.ts

@@ -5,8 +5,9 @@ import { ERROR_MSG, INPUT_BASE, INPUT_ERROR, INPUT_NORMAL, INPUT_SIZES, type Inp
 import { createPagingRange } from './pagination';
 import { getNextActiveElement, isElement, isVisible } from './dom';
 import { isObject } from './object';
+import { sanitizeUrl } from './sanitization';
 import { setupListKeyboardNavigation } from './listKeyboardNavigation';
 import { splitStringForHighlight } from './text';
 import { toNumberOrNull } from './number';
 import { toString } from './string';
-export { inputClassesMixin, CURRENCY_INPUT_DEFAULTS, Color, getColor, getColorDeep, getScreen, ERROR_MSG, INPUT_BASE, INPUT_ERROR, INPUT_NORMAL, INPUT_SIZES, InputSize, LABEL_BASE, LABEL_REQUIRED, LABEL_SIZES, SELECT_ARROW, SELECT_BASE, SELECT_SIZES, SPACING_LEFT, SPACING_PREFIX, SPACING_RIGHT, SPACING_SUFFIX, TEXTAREA_BASE, createPagingRange, getNextActiveElement, isElement, isVisible, isObject, setupListKeyboardNavigation, splitStringForHighlight, toNumberOrNull, toString, };
+export { inputClassesMixin, CURRENCY_INPUT_DEFAULTS, Color, getColor, getColorDeep, getScreen, ERROR_MSG, INPUT_BASE, INPUT_ERROR, INPUT_NORMAL, INPUT_SIZES, InputSize, LABEL_BASE, LABEL_REQUIRED, LABEL_SIZES, SELECT_ARROW, SELECT_BASE, SELECT_SIZES, SPACING_LEFT, SPACING_PREFIX, SPACING_RIGHT, SPACING_SUFFIX, TEXTAREA_BASE, createPagingRange, getNextActiveElement, isElement, isVisible, isObject, sanitizeUrl, setupListKeyboardNavigation, splitStringForHighlight, toNumberOrNull, toString, };

package/dist/squirrel/utils/link.d.ts

@@ -0,0 +1 @@
+export declare const isExternalLink: (url: string) => boolean;

package/dist/squirrel/utils/sanitization.d.ts

@@ -0,0 +1,10 @@
+/**
+ * This is a port of the Angular url_sanitizer module.
+ * https://github.com/angular/angular/blob/main/packages/core/src/sanitization/url_sanitizer.ts
+ *
+ * TL;DR
+ * The function sanitizeUrl is designed to ensure that a given URL is safe,
+ * by checking it against a regular expression pattern (SAFE_URL_PATTERN).
+ * If the URL is considered unsafe, it returns a version of the URL prefixed with "unsafe:".
+ */
+export declare const sanitizeUrl: (url: string) => string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "packageManager": "pnpm@9.7.1",
   "type": "module",
   "scripts": {
@@ -51,7 +51,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-env": "^7.25.4",
     "@commitlint/cli": "^19.4.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@pequity/eslint-config": "^0.0.13",
@@ -71,11 +71,11 @@
     "@storybook/theming": "^8.2.9",
     "@storybook/vue3": "^8.2.9",
     "@storybook/vue3-vite": "^8.2.9",
-    "@tanstack/vue-virtual": "3.10.1",
+    "@tanstack/vue-virtual": "3.10.4",
     "@types/jest": "^29.5.12",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.4.2",
+    "@types/node": "^22.5.0",
     "@vitejs/plugin-vue": "^5.1.2",
     "@vue/compiler-sfc": "3.4.38",
     "@vue/test-utils": "^2.4.6",
@@ -105,7 +105,7 @@
     "storybook": "^8.2.9",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.10",
-    "ts-jest": "^29.2.4",
+    "ts-jest": "^29.2.5",
     "typescript": "5.5.4",
     "v-calendar": "3.1.2",
     "vite": "^5.4.2",

package/squirrel/components/index.ts

@@ -18,6 +18,7 @@ import PInput from '@squirrel/components/p-input/p-input.vue';
 import PInputNumber from '@squirrel/components/p-input-number/p-input-number.vue';
 import PInputPercent from '@squirrel/components/p-input-percent/p-input-percent.vue';
 import PInputSearch from '@squirrel/components/p-input-search/p-input-search.vue';
+import PLink from '@squirrel/components/p-link/p-link.vue';
 import PLoading from '@squirrel/components/p-loading/p-loading.vue';
 import PModal from '@squirrel/components/p-modal/p-modal.vue';
 import PPagination from '@squirrel/components/p-pagination/p-pagination.vue';
@@ -83,6 +84,7 @@ export {
   PInputNumber,
   PInputPercent,
   PInputSearch,
+  PLink,
   PLoading,
   PModal,
   PPagination,

package/squirrel/components/p-btn/p-btn.spec.js

@@ -1,5 +1,12 @@
 import PBtn from '@squirrel/components/p-btn/p-btn.vue';
 import { createWrapperFor } from '@tests/jest.helpers';
+import { sanitizeUrl } from '@squirrel/utils/sanitization';
+
+jest.mock('@squirrel/utils/sanitization', () => {
+  return {
+    sanitizeUrl: jest.fn((str) => `sanitized-${str}`),
+  };
+});
 
 const ELEMENTS_MAP = {
   button: undefined,
@@ -8,6 +15,10 @@ const ELEMENTS_MAP = {
 };
 
 describe('PBtn.vue', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   Object.keys(ELEMENTS_MAP).forEach((el) => {
     const to = ELEMENTS_MAP[el];
 
@@ -147,7 +158,8 @@ describe('PBtn.vue', () => {
     });
 
     const a = await wrapper.find('a');
-    expect(a.attributes().href).toBe('https://pequity.com/');
+
+    expect(a.attributes().href).toBe(`sanitized-https://pequity.com/`);
     expect(a.attributes().target).toBe('_blank');
     expect(a.text()).toBe('This is a button');
   });
@@ -185,4 +197,20 @@ describe('PBtn.vue', () => {
 
     expect(button.attributes()['aria-selected']).toBe('true');
   });
+
+  it('it sanitizes an invalid link', async () => {
+    const wrapper = createWrapperFor(PBtn, {
+      props: {
+        to: 'javascript:evil()',
+      },
+      slots: {
+        default: `This is a button`,
+      },
+    });
+
+    const a = await wrapper.find('a');
+
+    expect(a.text()).toBe('This is a button');
+    expect(sanitizeUrl).toHaveBeenCalledTimes(1);
+  });
 });

package/squirrel/components/p-btn/p-btn.vue

@@ -1,5 +1,11 @@
 <template>
-  <a v-if="isExternalLink" v-bind="$attrs" :href="to as string" target="_blank" :class="classes">
+  <a
+    v-if="typeof to === 'string' && isExternalLink(to)"
+    v-bind="$attrs"
+    :href="sanitizeUrl(to)"
+    target="_blank"
+    :class="classes"
+  >
     <slot></slot>
   </a>
   <Component
@@ -29,6 +35,8 @@ import { type Color, getColorDeep } from '@squirrel/utils/tailwind';
 import { type PropType, defineComponent } from 'vue';
 import { type RouteLocationRaw, RouterLink } from 'vue-router';
 import { type Size } from '@squirrel/components/p-btn/p-btn.types';
+import { isExternalLink } from '@squirrel/utils/link';
+import { sanitizeUrl } from '@squirrel/utils/sanitization';
 
 const BUTTON_TYPES = {
   PRIMARY: 'primary',
@@ -173,9 +181,10 @@ export default defineComponent({
 
       return getColorDeep(type);
     },
-    isExternalLink() {
-      return typeof this.to === 'string' && this.to.startsWith('http');
-    },
+  },
+  methods: {
+    isExternalLink,
+    sanitizeUrl,
   },
 });
 </script>

package/squirrel/components/p-close-btn/p-close-btn.spec.js

@@ -0,0 +1,60 @@
+import PCloseBtn from '@squirrel/components/p-close-btn/p-close-btn.vue';
+import { createWrapperFor } from '@tests/jest.helpers';
+
+const buttonClasses = [
+  'inline-flex',
+  'h-8',
+  'w-8',
+  'cursor-pointer',
+  'items-center',
+  'justify-center',
+  'rounded',
+  'focus:outline-none',
+  'disabled:cursor-default',
+  'disabled:opacity-30',
+  'disabled:hover:bg-white',
+];
+
+const iconClasses = ['block', 'h-3', 'w-3', 'bg-center', 'bg-no-repeat'];
+
+describe('PCloseBtn.vue', () => {
+  it('renders correctly', () => {
+    const wrapper = createWrapperFor(PCloseBtn);
+
+    const button = wrapper.find('button');
+    const i = wrapper.find('i');
+
+    expect(buttonClasses.every((c) => button.classes().includes(c))).toBe(true);
+    expect(iconClasses.every((c) => i.classes().includes(c))).toBe(true);
+  });
+
+  it('button inherits attributes', async () => {
+    const wrapper = createWrapperFor(PCloseBtn, {
+      attrs: {
+        disabled: true,
+        'data-test': 'test',
+      },
+    });
+
+    const button = await wrapper.find('button');
+
+    expect(button.attributes().disabled).toBeDefined();
+    expect(button.attributes('data-test')).toBe('test');
+  });
+
+  it.each([
+    ['transparent', ['bg-transparent', 'hover:bg-p-gray-20'], ['x-black-icon']],
+    ['gray', ['bg-p-gray-10', 'hover:bg-p-gray-20'], ['x-black-icon']],
+    ['dark', ['bg-transparent'], ['x-white-icon']],
+  ])('renders a PCloseBtn of variant %s', (variant, btnClasses, iClasses) => {
+    const wrapper = createWrapperFor(PCloseBtn, {
+      props: { variant },
+    });
+
+    const button = wrapper.find('button');
+    const i = wrapper.find('i');
+
+    expect(btnClasses.every((c) => button.classes().includes(c))).toBe(true);
+    expect(iClasses.every((c) => i.classes().includes(c))).toBe(true);
+  });
+});

package/squirrel/components/p-link/p-link.spec.js

@@ -0,0 +1,62 @@
+import PLink from '@squirrel/components/p-link/p-link.vue';
+import { createWrapperFor } from '@tests/jest.helpers';
+import { isExternalLink } from '@squirrel/utils/link';
+import { sanitizeUrl } from '@squirrel/utils/sanitization';
+
+jest.mock('@squirrel/utils/sanitization');
+
+jest.mock('@squirrel/utils/link');
+
+const createWrapper = (props, attrs) => {
+  return createWrapperFor(PLink, {
+    props,
+    attrs,
+    slots: {
+      default: 'Test link',
+    },
+    global: {
+      stubs: {
+        RouterLink: true,
+      },
+    },
+  });
+};
+
+describe('PLink.vue', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders a router link when the link is internal', () => {
+    isExternalLink.mockReturnValue(false);
+
+    const wrapper = createWrapper({ to: '/home' }, { class: 'p-link', 'data-test': 'test' });
+
+    const routerLink = wrapper.findComponent({ name: 'RouterLink' });
+
+    expect(routerLink.element).toBe(wrapper.element);
+    expect(routerLink.text()).toBe('Test link');
+    expect(routerLink.props().to).toBe('/home');
+    expect(routerLink.classes()).toContain('p-link');
+    expect(routerLink.attributes()['data-test']).toBe('test');
+    expect(isExternalLink).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders an a href link when the link is external', () => {
+    isExternalLink.mockReturnValue(true);
+    sanitizeUrl.mockReturnValue('https://www.pequity.com');
+
+    const wrapper = createWrapper({ to: 'https://www.pequity.com' }, { class: 'p-link', 'data-test': 'test' });
+
+    const aLink = wrapper.find('a');
+
+    expect(aLink.element).toBe(wrapper.element);
+    expect(aLink.text()).toBe('Test link');
+    expect(aLink.attributes().href).toBe('https://www.pequity.com');
+    expect(wrapper.classes()).toContain('p-link');
+    expect(wrapper.attributes()['data-test']).toBe('test');
+    expect(wrapper.attributes().target).toBe('_blank');
+    expect(isExternalLink).toHaveBeenCalledTimes(1);
+    expect(sanitizeUrl).toHaveBeenCalledTimes(1);
+  });
+});

package/squirrel/components/p-link/p-link.stories.js

@@ -0,0 +1,38 @@
+import PLink from '@squirrel/components/p-link/p-link.vue';
+
+export default {
+  title: 'Components/PLink',
+  component: PLink,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `The \`PLink\` component is a versatile link component designed to seamlessly handle both internal and external links.
+         It determines whether a given link is internal (for navigation within the app) or external (leading to a different website) and renders the appropriate link element accordingly.
+         In case of external links, it also sanitizes the URL to mitigate potential security risks like URL-based attacks.`,
+      },
+    },
+  },
+};
+
+export const InternalLink = {
+  render: (args) => ({
+    components: { PLink },
+    setup() {
+      return { args };
+    },
+    template: `<PLink v-bind="args" class="text-accent underline hover:text-accent">${args.default}</PLink>`,
+  }),
+  args: {
+    to: '/dummy',
+    default: 'Dummy internal link',
+  },
+};
+
+export const ExternalLink = {
+  ...InternalLink,
+  args: {
+    to: 'https://www.pequity.com',
+    default: 'Link to Pequity website',
+  },
+};

package/squirrel/components/p-link/p-link.vue

@@ -0,0 +1,20 @@
+<template>
+  <a v-if="typeof to === 'string' && isExternalLink(to)" :href="sanitizeUrl(to)" target="_blank">
+    <slot></slot>
+  </a>
+  <RouterLink v-else v-bind="$props">
+    <slot></slot>
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+import { RouterLink, type RouterLinkProps } from 'vue-router';
+import { isExternalLink } from '@squirrel/utils/link';
+import { sanitizeUrl } from '@squirrel/utils/sanitization';
+
+defineOptions({
+  name: 'PLink',
+});
+
+defineProps<RouterLinkProps>();
+</script>

package/squirrel/utils/index.ts

@@ -23,6 +23,7 @@ import {
 import { createPagingRange } from '@squirrel/utils/pagination';
 import { getNextActiveElement, isElement, isVisible } from '@squirrel/utils/dom';
 import { isObject } from '@squirrel/utils/object';
+import { sanitizeUrl } from '@squirrel/utils/sanitization';
 import { setupListKeyboardNavigation } from '@squirrel/utils/listKeyboardNavigation';
 import { splitStringForHighlight } from '@squirrel/utils/text';
 import { toNumberOrNull } from '@squirrel/utils/number';
@@ -57,6 +58,7 @@ export {
   isElement,
   isVisible,
   isObject,
+  sanitizeUrl,
   setupListKeyboardNavigation,
   splitStringForHighlight,
   toNumberOrNull,

package/squirrel/utils/link.spec.js

@@ -0,0 +1,24 @@
+import { isExternalLink } from '@squirrel/utils/link';
+
+describe('isExternalLink', () => {
+  it.each(['https://www.example.com', 'http://www.example.com', '//www.example.com'])(
+    'should return true for external links (%s)',
+    (val) => {
+      expect(isExternalLink(val)).toBe(true);
+    }
+  );
+
+  it.each(['/home', 'home', '#home', '/home//1/', '/home:1/', '#home:', { name: 'home' }])(
+    'should return false for internal links (%s)',
+    (val) => {
+      expect(isExternalLink(val)).toBe(false);
+    }
+  );
+
+  it.each(['ftp://www.example.com', 'mailto:test@example.com', 'tel:+1234567890', 'sms:+1234567890'])(
+    'should handle different protocols (%s)',
+    (val) => {
+      expect(isExternalLink(val)).toBe(true);
+    }
+  );
+});

package/squirrel/utils/link.ts

@@ -0,0 +1,36 @@
+const normalizeUrl = (url: string) => {
+  if (url.indexOf('//') === 0) {
+    url = location.protocol + url;
+  }
+
+  return url;
+};
+
+const isValidUrl = (url: string) => {
+  url = normalizeUrl(url);
+
+  try {
+    return Boolean(new URL(url));
+  } catch (e) {
+    return false;
+  }
+};
+
+const checkDomain = function (url: string) {
+  url = normalizeUrl(url);
+
+  return url
+    .toLowerCase()
+    .replace(/([a-z])?:\/\//, '$1')
+    .split('/')[0];
+};
+
+export const isExternalLink = function (url: string) {
+  url = String(url);
+
+  return (
+    isValidUrl(url) &&
+    (url.indexOf(':') > -1 || url.indexOf('//') > -1) &&
+    checkDomain(location.href) !== checkDomain(url)
+  );
+};

package/squirrel/utils/sanitization.spec.js

@@ -0,0 +1,57 @@
+import { sanitizeUrl } from '@squirrel/utils/sanitization';
+
+describe('sanitizeUrl', () => {
+  const consoleMock = jest.spyOn(console, 'warn').mockImplementation(() => undefined);
+
+  afterAll(() => {
+    consoleMock.mockReset();
+  });
+
+  it('reports unsafe URLs', () => {
+    const unsafeUrl = 'javascript:evil()';
+
+    expect(sanitizeUrl(unsafeUrl)).toBe(`unsafe:${unsafeUrl}`);
+    expect(consoleMock).toHaveBeenCalledWith(
+      expect.stringContaining(`WARNING: sanitizing unsafe URL value ${unsafeUrl}`)
+    );
+  });
+
+  it.each([
+    '',
+    'http://abc',
+    'HTTP://abc',
+    'https://abc',
+    'HTTPS://abc',
+    'ftp://abc',
+    'FTP://abc',
+    'mailto:me@example.com',
+    'MAILTO:me@example.com',
+    'tel:123-123-1234',
+    'TEL:123-123-1234',
+    '#anchor',
+    '/page1.md',
+    'http://JavaScript/my.js',
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/', // Truncated.
+    'data:video/webm;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/',
+    'data:audio/opus;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/',
+    'unknown-scheme:abc',
+  ])('returns the URL if it is valid (%s)', (urlVal) => {
+    expect(sanitizeUrl(urlVal)).toBe(urlVal);
+  });
+
+  it.each([
+    'javascript:evil()',
+    'JavaScript:abc',
+    ' javascript:abc',
+    ' \n Java\n Script:abc',
+    'javascript:',
+    '&#106avascript:',
+    '&#106 avascript:',
+    '&#0000106&#0000097&#0000118&#0000097&#0000115&#0000099&#0000114&#0000105&#0000112&#0000116&#0000058',
+    '&#x6A&#x61&#x76&#x61&#x73&#x63&#x72&#x69&#x70&#x74:',
+    'jav	ascript:alert();',
+    'jav\u0000ascript:alert();',
+  ])('it adds an "unsafe:" prefix if the URL is invalid (%s)', (urlVal) => {
+    expect(sanitizeUrl(urlVal)).toMatch(/^unsafe:/);
+  });
+});

package/squirrel/utils/sanitization.ts

@@ -0,0 +1,55 @@
+/**
+ * This is a port of the Angular url_sanitizer module.
+ * https://github.com/angular/angular/blob/main/packages/core/src/sanitization/url_sanitizer.ts
+ *
+ * TL;DR
+ * The function sanitizeUrl is designed to ensure that a given URL is safe,
+ * by checking it against a regular expression pattern (SAFE_URL_PATTERN).
+ * If the URL is considered unsafe, it returns a version of the URL prefixed with "unsafe:".
+ */
+
+/**
+ * A pattern that recognizes URLs that are safe wrt. XSS in URL navigation
+ * contexts.
+ *
+ * This regular expression matches a subset of URLs that will not cause script
+ * execution if used in URL context within a HTML document. Specifically, this
+ * regular expression matches if:
+ * (1) Either a protocol that is not javascript:, and that has valid characters
+ *     (alphanumeric or [+-.]).
+ * (2) or no protocol.  A protocol must be followed by a colon. The below
+ *     allows that by allowing colons only after one of the characters [/?#].
+ *     A colon after a hash (#) must be in the fragment.
+ *     Otherwise, a colon after a (?) must be in a query.
+ *     Otherwise, a colon after a single solidus (/) must be in a path.
+ *     Otherwise, a colon after a double solidus (//) must be in the authority
+ *     (before port).
+ *
+ * The pattern disallows &, used in HTML entity declarations before
+ * one of the characters in [/?#]. This disallows HTML entities used in the
+ * protocol name, which should never happen, e.g. "http" for "http".
+ * It also disallows HTML entities in the first path part of a relative path,
+ * e.g. "foo<bar/baz".  Our existing escaping functions should not produce
+ * that. More importantly, it disallows masking of a colon,
+ * e.g. "javascript:...".
+ *
+ * This regular expression was taken from the Closure sanitization library.
+ */
+
+const XSS_SECURITY_URL =
+  'https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html';
+
+// eslint-disable-next-line no-useless-escape
+const SAFE_URL_PATTERN = /^(?!javascript:)(?:[a-z0-9+.-]+:|[^&:\/?#]*(?:[\/?#]|$))/i;
+
+export const sanitizeUrl = (url: string) => {
+  url = String(url);
+
+  if (url.match(SAFE_URL_PATTERN)) {
+    return url;
+  }
+
+  console.warn(`WARNING: sanitizing unsafe URL value ${url} (see ${XSS_SECURITY_URL})`);
+
+  return 'unsafe:' + url;
+};