React MUI 内容安全策略

内容安全策略（Content Security Policy，CSP） 是一种安全功能，有助于保护您的网络应用程序免受多种攻击，包括跨站脚本（XSS）攻击、数据泄露和代码注入。CSP通过限制网页可以加载的内容类型来起作用。

Material-UI是一个流行的React UI库，提供了广泛的组件用于构建用户界面。虽然Material-UI默认是安全的，但配置应用程序的CSP以增加额外的安全层仍然是一个好主意。

当您在React.js中使用MUI（Material UI）时，重要的是为您的React应用程序设置内容安全策略（CSP），以保护您的网络应用程序免受跨站脚本（XSS）攻击。CSP有助于防止您的网页受到XSS攻击。

语法：

const csp = `  
    default-src 'self';  
    script-src 'self';  
    style-src 'self';  
`;

为了在您的Material-UI React应用程序中配置CSP，您需要按照以下步骤进行操作：

基本设置和React应用程序安装：

步骤1： 使用以下命令创建React应用程序样板

npx create-react-app <app-name>

Ex: npx create-react-app react-mui

步骤2: 进入你的应用程序的根目录。

cd react-mui

步骤3： 安装所需的React MUI包。

npm install @emotion/styled @material-ui/core @emotion/react

步骤4： 安装React头盔包。

npm install helmet react-helmet

步骤5： 在 src>component>MaterialUi.js 内创建一个新文件 MaterialUi.js

cd src  
mkdir component  
touch MaterialUi.js

React MUI 内容安全策略

步骤6： 将 helmet 库导入到 App.js 文件中

import { Helmet } from "react-helmet";

示例1： 使用React Helmet库在React MUI中设置CSP

App.js

import MaterialUi from "./component/MaterialUi"; 
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--> ", { csp }); 
  
const App = () => { 
    return ( 
        <> 
            <Helmet> 
                <meta  
                    http-equiv="Content-Security-Policy" 
                    content={csp} /> 
            </Helmet> 
  
            <MaterialUi /> 
        </> 
    ); 
}; 
  
export default App;

MaterialUi.js

import React from "react"; 
  
function MaterialUi() { 
    return ( 
        <> 
            <div> 
                <h2>Hello Geeks</h2> 
                Welcome to the React MUI  
                Content Security Policy in
                <h4>GeeksforGeeks</h4> 
            </div> 
        </> 
    ); 
} 
  
export default MaterialUi;

步骤7： 使用以下命令运行您的React应用程序。

npm run start

输出：

React MUI 内容安全策略

示例2： 使用react-helmet-async库设置React MUI中的CSP。

步骤1： 安装react-helmet-async库。

npm i react-helmet-async

App.js

import MaterialUi from "./component/MaterialUi"; 
import { HelmetProvider } from 'react-helmet-async'; 
import { CssBaseline } from '@material-ui/core'; 
  
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--> ", { csp }); 
  
const App = () => { 
    return ( 
        <> 
            <HelmetProvider> 
                <CssBaseline /> 
                <MaterialUi /> 
            </HelmetProvider> 
        </> 
    ); 
}; 
  
export default App;

MaterialUi.js

import React from "react"; 
import { Helmet } from 'react-helmet-async'; 
import { Button } from '@material-ui/core'; 
  
function MaterialUi() { 
    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="secondary"> 
                Hello, Geeks! 
            </Button> 
        </> 
    ); 
} 
  
export default MaterialUi;

输出：

React MUI 内容安全策略