@instructure/ui-link 11.7.4-snapshot-136 → 11.7.4-snapshot-144

package/CHANGELOG.md

@@ -3,7 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.4-snapshot-136](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-136) (2026-07-24)
+## [11.7.4-snapshot-144](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-144) (2026-07-24)
+
+
+### Bug Fixes
+
+* **many:** do not allow javascript: and data: hrefs ([4a0ac03](https://github.com/instructure/instructure-ui/commit/4a0ac038c6a4102646e04d27c1c3251f97367822))
 
 
 ### Features

package/es/Link/v1/index.js

@@ -28,7 +28,7 @@ import { View } from '@instructure/ui-view/v11_6';
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import { isActiveElement, findFocusable } from '@instructure/ui-dom-utils';
 import { getElementType, getInteraction, matchComponentTypes, passthroughProps, callRenderProp } from '@instructure/ui-react-utils';
-import { combineDataCid } from '@instructure/ui-utils';
+import { combineDataCid, safeLinkProps } from '@instructure/ui-utils';
 import { logWarn as warn } from '@instructure/console';
 import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles.js';
@@ -182,13 +182,23 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       onClick,
       onMouseEnter,
       color,
-      href,
+      href: rawHref,
       margin,
       renderIcon,
       iconPlacement,
       isWithinText,
       ...props
     } = this.props;
+    const {
+      href,
+      rel
+    } = safeLinkProps({
+      attr: 'href',
+      tag: typeof this.element === 'string' ? this.element : 'a',
+      href: rawHref,
+      target: props.target,
+      rel: props.rel
+    });
     const {
       interaction
     } = this;
@@ -202,6 +212,7 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       display: this.display,
       margin: margin,
       href: href,
+      rel: rel,
       onMouseEnter: onMouseEnter,
       onClick: this.handleClick,
       onFocus: this.handleFocus,

package/es/Link/v2/index.js

@@ -28,7 +28,7 @@ import { View } from '@instructure/ui-view/latest';
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import { isActiveElement, findFocusable } from '@instructure/ui-dom-utils';
 import { getElementType, getInteraction, matchComponentTypes, passthroughProps } from '@instructure/ui-react-utils';
-import { combineDataCid } from '@instructure/ui-utils';
+import { combineDataCid, safeLinkProps } from '@instructure/ui-utils';
 import { logWarn as warn } from '@instructure/console';
 import { renderIconWithProps } from '@instructure/ui-icons';
 import { withStyleNew } from '@instructure/emotion';
@@ -206,12 +206,22 @@ let Link = (_dec = withStyleNew(generateStyle), _dec(_class = class Link extends
       onClick,
       onMouseEnter,
       color,
-      href,
+      href: rawHref,
       margin,
       renderIcon,
       iconPlacement,
       ...props
     } = this.props;
+    const {
+      href,
+      rel
+    } = safeLinkProps({
+      attr: 'href',
+      tag: typeof this.element === 'string' ? this.element : 'a',
+      href: rawHref,
+      target: props.target,
+      rel: props.rel
+    });
     const {
       interaction
     } = this;
@@ -225,6 +235,7 @@ let Link = (_dec = withStyleNew(generateStyle), _dec(_class = class Link extends
       display: this.display,
       margin: margin,
       href: href,
+      rel: rel,
       onMouseEnter: onMouseEnter,
       onClick: this.handleClick,
       onFocus: this.handleFocus,

package/lib/Link/v1/index.js

@@ -16,6 +16,7 @@ var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchCompone
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 var _combineDataCid = require("@instructure/ui-utils/lib/combineDataCid.js");
+var _safeLinkProps = require("@instructure/ui-utils/lib/safeLinkProps.js");
 var _console = require("@instructure/console");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles.js"));
@@ -193,13 +194,23 @@ let Link = exports.Link = (_dec = (0, _emotion.withStyle)(_styles.default, _them
       onClick,
       onMouseEnter,
       color,
-      href,
+      href: rawHref,
       margin,
       renderIcon,
       iconPlacement,
       isWithinText,
       ...props
     } = this.props;
+    const {
+      href,
+      rel
+    } = (0, _safeLinkProps.safeLinkProps)({
+      attr: 'href',
+      tag: typeof this.element === 'string' ? this.element : 'a',
+      href: rawHref,
+      target: props.target,
+      rel: props.rel
+    });
     const {
       interaction
     } = this;
@@ -213,6 +224,7 @@ let Link = exports.Link = (_dec = (0, _emotion.withStyle)(_styles.default, _them
       display: this.display,
       margin: margin,
       href: href,
+      rel: rel,
       onMouseEnter: onMouseEnter,
       onClick: this.handleClick,
       onFocus: this.handleFocus,

package/lib/Link/v2/index.js

@@ -15,6 +15,7 @@ var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _combineDataCid = require("@instructure/ui-utils/lib/combineDataCid.js");
+var _safeLinkProps = require("@instructure/ui-utils/lib/safeLinkProps.js");
 var _console = require("@instructure/console");
 var _renderIconWithProps = require("@instructure/ui-icons/lib/IconPropsProvider/renderIconWithProps.js");
 var _emotion = require("@instructure/emotion");
@@ -216,12 +217,22 @@ let Link = exports.Link = (_dec = (0, _emotion.withStyleNew)(_styles.default), _
       onClick,
       onMouseEnter,
       color,
-      href,
+      href: rawHref,
       margin,
       renderIcon,
       iconPlacement,
       ...props
     } = this.props;
+    const {
+      href,
+      rel
+    } = (0, _safeLinkProps.safeLinkProps)({
+      attr: 'href',
+      tag: typeof this.element === 'string' ? this.element : 'a',
+      href: rawHref,
+      target: props.target,
+      rel: props.rel
+    });
     const {
       interaction
     } = this;
@@ -235,6 +246,7 @@ let Link = exports.Link = (_dec = (0, _emotion.withStyleNew)(_styles.default), _
       display: this.display,
       margin: margin,
       href: href,
+      rel: rel,
       onMouseEnter: onMouseEnter,
       onClick: this.handleClick,
       onFocus: this.handleFocus,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-link",
-  "version": "11.7.4-snapshot-136",
+  "version": "11.7.4-snapshot-144",
   "description": "A component for creating links",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,25 +15,25 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/console": "11.7.4-snapshot-136",
-    "@instructure/emotion": "11.7.4-snapshot-136",
-    "@instructure/ui-a11y-utils": "11.7.4-snapshot-136",
-    "@instructure/shared-types": "11.7.4-snapshot-136",
-    "@instructure/ui-color-utils": "11.7.4-snapshot-136",
-    "@instructure/ui-dom-utils": "11.7.4-snapshot-136",
-    "@instructure/ui-icons": "11.7.4-snapshot-136",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-136",
-    "@instructure/ui-utils": "11.7.4-snapshot-136",
-    "@instructure/ui-themes": "11.7.4-snapshot-136",
-    "@instructure/ui-view": "11.7.4-snapshot-136"
+    "@instructure/console": "11.7.4-snapshot-144",
+    "@instructure/shared-types": "11.7.4-snapshot-144",
+    "@instructure/ui-color-utils": "11.7.4-snapshot-144",
+    "@instructure/ui-dom-utils": "11.7.4-snapshot-144",
+    "@instructure/ui-a11y-utils": "11.7.4-snapshot-144",
+    "@instructure/ui-icons": "11.7.4-snapshot-144",
+    "@instructure/emotion": "11.7.4-snapshot-144",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-144",
+    "@instructure/ui-themes": "11.7.4-snapshot-144",
+    "@instructure/ui-utils": "11.7.4-snapshot-144",
+    "@instructure/ui-view": "11.7.4-snapshot-144"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^4.1.9",
-    "@instructure/ui-axe-check": "11.7.4-snapshot-136",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-136"
+    "@instructure/ui-axe-check": "11.7.4-snapshot-144",
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-144"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Link/v1/index.tsx

@@ -34,7 +34,7 @@ import {
   passthroughProps,
   callRenderProp
 } from '@instructure/ui-react-utils'
-import { combineDataCid } from '@instructure/ui-utils'
+import { combineDataCid, safeLinkProps } from '@instructure/ui-utils'
 import { logWarn as warn } from '@instructure/console'
 
 import { withStyle } from '@instructure/emotion'
@@ -213,13 +213,20 @@ class Link extends Component<LinkProps, LinkState> {
       onClick,
       onMouseEnter,
       color,
-      href,
+      href: rawHref,
       margin,
       renderIcon,
       iconPlacement,
       isWithinText,
       ...props
     } = this.props
+    const { href, rel } = safeLinkProps({
+      attr: 'href',
+      tag: typeof this.element === 'string' ? this.element : 'a',
+      href: rawHref,
+      target: (props as { target?: string }).target,
+      rel: (props as { rel?: string }).rel
+    })
 
     const { interaction } = this
 
@@ -240,6 +247,7 @@ class Link extends Component<LinkProps, LinkState> {
         display={this.display}
         margin={margin}
         href={href}
+        rel={rel}
         onMouseEnter={onMouseEnter}
         onClick={this.handleClick}
         onFocus={this.handleFocus}

package/src/Link/v2/index.tsx

@@ -33,7 +33,7 @@ import {
   matchComponentTypes,
   passthroughProps
 } from '@instructure/ui-react-utils'
-import { combineDataCid } from '@instructure/ui-utils'
+import { combineDataCid, safeLinkProps } from '@instructure/ui-utils'
 import { logWarn as warn } from '@instructure/console'
 import { renderIconWithProps } from '@instructure/ui-icons'
 
@@ -235,12 +235,19 @@ class Link extends Component<LinkProps, LinkState> {
       onClick,
       onMouseEnter,
       color,
-      href,
+      href: rawHref,
       margin,
       renderIcon,
       iconPlacement,
       ...props
     } = this.props
+    const { href, rel } = safeLinkProps({
+      attr: 'href',
+      tag: typeof this.element === 'string' ? this.element : 'a',
+      href: rawHref,
+      target: (props as { target?: string }).target,
+      rel: (props as { rel?: string }).rel
+    })
 
     const { interaction } = this
 
@@ -261,6 +268,7 @@ class Link extends Component<LinkProps, LinkState> {
         display={this.display}
         margin={margin}
         href={href}
+        rel={rel}
         onMouseEnter={onMouseEnter}
         onClick={this.handleClick}
         onFocus={this.handleFocus}