Skip to content

Add nonce prop for MUI datagrid components#224

Open
alexdunae wants to merge 4 commits into
mainfrom
alex/mui-datagrid-nonce
Open

Add nonce prop for MUI datagrid components#224
alexdunae wants to merge 4 commits into
mainfrom
alex/mui-datagrid-nonce

Conversation

@alexdunae

@alexdunae alexdunae commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

Loading the table view of MUI components into an application with a strict CSP causes some styles to be blocked...

react-dom.development.js:11059 Applying inline style violates the following Content Security Policy directive 
'style-src studio-app: electron: https://fonts.googleapis.com/  'nonce-vKT+/ihfyxagB+NQGkSY5Q==' ..... 
Either the 'unsafe-inline' keyword, a hash ('sha256-iY7C7YXDoCbNswk4mZBcPreUECXq6ksEEeX6HrVFk3M='), 
or a nonce ('nonce-...') is required to enable inline execution. The action has been blocked.
Screenshot 2026-07-10 at 12 50 40 PM

This PR gives consumers the ability to pass a nonce prop: https://mui.com/x/api/data-grid/data-grid/#data-grid-prop-nonce

@alexdunae alexdunae marked this pull request as ready for review July 10, 2026 19:56
@alexdunae alexdunae requested a review from arome July 10, 2026 20:40

@arome arome left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

thanks for the quick fix!

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Adds CSP nonce support to the imodel-browser React MUI DataGrid-based table views so consumers with strict nonce-based CSP policies can avoid inline-style blocking.

Changes:

  • Adds an optional nonce?: string prop to ITwinGridMUI / IModelGridMUI and threads it through to the underlying table components.
  • Forwards nonce to MUI X DataGrid in ITwinTableMUI and IModelTableMUI.
  • Adds a unit test verifying nonce forwarding and documents usage in the module README.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
packages/modules/imodel-browser/src/mui/containers/ITwinGrid/ITwinTableMUI.tsx Adds nonce prop and forwards it to DataGrid.
packages/modules/imodel-browser/src/mui/containers/ITwinGrid/ITwinGridMUI.tsx Adds nonce prop and passes it down to ITwinTableMUI.
packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelTableMUI.tsx Adds nonce prop and forwards it to DataGrid.
packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelGridMUI.tsx Adds nonce prop and passes it down to IModelTableMUI.
packages/modules/imodel-browser/src/mui/containers/DataGridNonce.test.tsx Adds a test to validate nonce forwarding to the DataGrid layer.
packages/modules/imodel-browser/README.md Documents how to supply a CSP nonce to the MUI grids.
common/changes/@itwin/imodel-browser-react/alex-datagrid-csp-nonce_2026-07-10-00-00.json Adds a patch-level changelog entry for the new CSP nonce support.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread packages/modules/imodel-browser/src/mui/containers/DataGridNonce.test.tsx Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants