React MUI Content Security Policy
Tags: react, reactmui, csp, npm
Published: 2023-05-28 19:00:48


[Material-UI](https://mui.com/) is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google. In this article let’s discuss the Hidden component in the Material-UI library.
When using Material-UI (also known as MUI) with React, it's important to set up a **Content Security Policy (CSP)** to ensure that your app is secure against [cross-site scripting (XSS)](https://owasp.org/www-community/attacks/xss/) attacks. A set of rules that specify which content can be loaded by web page is known as CSP. It helps to prevent XSS attacks on the web page.

```
const csp = `
  default-src 'self';
  script-src 'self';
  style-src 'self';
`;
```
**Basic Setup:** Follow the below steps to create the application.
 
**Step 1:** Create a folder called example. Open your command prompt and navigate to the example folder. Now type in the following command

```
npx create-react-app
```
**Step 2:** Create a folder called component inside the src folder. Inside that component, create a file called Main.js.

```
cd src
mkdir component
touch Main.js
```
**Step 3:** Again, in the same folder, open the command prompt and type in the following command to install React MUI library.

```
npm install @mui/material @emotion/react @emotion/styled
```
**Step 4:** Install the React ['helmet'](https://www.npmjs.com/package/react-helmet) library.

```
npm install helmet
npm install react-helmet
npm install react-helmet-async
```
**Step 5:** Importing the **'helmet'** library.

```****
import { Helmet } from "react-helmet";
```
**Project Structure:** Once the installation is complete, you will have the modules required. Your folder structure should look something like this.

![Project Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hyinckrb3cksu1ni7jf5.png)
**Example 1:** Setting up a CSP with React MUI using the **'helmet'** library. It is used as the **document head manager** for React-based applications.

- **App.js**

```
import React from "react";
import Main from "./component/Main";
import { Helmet } from "react-helmet";

const csp = `
  default-src 'self';
  script-src 'self' 'unsafe-inline';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data:;
  font-src 'self' data:;
`;

console.log({ csp });

const App = () => {
	return (
		<>
			<Helmet>
				<meta http-equiv="Content-Security-Policy" content={csp} />
			</Helmet>

			<Main />
		</>
	);
};

export default App;

```

- **Main.js**

```
import React from "react";

function Main() {
	return (
		<>
			<div>
				GeeksforGeeks
				<br />
				Content Security Policy in MUI
			</div>
		</>
	);
}

export default Main;
```
**Step to run the application:** Open your command prompt in the same folder, and type in the following command

```
npm start
```
**Output:**

![Output on the Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63dyfvj04a11o386t9b3.png)

![Output on the Console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8xiyiqo8gxmum3ccpmc.png)
**Example 2:**  Setting up CSP using the 'react-helmet-async' library.

- **App.js**

```
import React from 'react';
import Main from './component/Main';
import { HelmetProvider } from 'react-helmet-async';
import { CssBaseline } from '@material-ui/core';
  
function App(){
  return(
    <>
      <HelmetProvider>

        <CssBaseline />
        <Main/>
      
      </HelmetProvider>
    </>
  );
};

export default App;
```

- **Main.js**

```
import React from 'react';
import { Helmet } from 'react-helmet-async';
import { Button } from '@material-ui/core';

function Main() {
  return (
    <>
      <Helmet>
        <meta
          http-equiv="Content-Security-Policy"
          content="
            default-src 'self';
            script-src 'self' 'unsafe-inline' 'unsafe-eval';
            style-src 'self' 'unsafe-inline';
            font-src 'self' data:;
            img-src 'self' data:;
          "
        />
      </Helmet>
      <Button variant="contained" color="primary">
        Hello, World!
      </Button>
    </>
  );
}

export default Main;

```
**Output:**
![React MUI CSP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofwdgtkqiyacfni5gsnq.png)
This sets the **'Content-Security-Policy'** header to allow resources to be loaded only from the same origin **('self')**, and also allows inline scripts and styles.

Connect me on Twitter:- [Twitter](https://twitter.com/navyaarora_) 🤝🏻

Do check out my GitHub for amazing projects:- [GitHub](https://github.com/navyaarora01) 🤝🏻

Connect me on LinkedIn:- [Linkedin](https://www.linkedin.com/in/navyaarora01/) 🤝🏻