1

我正在尝试在我的创建反应应用程序（重新连接）中返回 X-Frame-Options，但我不确定用于将函数添加到现有覆盖的正确语法。我该如何正确地做到这一点？

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()
);

前端是一个 CRA (rewired) 非静态 webapp

后端是单独托管的节点应用程序

我还尝试将 buildpack 更改为此 buildback，以便在 static.json 文件中添加配置，但这会破坏很多不同的东西，使用不同的服务器等。

4

1 回答 1

2

这样做的正确方法是不这样做......没用，不要浪费你的时间。让我们记住，您的 CRA 页面将在浏览器上执行，它不会向您发送标头/数据或任何内容，而是由 Nginx/Apache/NodeJs 发送其他内容。

Firefox 甚至这么说：https ://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

注意：在元素内部设置 X-Frame-Options 是没有用的！例如，没有效果。不要使用它！X-Frame-Options 仅通过设置 HTTP 标头起作用，如下例所示。

Heroku

您可以通过在应用程序的根文件夹中编写static.json来为静态应用程序配置不同的选项。

自定义标题

使用 headers 键，您可以设置自定义响应标头。它使用与自定义路由相同的运算符进行路径选择。

{
  "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

于 2021-08-24T23:47:44.720 回答