@pequity/squirrel 4.0.0 → 4.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "4.0.0",
+  "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.1",
+    "@types/node": "^22.5.0",
     "@vitejs/plugin-vue": "^5.1.2",
     "@vue/compiler-sfc": "3.4.38",
     "@vue/test-utils": "^2.4.6",
@@ -83,7 +83,7 @@
     "autoprefixer": "^10.4.20",
     "babel-jest": "^29.7.0",
     "concurrently": "^8.2.2",
-    "dayjs": "1.11.12",
+    "dayjs": "1.11.13",
     "eslint": "^8.57.0",
     "eslint-plugin-storybook": "^0.8.0",
     "floating-vue": "5.2.2",
@@ -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-info-icon/p-info-icon.spec.js

@@ -55,4 +55,25 @@ describe('PInfoIcon.vue', () => {
 
     expect(wrapper.text()).toBe('Lorem ipsum dolor sit amet.');
   });
+
+  it('tooltip should stay visible on hover', async () => {
+    const wrapper = createWrapperFor(PInfoIcon, {
+      props: {
+        text: '',
+      },
+      slots: {
+        default: 'Lorem ipsum dolor sit amet.',
+      },
+      global: {
+        stubs: {
+          VTooltip: true,
+        },
+      },
+    });
+
+    const tooltip = wrapper.findComponent('v-tooltip-stub');
+
+    expect(tooltip.props().popperTriggers).toEqual(['hover']);
+    expect(tooltip.props().delay).toEqual({ show: 750, hide: 0 });
+  });
 });

package/squirrel/components/p-info-icon/p-info-icon.stories.js

@@ -55,3 +55,35 @@ export const DifferentPlacements = {
     },
   },
 };
+
+export const WithBigText = {
+  render: (args) => ({
+    components: { PInfoIcon },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="w-full pt-60 pb-20 flex justify-center">
+        <PInfoIcon v-bind="args" />
+      </div>`,
+  }),
+  args: {
+    text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada convallis ultricies.
+    Pellentesque rhoncus felis et neque pellentesque pretium.
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada convallis ultricies.
+    Pellentesque rhoncus felis et neque pellentesque pretium.
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada convallis ultricies.
+    Pellentesque rhoncus felis et neque pellentesque pretium.
+    `,
+    placement: 'top',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `The info tooltip allows for long text and the ability to scroll.`,
+      },
+    },
+  },
+};

package/squirrel/components/p-info-icon/p-info-icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <VTooltip>
+  <VTooltip :popper-triggers="['hover']" :delay="{ show: 750, hide: 0 }">
     <i class="bg-info-circle-icon block h-3 w-3"></i>
     <template #popper>
       <slot>{{ text }}</slot>

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/components/p-modal/p-modal-features.spec.js

@@ -9,7 +9,7 @@ const ModalParent = {
   template: `
   <div>
     <button type="button" class="open-modal-1" @click="showModal1 = true">Open modal 1</button>
-    <Modal1 wrapperClass="modal-1" v-model="showModal1" :title="title" :live="live">
+    <Modal1 wrapperClass="modal-1" v-model="showModal1" :title="title" :live="live" :enable-close="enableClose">
       <div>
         <input v-if="showInput" type="text" value="" autofocus class="text-input" />
         <button type="button" class="open-modal-2" @click="showModal2 = true">Open modal 2</button>
@@ -52,6 +52,7 @@ const createModalsWrapper = (data) => {
           title: 'Test title',
           showModal1: false,
           showModal2: false,
+          enableClose: true,
         },
         ...data,
       };
@@ -321,4 +322,25 @@ describe('Modal features', () => {
 
     wrapper.unmount();
   });
+
+  it('makes the close button invisible instead of hidden, when enableClose is false', async () => {
+    const wrapper = createModalsWrapper({
+      enableClose: false,
+    });
+
+    await waitNT(wrapper.vm);
+
+    await wrapper.find('.open-modal-1').trigger('click');
+
+    await sleep(100);
+
+    const modal1 = wrapper.getComponent('.modal-1');
+
+    const closeBtn = modal1.find('button[aria-label="Close"]');
+
+    expect(closeBtn.isVisible()).toBe(true);
+    expect(closeBtn.classes()).toContain('invisible');
+
+    wrapper.unmount();
+  });
 });

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

@@ -36,7 +36,12 @@
                 {{ title }}
               </h3>
               <div class="ml-auto">
-                <PCloseBtn v-if="enableClose" :disabled="disabled" :aria-label="closeLabel" @click.prevent="close" />
+                <PCloseBtn
+                  :disabled="disabled"
+                  :class="{ invisible: !enableClose }"
+                  :aria-label="closeLabel"
+                  @click.prevent="close"
+                />
               </div>
             </div>
           </slot>

package/squirrel/components/p-table-header-cell/p-table-header-cell.stories.js

@@ -43,10 +43,10 @@ export const Active = {
   },
 };
 
-export const WithToolyip = {
+export const WithTooltip = {
   args: {
     ...Default.args,
-    tooltipText: 'This is a tooltip',
+    tooltipText: `Lorem ipsum dolor sit amet.`,
   },
 };
 

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;
+};