Create React Appで作成したプロジェクトに対してOWASP ZAPを使って脆弱性診断してみた

# はじめに

:::note warn
本記事は生成AIによる情報が含まれています。参考程度にお願いします。
:::

Create React App(以下CRA)で作成したプロジェクトに簡単なTODO機能を実装し、脆弱性診断を行ってみました。


実装したコードは以下のようにシンプルなものです。

<details><summary>コード</summary>

```tsx:App.tsx
import React, { useState } from 'react';
import './App.css';
import { Box, Button, Card, CardBody, Checkbox, HStack, Heading, Input, VStack } from '@chakra-ui/react';

type Todo = {
  id: number;
  content: string;
  completed: boolean;
}

function App() {
  const [todo, setTodo] = useState('')
  const [todos, setTodos] = useState<Todo[]>([])

  const addTodo = () => {
    const newId = todos && todos[todos.length - 1]? todos[todos.length - 1].id + 1 : 1;
    const newTodo: Todo = {
      id: newId,
      content: todo,
      completed: false,
    };
    setTodos([...todos, newTodo]);
    setTodo('')
  }
  const inputTodo = (e: React.ChangeEvent<HTMLInputElement>) => {
    setTodo(e.target.value)
  }
  const deleteTodo = () => {
    const newTodos = todos.filter(todo =>!todo.completed);
    setTodos(newTodos);
  };

  const completed = (id: number) => {
    const updatedTodos = [...todos];
    const todoIndex = updatedTodos.findIndex(todo => todo.id === id);
    updatedTodos[todoIndex].completed = !updatedTodos[todoIndex].completed;
    setTodos(updatedTodos);
  };

  return (
    <>
    <VStack w='100%'>
      <Heading>TODOアプリ</Heading>
    
      <HStack w='80%'>
        <Input placeholder='タスクを入力' value={todo} onChange={inputTodo} ></Input>
        <Button onClick={addTodo}>追加</Button>
      </HStack>

      <Box maxHeight={`${600 + todos.length * 50}px`} w='80%'>
      {todos.map((task) => (
      <Card key={task.id} mb={2} bg='blue.200'>
        <CardBody>
          <Checkbox
            id={task.id.toString()}
            colorScheme='red'
            isChecked={task.completed}
            onChange={() => completed(task.id)}
          >
            {task.content}
          </Checkbox>
          {task.id}
        </CardBody>
      </Card>
      ))}      
      </Box>

      <Box display='flex' alignItems='center' justifyContent='center' mt={4}>
        <Button onClick={deleteTodo}>チェックしたTODOを削除</Button>
      </Box>
    </VStack>
    </>
  );
}

export default App;
```
</details>

# 脆弱性診断の結果

中レベルと低レベルが数件という結果でした。
それぞれの脆弱性について調べていくと、基本的な解決策としてはAPIサーバまたは静的ファイルをホストするサーバ側(ミドルウェア)で設定を行うのが主でした。
CRAで作成したプロジェクトにミドルウェアは含まれていないので別途導入が必要になります。
そのため、今回自身で作成したコードとは無関係の脆弱性でした。

具体的には、
・レスポンスヘッダーを指定
・CORS設定

などです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/9f237d52-0149-4bc9-deed-de4c71499d8e.png)


## Content Security Policy (CSP) Header Not Set

こちらはウェブサイトが安全なコンテンツを許可するためのルール設定がされていないですよ、という脆弱性のようです。

以下の通りに実装し、再び脆弱性診断をするとアラートが消えました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/2cc0cc5b-68d2-2010-843d-e3668725ed08.png)

```
npm install --save-dev react-app-rewired customize-cra
```

```js:config-overrides.js
module.exports = function override(config, env) {
  config.devServer.headers["Content-Security-Policy"] =
    "default-src 'self'; img-src https://*; child-src 'none';";

  return config;
};
```

## Missing Anti-clickjacking Header

ミドルウェアのレスポンスに指定のヘッダーを含めてね、ということらしいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/b02f009b-bbf0-04db-88be-a6273c946ecd.png)

## クロスドメインの設定ミス

こういうことらしいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/a2f736d0-c09d-7e46-b2cb-8a32c31d024f.png)

package.jsonにプロキシ設定することでCORS問題を回避できますが、開発環境においてのみになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/26f5b7e4-aa95-032e-97e1-7db5168ca34b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/031180b2-b716-bd7d-ead2-911df469306d.png)


## Server Leaks Information via "X-Powered-By" HTTP Response Header Field(s)
HTTPレスポンスヘッダー内の「X-Powered-By」というフィールドに使用しているWebアプリケーションフレームワークやそのバージョンが表示されてるよ、ということらしいです。

脆弱性が確認されているフレームワークを使用していると、攻撃対象にされかねないという理由で脆弱性に上がっているようです。

こちらに関しては、CRAで作成したプロジェクトをWebサーバでホストしていないため、自身でどうにかできるようなことでは無さそうです。

![l_9007702_2100_e30218ee081716561e2791cce90060d1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/6b683883-837b-ba04-331d-89904ba0ba9a.png)


## X-Content-Type-Options Header Missing

こちらもミドルウェアのレスポンスにヘッダーをつけましょう、という内容でした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/d77764b3-6484-ed38-c79c-96579f9f3eda.png)

今回の脆弱性については内容がよく分からなかったので詳しく聞いてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/ad771621-a94a-b67e-aa76-832f9156249f.png)


# おわりに
引き続き脆弱性について知見を深めていきたいです。