React js using create-app how to set X-FRAME-OPTIONS on webpack

Question

I've searched over the net, not sure how to set X-FRAME-OPTIONS in my react app, the web.config.js looks like this, it's using inline option

when I load index.html it gives response X-FRAME-OPTIONS:DENY I need it to change it to X-FRAME-OPTIONS:SAMEORIGIN, as I need to open an iframe within my app. Right now I'm getting a chrome error and firefox error.

Not sure how I can update my web.config.js in development, I'm super confused.

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/'
  },

Miguel Calderón · Accepted Answer · 2018-03-14 12:19:34Z

5

X-Frame-Options is a HTTP header and setting it depends on the application you use as HTTP server, not on the files being served. In this case, if you want to set a header for webpack-dev-server, you can do it like this (setting in webpack.config.js):

devServer: {
    ...
    headers: {
        'X-Frame-Options': 'sameorigin'
    }
}

answered Mar 14, 2018 at 12:19

Miguel Calderón

3,1011 gold badge20 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3300505 · Accepted Answer · 2022-07-20 09:37:56Z

0

nextjs put below code in next.config.js

module.exports = {  
    async headers() {
        return [
            {
                source: '/((?!embed).*)',
                headers: [
                    {
                        key: 'X-Frame-Options',
                        value: 'SAMEORIGIN',
                    }
                ]
            }
        ];
    }
}

answered Jul 20, 2022 at 9:37

user3300505

411 silver badge3 bronze badges

Collectives™ on Stack Overflow

React js using create-app how to set X-FRAME-OPTIONS on webpack

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related