1

I'm trying to return the X-Frame-Options in my create react app (rewired) but I'm not sure of the correct syntax to use to add the function to my existing override. How do I do this properly?

module.exports = override(
    fixBabelImports("react-bulma-components", {
        libraryName: "react-bulma-components",
        libraryDirectory: "lib/components"
    }),
    {devServer: function(configFunction) {
        return function(proxy, allowedHost) {
            const config = configFunction(proxy, allowedHost)
            config.headers = {
                'X-Frame-Options': 'Deny'
            }
            return config
        }
    }},
    ...addCompressions()
);

The front end is a CRA (rewired) non-static webapp

The backend is a node app hosted seperately

I've also tried changing the buildpack to this buildback in order to add the configuration in a static.json file, but that breaks a lot of different things, uses a different server etc.

Ayrad
  • 3,996
  • 8
  • 45
  • 86

1 Answers1

2

The proper way of doing this, is by not doing it... is useless, dont waste your time. Let's remember that yow CRA Page will executed on the browser and it won't send you headers/data or anything, instead it will be send as well by Nginx/Apache/NodeJs something else.

Firefox even says the same: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

Note: Setting X-Frame-Options inside the element is useless! For instance, has no effect. Do not use it! X-Frame-Options works only by setting through the HTTP header, as in the examples below.

Heroku

You can configure different options for your static application by writing a static.json in the root folder of your application.

Custom Headers

Using the headers key, you can set custom response headers. It uses the same operators for pathing as Custom Routes.

{
  "headers": {
    "/": {
      "Cache-Control": "no-store, no-cache"
    },
    "/assets/**": {
      "Cache-Control": "public, max-age=512000"
    },
    "/assets/webfonts/*": {
      "Access-Control-Allow-Origin": "*"
    }
  }
}

https://blog.heroku.com/using-http-headers-to-secure-your-site

  • I don't use Apache and my app is hosted on Heroku. My front end is hosted on a different server than my backend. I've also tried the helmet solution but it didn't work. Any other options? – Ayrad Aug 24 '21 at 23:49
  • It's not a static website though – Ayrad Aug 25 '21 at 00:05
  • what do you mean is not static ? Is it a server site rendering ? When you run build webpack bundles yow code, right? It generates the static assets. Your site can be dynamic and have a bunch of routes, but all that happens in the same static html file yow app only serves static content. So it is an static single page app –  Aug 25 '21 at 00:24
  • Got it. Some of the pages in the website are SSR I wasn't sure if it would make a difference to the solution. I'll try it and update this question. TY – Ayrad Aug 25 '21 at 01:27
  • So that heroku link uses a different buildback than the default node/js one. Switching the webpack in order to add that configuration breaks a lot of different things and the buildback is an experimental OSS project. There must be an easier way without changing the whole buildpack of the application – Ayrad Aug 26 '21 at 01:09
  • wait, do you have nodes as backend ? if so use helmet, helmet will do it for you https://helmetjs.github.io –  Aug 27 '21 at 21:45
  • Yes, I have a node backend living on a different heroku app. Helmet was the first thing I've tried without success (on the front-end app). – Ayrad Aug 29 '21 at 21:14