@flux-ui/components 3.0.0-next.72 → 3.0.0-next.73

package/dist/util/index.d.ts

@@ -2,3 +2,4 @@ export { default as createDialogRenderer } from './createDialogRenderer';
 export { default as createLabelForDateRange } from './createLabelForDateRange';
 export { default as defineFilter, type FluxFilterDefinitionFactory } from './defineFilter';
 export { generateMultiOptionsLabel, isFluxFilterOptionHeader, isFluxFilterOptionItem, isResettable, pickFilterCommon } from './filter';
+export { default as sanitizeUrl } from './sanitizeUrl';

package/dist/util/sanitizeUrl.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Sanitizes a URL intended for an `href` attribute. Returns `undefined` when the
+ * URL uses a dangerous scheme (`javascript:`, `vbscript:`, `data:`) so the attribute
+ * is omitted instead of becoming a script-execution or data-injection vector.
+ * Safe and relative URLs are returned unchanged.
+ */
+export default function (href?: string): string | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.0.0-next.72",
+    "version": "3.0.0-next.73",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -57,8 +57,8 @@
     "dependencies": {
         "@basmilius/common": "^3.37.0",
         "@basmilius/utils": "^3.37.0",
-        "@flux-ui/internals": "3.0.0-next.72",
-        "@flux-ui/types": "3.0.0-next.72",
+        "@flux-ui/internals": "3.0.0-next.73",
+        "@flux-ui/types": "3.0.0-next.73",
         "@fortawesome/fontawesome-common-types": "^7.2.0",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",

package/src/component/FluxColorPicker.vue

@@ -134,10 +134,10 @@
     import { blue500 } from '@flux-ui/internals';
     import { computed, type ComputedRef, ref, unref, watch } from 'vue';
     import { useTranslate } from '~flux/components/composable/private';
-    import CoordinatePicker from './primitive/CoordinatePicker.vue';
     import FluxFormField from './FluxFormField.vue';
     import FluxFormInput from './FluxFormInput.vue';
     import FluxFormSlider from './FluxFormSlider.vue';
+    import CoordinatePicker from './primitive/CoordinatePicker.vue';
     import $style from '~flux/components/css/component/Color.module.scss';
 
     const modelValue = defineModel<string | [number, number, number]>({

package/src/component/FluxFormField.vue

@@ -3,7 +3,9 @@
         <label
             :for="id"
             :class="$style.formFieldHeader">
-            <span :class="$style.formFieldLabel">
+            <span
+                v-if="label"
+                :class="$style.formFieldLabel">
                 {{ label }}
             </span>
 
@@ -61,7 +63,7 @@
         readonly error?: string;
         readonly hint?: string;
         readonly isOptional?: boolean;
-        readonly label: string;
+        readonly label?: string;
         readonly maxLength?: number;
     }>();
 

package/src/component/FluxKanbanColumn.vue

@@ -80,9 +80,9 @@
     import { Comment, computed, onBeforeUnmount, onMounted, provide, Text, toRef, unref, useSlots, useTemplateRef, watch } from 'vue';
     import { useDisabled, useKanbanInjection } from '~flux/components/composable';
     import { FluxDisabledInjectionKey } from '~flux/components/data';
-    import $style from '~flux/components/css/component/Kanban.module.scss';
     import FluxBadge from './FluxBadge.vue';
     import FluxIcon from './FluxIcon.vue';
+    import $style from '~flux/components/css/component/Kanban.module.scss';
 
     const {
         columnId,

package/src/component/FluxPressable.vue

@@ -3,7 +3,7 @@
         v-if="componentType === 'route'"
         v-bind="$attrs"
         v-on="hoverListeners"
-        :rel="rel"
+        :rel="resolvedRel"
         :target="target"
         :to="to as any"
         @click="onClick($event)">
@@ -14,8 +14,8 @@
         v-else-if="componentType === 'link'"
         v-bind="$attrs"
         v-on="hoverListeners"
-        :href="href"
-        :rel="rel"
+        :href="sanitizeUrl(href)"
+        :rel="resolvedRel"
         :target="target"
         @click="onClick($event)">
         <slot/>
@@ -42,7 +42,8 @@
     lang="ts"
     setup>
     import type { FluxPressableType, FluxTo } from '@flux-ui/types';
-    import type { VNode } from 'vue';
+    import { computed, type VNode } from 'vue';
+    import { sanitizeUrl } from '~flux/components/util';
 
     const emit = defineEmits<{
         click: [MouseEvent];
@@ -50,7 +51,7 @@
         mouseleave: [MouseEvent];
     }>();
 
-    defineProps<{
+    const {rel, target} = defineProps<{
         readonly componentType?: FluxPressableType;
         readonly href?: string;
         readonly rel?: string;
@@ -62,6 +63,14 @@
         default(): VNode[];
     }>();
 
+    const resolvedRel = computed(() => {
+        if (rel) {
+            return rel;
+        }
+
+        return target === '_blank' ? 'noopener noreferrer' : undefined;
+    });
+
     const hoverListeners = {
         onMouseenter: (evt: MouseEvent) => emit('mouseenter', evt),
         onMouseleave: (evt: MouseEvent) => emit('mouseleave', evt)

package/src/component/primitive/DialogLayout.vue

@@ -4,9 +4,9 @@
             :icon="icon"
             :title="title"/>
 
-        <FluxPaneBody
-            v-if="message"
-            v-html="message"/>
+        <FluxPaneBody v-if="message">
+            {{ message }}
+        </FluxPaneBody>
 
         <FluxPaneBody v-if="$slots.default">
             <slot/>

package/src/util/index.ts

@@ -2,3 +2,4 @@ export { default as createDialogRenderer } from './createDialogRenderer';
 export { default as createLabelForDateRange } from './createLabelForDateRange';
 export { default as defineFilter, type FluxFilterDefinitionFactory } from './defineFilter';
 export { generateMultiOptionsLabel, isFluxFilterOptionHeader, isFluxFilterOptionItem, isResettable, pickFilterCommon } from './filter';
+export { default as sanitizeUrl } from './sanitizeUrl';

package/src/util/sanitizeUrl.ts

@@ -0,0 +1,40 @@
+const DANGEROUS_PROTOCOL = /^(javascript|vbscript|data):/i;
+
+/**
+ * Removes control characters (and the Unicode line/paragraph separators) that
+ * browsers ignore inside URLs but which can be used to obfuscate the scheme,
+ * e.g. `java\tscript:alert(1)`.
+ */
+function stripControlChars(value: string): string {
+    let out = '';
+
+    for (let i = 0; i < value.length; i++) {
+        const code = value.charCodeAt(i);
+
+        if (code <= 0x20 || (code >= 0x7f && code <= 0x9f) || code === 0x2028 || code === 0x2029) {
+            continue;
+        }
+
+        out += value[i];
+    }
+
+    return out;
+}
+
+/**
+ * Sanitizes a URL intended for an `href` attribute. Returns `undefined` when the
+ * URL uses a dangerous scheme (`javascript:`, `vbscript:`, `data:`) so the attribute
+ * is omitted instead of becoming a script-execution or data-injection vector.
+ * Safe and relative URLs are returned unchanged.
+ */
+export default function (href?: string): string | undefined {
+    if (!href) {
+        return href;
+    }
+
+    if (DANGEROUS_PROTOCOL.test(stripControlChars(href))) {
+        return undefined;
+    }
+
+    return href;
+}