feat(clerk-js): Added integrity attribute support
#4918
Conversation
🦋 Changeset detectedLatest commit: 42e689e The changes in this PR will be included in the next version bump. This PR includes changesets to release 19 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
jonahallibone
changed the title
integrity attribute supportintegrity attribute support
|
@jonahallibone is attempting to deploy a commit to the Clerk Production Team on Vercel. A member of the Team first needs to authorize it. |
|
Hello 👋 We currently close PRs after 60 days of inactivity. It's been 50 days since the last update here. If we missed this PR, please reply here. Otherwise, we'll close this PR in 10 days. Thanks for being a part of the Clerk community! 🙏 |
|
Any update on either this PR or this idea? |
|
Hello 👋 We currently close PRs after 60 days of inactivity. It's been 50 days since the last update here. If we missed this PR, please reply here. Otherwise, we'll close this PR in 10 days. Thanks for being a part of the Clerk community! 🙏 |
📝 WalkthroughWalkthroughThis change introduces support for the Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/shared/src/loadScript.ts (1)
30-34: Remove extra blank lines for consistency.The logic for setting the
integrityattribute is correct and follows the same pattern as other conditional attributes. However, there are unnecessary blank lines that should be removed for consistency with the rest of the file.- - if (crossOrigin) script.setAttribute('crossorigin', crossOrigin); if (integrity) script.setAttribute('integrity', integrity); -
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
.changeset/shaggy-students-jog.md(1 hunks)packages/nextjs/src/utils/clerk-js-script.tsx(2 hunks)packages/react/src/types.ts(1 hunks)packages/shared/src/__tests__/loadClerkJsScript.test.ts(3 hunks)packages/shared/src/loadClerkJsScript.ts(3 hunks)packages/shared/src/loadScript.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (7)
`**/*.{js,ts,tsx,jsx}`: All code must pass ESLint checks with the project's configuration. Use Prettier for consistent code formatting.
**/*.{js,ts,tsx,jsx}: All code must pass ESLint checks with the project's configuration.
Use Prettier for consistent code formatting.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/development.mdc)
List of files the instruction was applied to:
packages/react/src/types.tspackages/shared/src/loadClerkJsScript.tspackages/shared/src/__tests__/loadClerkJsScript.test.tspackages/shared/src/loadScript.tspackages/nextjs/src/utils/clerk-js-script.tsx
`**/*.{ts,tsx}`: Maintain comprehensive JSDoc comments for public APIs.
**/*.{ts,tsx}: Maintain comprehensive JSDoc comments for public APIs.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/development.mdc)
List of files the instruction was applied to:
packages/react/src/types.tspackages/shared/src/loadClerkJsScript.tspackages/shared/src/__tests__/loadClerkJsScript.test.tspackages/shared/src/loadScript.tspackages/nextjs/src/utils/clerk-js-script.tsx
`packages/**`: All publishable packages under the @clerk namespace must be located in the packages/ directory.
packages/**: All publishable packages under the @clerk namespace must be located in the packages/ directory.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/global.mdc)
List of files the instruction was applied to:
packages/react/src/types.tspackages/shared/src/loadClerkJsScript.tspackages/shared/src/__tests__/loadClerkJsScript.test.tspackages/shared/src/loadScript.tspackages/nextjs/src/utils/clerk-js-script.tsx
`**/*.ts`: Always define explicit return types for functions, especially public ...
**/*.ts: Always define explicit return types for functions, especially public APIs.
Use proper type annotations for variables and parameters where inference isn't clear.
Avoidanytype; preferunknownwhen type is uncertain, then narrow with type guards.
Useinterfacefor object shapes that might be extended; usetypefor unions, primitives, and computed types.
Preferreadonlyproperties for immutable data structures.
Useprivatefor internal implementation details,protectedfor inheritance, andpublicexplicitly for clarity in public APIs.
Prefer composition and interfaces over deep inheritance chains; use mixins for shared behavior.
Use ES6 imports/exports consistently; avoid barrel files (index.ts re-exports) to prevent circular dependencies.
Use type-only imports (import type { ... }) where possible.
Useas constfor literal types and thesatisfiesoperator for type checking without widening.
Enable--incrementaland--tsBuildInfoFilefor faster builds.
Use ESLint with @typescript-eslint/recommended rules and Prettier for formatting.
Use lint-staged and Husky for pre-commit checks.
Use type-coverage to measure type safety.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/typescript.mdc)
List of files the instruction was applied to:
packages/react/src/types.tspackages/shared/src/loadClerkJsScript.tspackages/shared/src/__tests__/loadClerkJsScript.test.tspackages/shared/src/loadScript.ts
`**/*.{test,spec}.{js,ts,tsx,jsx}`: Unit tests are required for all new functionality.
**/*.{test,spec}.{js,ts,tsx,jsx}: Unit tests are required for all new functionality.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/development.mdc)
List of files the instruction was applied to:
packages/shared/src/__tests__/loadClerkJsScript.test.ts
`**/__tests__/**/*.{js,ts,tsx,jsx}`: Test files should be co-located with source files or in `__tests__` directories.
**/__tests__/**/*.{js,ts,tsx,jsx}: Test files should be co-located with source files or in__tests__directories.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/development.mdc)
List of files the instruction was applied to:
packages/shared/src/__tests__/loadClerkJsScript.test.ts
`**/*.{jsx,tsx}`: Always use functional components with hooks instead of class c...
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components.
Follow PascalCase naming for components; the filename and component name should match.
Limit component size to 150-200 lines; extract logic into custom hooks.
Export components as named exports for better tree-shaking.
One component per file with matching filename and component name.
Co-locate related files (component, test, stories) in the same directory.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/react.mdc)
List of files the instruction was applied to:
packages/nextjs/src/utils/clerk-js-script.tsx
🧠 Learnings (6)
📓 Common learnings
Learnt from: dstaley
PR: clerk/javascript#6116
File: .changeset/tangy-garlics-say.md:1-2
Timestamp: 2025-06-13T16:09:53.061Z
Learning: In the Clerk JavaScript repository, contributors create intentionally empty changeset files (containing only the YAML delimiters) when a PR touches only non-published parts of the codebase (e.g., sandbox assets). This signals that no package release is required, so such changesets should not be flagged as missing content.
Learnt from: jacekradko
PR: clerk/javascript#5905
File: .changeset/six-ears-wash.md:1-3
Timestamp: 2025-06-26T03:27:05.511Z
Learning: In the Clerk JavaScript repository, changeset headers support single quotes syntax (e.g., '@clerk/backend': minor) and work fine with their current changesets integration, so there's no need to change them to double quotes.
.changeset/shaggy-students-jog.md (8)
Learnt from: dstaley
PR: clerk/javascript#6116
File: .changeset/tangy-garlics-say.md:1-2
Timestamp: 2025-06-13T16:09:53.061Z
Learning: In the Clerk JavaScript repository, contributors create intentionally empty changeset files (containing only the YAML delimiters) when a PR touches only non-published parts of the codebase (e.g., sandbox assets). This signals that no package release is required, so such changesets should not be flagged as missing content.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-23T12:25:40.214Z
Learning: Framework packages depend on @clerk/clerk-js for core functionality, while @clerk/shared and @clerk/types provide common utilities and TypeScript definitions used across packages.
Learnt from: jacekradko
PR: clerk/javascript#5905
File: .changeset/six-ears-wash.md:1-3
Timestamp: 2025-06-26T03:27:05.511Z
Learning: In the Clerk JavaScript repository, changeset headers support single quotes syntax (e.g., '@clerk/backend': minor) and work fine with their current changesets integration, so there's no need to change them to double quotes.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-23T12:25:40.214Z
Learning: Each framework integration package (e.g., @clerk/nextjs, @clerk/clerk-react, @clerk/vue) is designed to provide idiomatic support for its respective framework.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-23T12:25:40.214Z
Learning: All packages are published under the @clerk namespace on npm, ensuring consistent naming and discoverability.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-23T12:25:40.214Z
Learning: Environment variables prefixed with CLERK_* and NEXT_PUBLIC_CLERK_* are supported for configuration across different environments.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/nextjs.mdc:0-0
Timestamp: 2025-06-23T12:25:50.109Z
Learning: Add the 'use client' directive at the top of files that require client-side features in Next.js.
Learnt from: dstaley
PR: clerk/javascript#6100
File: packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx:121-124
Timestamp: 2025-06-16T17:08:58.414Z
Learning: The @clerk/clerk-js package only supports browsers released in the last two years (since May 8, 2023), so modern CSS features like color-mix() are fully supported across all target browsers without requiring fallbacks.
packages/react/src/types.ts (2)
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-23T12:25:40.214Z
Learning: Framework packages depend on @clerk/clerk-js for core functionality, while @clerk/shared and @clerk/types provide common utilities and TypeScript definitions used across packages.
Learnt from: dstaley
PR: clerk/javascript#6116
File: .changeset/tangy-garlics-say.md:1-2
Timestamp: 2025-06-13T16:09:53.061Z
Learning: In the Clerk JavaScript repository, contributors create intentionally empty changeset files (containing only the YAML delimiters) when a PR touches only non-published parts of the codebase (e.g., sandbox assets). This signals that no package release is required, so such changesets should not be flagged as missing content.
packages/shared/src/loadClerkJsScript.ts (1)
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-23T12:25:40.214Z
Learning: Framework packages depend on @clerk/clerk-js for core functionality, while @clerk/shared and @clerk/types provide common utilities and TypeScript definitions used across packages.
packages/shared/src/__tests__/loadClerkJsScript.test.ts (4)
Learnt from: dstaley
PR: clerk/javascript#6116
File: .changeset/tangy-garlics-say.md:1-2
Timestamp: 2025-06-13T16:09:53.061Z
Learning: In the Clerk JavaScript repository, contributors create intentionally empty changeset files (containing only the YAML delimiters) when a PR touches only non-published parts of the codebase (e.g., sandbox assets). This signals that no package release is required, so such changesets should not be flagged as missing content.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-23T12:25:40.214Z
Learning: All packages are published under the @clerk namespace on npm, ensuring consistent naming and discoverability.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-23T12:25:40.214Z
Learning: Framework packages depend on @clerk/clerk-js for core functionality, while @clerk/shared and @clerk/types provide common utilities and TypeScript definitions used across packages.
Learnt from: dstaley
PR: clerk/javascript#6100
File: packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx:121-124
Timestamp: 2025-06-16T17:08:58.414Z
Learning: The @clerk/clerk-js package only supports browsers released in the last two years (since May 8, 2023), so modern CSS features like color-mix() are fully supported across all target browsers without requiring fallbacks.
packages/nextjs/src/utils/clerk-js-script.tsx (10)
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-23T12:25:40.214Z
Learning: Each framework integration package (e.g., @clerk/nextjs, @clerk/clerk-react, @clerk/vue) is designed to provide idiomatic support for its respective framework.
Learnt from: dstaley
PR: clerk/javascript#6116
File: .changeset/tangy-garlics-say.md:1-2
Timestamp: 2025-06-13T16:09:53.061Z
Learning: In the Clerk JavaScript repository, contributors create intentionally empty changeset files (containing only the YAML delimiters) when a PR touches only non-published parts of the codebase (e.g., sandbox assets). This signals that no package release is required, so such changesets should not be flagged as missing content.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-23T12:25:40.214Z
Learning: Framework packages depend on @clerk/clerk-js for core functionality, while @clerk/shared and @clerk/types provide common utilities and TypeScript definitions used across packages.
Learnt from: jacekradko
PR: clerk/javascript#5905
File: .changeset/six-ears-wash.md:1-3
Timestamp: 2025-06-26T03:27:05.511Z
Learning: In the Clerk JavaScript repository, changeset headers support single quotes syntax (e.g., '@clerk/backend': minor) and work fine with their current changesets integration, so there's no need to change them to double quotes.
Learnt from: dstaley
PR: clerk/javascript#6100
File: packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx:121-124
Timestamp: 2025-06-16T17:08:58.414Z
Learning: The @clerk/clerk-js package only supports browsers released in the last two years (since May 8, 2023), so modern CSS features like color-mix() are fully supported across all target browsers without requiring fallbacks.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-23T12:25:40.214Z
Learning: Environment variables prefixed with CLERK_* and NEXT_PUBLIC_CLERK_* are supported for configuration across different environments.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-23T12:25:40.214Z
Learning: All packages are published under the @clerk namespace on npm, ensuring consistent naming and discoverability.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/nextjs.mdc:0-0
Timestamp: 2025-06-23T12:25:50.109Z
Learning: Add the 'use client' directive at the top of files that require client-side features in Next.js.
Learnt from: wobsoriano
PR: clerk/javascript#5858
File: packages/clerk-js/src/core/modules/apiKeys/index.ts:84-97
Timestamp: 2025-06-10T17:35:08.986Z
Learning: In the APIKeys service methods (packages/clerk-js/src/core/modules/apiKeys/index.ts), error handling is intentionally delegated to the component level rather than being implemented within the service methods themselves. This architectural pattern allows calling components to handle errors according to their specific UI needs.
Learnt from: LauraBeatris
PR: clerk/javascript#6117
File: packages/clerk-js/src/ui/components/SessionTasks/index.tsx:64-83
Timestamp: 2025-06-18T16:33:36.764Z
Learning: In SessionTasks component at packages/clerk-js/src/ui/components/SessionTasks/index.tsx, the useEffect that checks for pending tasks should only run on mount (not react to currentTask/status changes) to handle browser back navigation edge cases without interfering with normal task completion flow managed by nextTask().
🧬 Code Graph Analysis (1)
packages/nextjs/src/utils/clerk-js-script.tsx (1)
packages/nextjs/src/client-boundary/NextOptionsContext.tsx (1)
useClerkNextOptions(22-22)
🔇 Additional comments (12)
packages/shared/src/loadScript.ts (2)
11-11: LGTM: Type definition follows established patterns.The addition of the optional
integrityproperty toLoadScriptOptionsis consistent with other optional security attributes likenonceandcrossOrigin.
16-16: LGTM: Destructuring follows established pattern.The addition of
integrityto the destructuring assignment is consistent with how other optional attributes are handled.packages/nextjs/src/utils/clerk-js-script.tsx (2)
13-13: LGTM: Destructuring follows established pattern.The addition of
integrityto the destructuring fromuseClerkNextOptions()is consistent with hownonceis handled and enables SRI support for Next.js integrations.
31-31: LGTM: Options propagation is correct.The
integrityproperty is properly added to the options object and will be passed through toclerkJsScriptUrlandbuildClerkJsScriptAttributesfunctions, enabling the integrity attribute to reach the final script element..changeset/shaggy-students-jog.md (1)
1-8: LGTM: Changeset properly documents the feature addition.The changeset correctly identifies all affected packages with appropriate minor version bumps for this new feature. The description accurately captures the functionality being added - enabling
integrityattribute support for SRI implementation.packages/react/src/types.ts (1)
46-51: LGTM: Excellent documentation and type definition.The addition of the
integrityproperty toIsomorphicClerkOptionsis well-implemented with comprehensive JSDoc documentation. The documentation includes helpful references to SRI hash generation tools and MDN documentation, making it easy for developers to understand and use this feature correctly.packages/shared/src/loadClerkJsScript.ts (3)
35-35: LGTM: Type definition follows established patterns.The addition of the optional
integrityproperty toLoadClerkJsScriptOptionsmaintains consistency with other security attributes likenonceand enables SRI support for Clerk JS scripts.
75-75: LGTM: Proper propagation to loadScript function.The
integrityoption is correctly passed to theloadScriptfunction, maintaining the same pattern as thenonceattribute and ensuring the integrity value reaches the final script element.
133-135: LGTM: Consistent attribute handling implementation.The integrity attribute handling in
buildClerkJsScriptAttributesfollows the exact same pattern as other attributes likenonce, ensuring consistent behavior and proper attribute setting on the script element.packages/shared/src/__tests__/loadClerkJsScript.test.ts (3)
15-16: LGTM! Well-named test constants.The constant naming is descriptive and follows good testing practices for maintaining readable test data.
78-97: Excellent test coverage for the new integrity feature.This test properly verifies that the
nonceandintegrityoptions are correctly passed through to theloadScriptfunction. The test follows the existing pattern and provides comprehensive coverage for the new SRI functionality.
163-171: Good addition to the parameterized test suite.This test case ensures that
buildClerkJsScriptAttributescorrectly includes thenonceandintegrityattributes in the returned object. The test data structure follows the existing pattern perfectly.
Description
What
This PR introduces an
integrityprops and creates an attribute on the generated<Script />tag.Why
Google CASA and other common security audits require that all third party scripts be accompanied by an SRI to pass their certification checks. Doing this with Clerk, while possible, was not supported natively. The recommended solution was to point
clerkJsUrlat a blank file hosted on my domain, and manually add the script tag with the verison and SRI attribute to match. This PR introduces first party support forintegritysuch that this workaround can be obviated.Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
New Features
Tests