Как установить заголовки для приложения React, созданного с помощью 'create-Reaction-app'

Question

Я создал пример приложения реакции, используя " create-реагировать-приложение". Мне нужно установить заголовки запроса с X-Frame-options а также Content-Security-Policy, Как мне это сделать? Я просто пытался обновить мой index.html с кодом ниже, но я не уверен, правильно ли это или нет. Может кто-нибудь помочь с этим?

   <meta http-equiv="Content-Security-Policy" content="frame-ancestors 'none'">
   <meta http-equiv="X-Frame-Options" content="SAMEORIGIN"> 

Answer 1

Вам нужно переопределить некоторую конфигурацию веб-пакета, которая поставляется с приложением create-response-app, и добавить "X-Frame-Options": "SAMEORIGIN".

Но в CRA вы не можете сделать это напрямую с помощью webpack.config.js. Вы должны использовать пакет, который изменяет способ запуска / сборки вашего приложения CRA. Вот пакеты для переназначения, которые вы можете использовать:

• Re-app-rewired (CRA v1)
• customize-cra или rescript (CRA v2)
• Craco (CRA v3)

Чтобы узнать, какую версию CRA вы использовали, вы можете примерно следовать react-scripts версия в вашем package.json.

Craco

У меня получился конфиг craco!!! В craco.config.js:

module.exports = {
    webpack: {
        headers: {
            'X-Content-Options': 'Deny'
        }
    }
}

(Я тестировал сканирование в Burpsuite; проблема с Frameable Response исчезла.)

Ссылка: Как установить путь псевдонима через веб-пакет в CRA (create-react-app) и craco?

реагировать-приложение-перепрограммировано

Я ДУМАЮ, что вы можете попробовать это, НО я не тестировал. В config-overrides.js:

module.exports = {
    devServer: function(configFunction) {
        return function(proxy, allowedHost) {
            const config = configFunction(proxy, allowedHost)
            config.headers = {
                'X-Frame-Options': 'Deny'
            }
            return config
        }
    }
}

Ссылка: Создание приложения React с добавлением заголовка CORS

* Возможно, я неправильно получил версии, исправьте, если да.

Answer 2

Просто модифицируя index.html как у вас не достаточно, по крайней мере для X-Frame-Options, По OWASP:

Общие ошибки обороны

Метатеги, которые пытаются применить директиву X-Frame-Options, НЕ РАБОТАЮТ. Например,) не будет работать. Вы должны применить директиву X-FRAME-OPTIONS в качестве заголовка ответа HTTP...

MDC имеет аналогичное предупреждение.

Я провел некоторое время, глядя, но не нашел способа установить X-Frame-Options Реагировать сам. Есть способы сделать это на уровне сервера или на других языках (например, для Tomact, или в Java, или с помощью веб-пакета, или настроить его с помощью Spring Security), которые могут быть полезными для вас, а могут и не быть.

Реакт не поддерживает Content-Security-Policy либо... по крайней мере, не в 2013 году, и я искал, но не нашел более недавнего изменения в положении.

Answer 3

Если вы говорите специально для сервера разработки, вы можете настроить базовый экспресс-экземпляр, используя процесс «вручную настроить прокси».

Вы можете установить там заголовки:

      // src/setupProxy.js

module.exports = function(app) {
  app.use((req, res, next) => {
    res.set({
        'foo': 'bar'
    });
      next();
  }); 
};

Answer 4

За react-scripts startобновить свой src/setupProxy.js:

      module.exports = function (app) {
  app.use(function (req, res, next) {
    res.setHeader("X-Frame-Options", "DENY");
    next();
  });
};

Если вы в Heroku и используете обновления buildpacks static.json:

      {
  "root": "build/",
  "https_only": true,
  "clean_urls": true,
  "routes": {
    "/**": "index.html"
  },
  "headers": {
    "/**": {
      "X-Frame-Options": "DENY"
    }
  }
}

Answer 5

x-frame-options и content-security-policy — это заголовки ответа, а не запроса. Поэтому вам нужно поместить его на сервер, а не в реагирующее приложение (клиент).