Реагируйте с помощью create-app как установить X-FRAME-OPTIONS в веб-пакете

Я искал по сети, не уверен, как установить X-FRAME-OPTIONS в моем приложении реакции, web.config.js выглядит так, он использует встроенную опцию

когда я загружаю index.html, он дает ответ X-FRAME-OPTIONS:DENY Мне нужно изменить его на X-FRAME-OPTIONS:SAMEORIGIN, так как мне нужно открыть iframe в моем приложении. Прямо сейчас я получаю ошибку Chrome и Firefox.

Не уверен, как я могу обновить мой web.config.js в разработке, я очень запутался.

module.exports = {
  devtool: 'eval',
  entry: {
    app: [
      'react-hot-loader/patch',
      'webpack-dev-server/client?http://0.0.0.0' + web_port,
      'webpack/hot/only-dev-server',
      './src/index'
    ],
    vendor: [
      'react',
      'react-dom',
      'react-router',
      'react-router-dom',
      'react-forms-ui',
      'mobx',
      'mobx-react',
      'sockjs-client',
      'react-table',
      'react-bootstrap-table',
    ],
    fonts: glob.sync("./src/webfonts/*")
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].bundle.js',
    publicPath: '/static/'
  },
Источник

3 ответа

X-Frame-Options заголовок HTTP и его настройка зависит от приложения, которое вы используете в качестве HTTP-сервера, а не от обслуживаемых файлов. В этом случае, если вы хотите установить заголовок для webpack-dev-server, вы можете сделать это так ( настройка вwebpack.config.js):

devServer: {
    ...
    headers: {
        'X-Frame-Options': 'sameorigin'
    }
}
Источник

nextjs поместите код ниже в next.config.js

Источник

Вы можете установить необработанные заголовки http в public/index.html внутри тега head :

        <head>
    <meta http-equiv="X-Frame-Options" content="sameorigin"/>
  </head>
Источник
Другие вопросы по тегам