Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .changeset/hot-hornets-wash.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
---
---
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export const CardClerkAndPagesTag = React.memo(
>
<>
<Text variant='buttonSmall'>Secured by</Text>
<LogoMarkIconLink />
<LogoMarkIconLink sx={{ transform: 'translateY(-1px)' }} />
</>
</Flex>
)}
Expand All @@ -90,13 +90,14 @@ export const CardClerkAndPagesTag = React.memo(
}),
);

const LogoMarkIconLink = () => {
const LogoMarkIconLink = (props: PropsOfComponent<typeof Link>) => {
return (
<Link
href='https://go.clerk.com/components'
colorScheme='inherit'
isExternal
aria-label='Clerk logo'
{...props}
>
Comment on lines +93 to 101
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

❓ Verification inconclusive

Don’t allow callers to override invariant Link props (href, isExternal, aria-label)

Spreading {...props} after fixed props lets consumers change href/isExternal/aria-label, which weakens UX and can be a security posture gap. Also: localize the aria label, add default element descriptors, and prefer an explicit return type.

Minimal safe fix (preserve invariants by ordering):

-    <Link
-      href='https://go.clerk.com/components'
-      colorScheme='inherit'
-      isExternal
-      aria-label='Clerk logo'
-      {...props}
-    >
+    <Link
+      {...props}
+      href='https://go.clerk.com/components'
+      colorScheme='inherit'
+      isExternal
+      aria-label='Clerk logo'
+      elementDescriptor='logoMarkIconLink'
+    >

Prefer stricter surface (only allow styling/theming props):

-const LogoMarkIconLink = (props: PropsOfComponent<typeof Link>) => {
+type LogoMarkIconLinkProps = Pick<PropsOfComponent<typeof Link>, 'sx' | 'className' | 'elementDescriptor' | 'elementId'>;
+const LogoMarkIconLink = (props: LogoMarkIconLinkProps): JSX.Element => {

Localize the aria label (illustrative—use your localization util/key):

-      aria-label='Clerk logo'
+      aria-label={/* t('clerk.logoAriaLabel') */ 'Clerk logo'}

Optional: add an element descriptor to the icon for theming:

       <Icon
         icon={LogoMark}
+        elementDescriptor="logoMarkIcon"
         sx={theme => ({
           width: theme.sizes.$12,
           height: theme.sizes.$3x5,
         })}
       />

Note: Ensure the Link component sets rel="noopener noreferrer" when isExternal is true (if not already handled internally).


Prevent callers from overriding invariant Link props

Spreading {...props} after fixed props allows consumers to override href / isExternal / aria-label (UX/security risk). Fix required.

File: packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx (lines 93–101)

Minimal safe fix (preserve invariants by ordering):

-    <Link
-      href='https://go.clerk.com/components'
-      colorScheme='inherit'
-      isExternal
-      aria-label='Clerk logo'
-      {...props}
-    >
+    <Link
+      {...props}
+      href='https://go.clerk.com/components'
+      colorScheme='inherit'
+      isExternal
+      aria-label='Clerk logo'
+      elementDescriptor='logoMarkIconLink'
+    >

Recommended extras (brief):

  • Narrow public surface: type LogoMarkIconLinkProps = Pick<PropsOfComponent, 'sx' | 'className' | 'elementDescriptor' | 'elementId'>; const LogoMarkIconLink = (props: LogoMarkIconLinkProps): JSX.Element => { ... }
  • Localize aria-label (use i18n key).
  • Ensure Link sets rel="noopener noreferrer" when isExternal (if not already handled).
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const LogoMarkIconLink = (props: PropsOfComponent<typeof Link>) => {
return (
<Link
href='https://go.clerk.com/components'
colorScheme='inherit'
isExternal
aria-label='Clerk logo'
{...props}
>
const LogoMarkIconLink = (props: PropsOfComponent<typeof Link>) => {
return (
<Link
{...props}
href='https://go.clerk.com/components'
colorScheme='inherit'
isExternal
aria-label='Clerk logo'
elementDescriptor='logoMarkIconLink'
>
🤖 Prompt for AI Agents
packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx around lines
93–101: the component spreads {...props} after fixed Link props which allows
callers to override invariants (href, isExternal, aria-label); reorder and/or
pick-safe props so fixed props cannot be overridden and only allow a small safe
set from callers. Change the component to accept a narrowed
LogoMarkIconLinkProps type (e.g. Pick<PropsOfComponent<typeof Link>,
'sx'|'className'|'elementDescriptor'|'elementId'>) and spread those props into
Link before or instead of spreading arbitrary props; ensure
href='https://go.clerk.com/components', isExternal, aria-label remain
hard-coded, and add rel="noopener noreferrer" to the Link when isExternal if not
already applied; optionally replace aria-label with an i18n key.

<Icon
icon={LogoMark}
Expand Down
Loading