Spring Webflux CSP 在 React 网站中未生效答案

【问题标题】：Spring Webflux CSP not taking affect in React websiteSpring Webflux CSP 在 React 网站中未生效
【发布时间】：2021-08-30 17:03:26
【问题描述】：

嘿 Stackoverflow 天才。我有一个问题给我带来了一些麻烦，我希望你能帮助我。我在使用 Spring Boot Webflux 的服务器代码中定义了内容安全策略。 CSP 被发送到客户端，可以在响应标头中看到。但是，CSP 似乎并未应用于该站点。这是配置：

/* http is a ServerHttpSecurity object */
http.headers().contentSecurityPolicy("default-src 'self'; script-src 'self'; img-src 'self';" +
"media-src 'self'; object-src 'self'; connect-src 'self'; worker-src 'none'; form-action 'self';" +
"frame-src 'none'; child-src 'none'; style-src 'self'; frame-ancestors 'none';")
.and()
.frameOptions().mode(XFrameOptionsServerHttpHeadersWriter.Mode.DENY);

这就是我在响应标头中看到的：

ache-control: no-cache, no-store, max-age=0, must-revalidate
connection: close
Content-Encoding: gzip
content-security-policy: default-src 'self'; script-src 'self'; img-src 'self';media-src 'self'; object-src 'self'; connect-src 'self'; worker-src 'none'; form-action 'self';frame-src 'none'; child-src 'none'; style-src 'self'; frame-ancestors 'none';
content-type: application/json
Date: Mon, 30 Aug 2021 16:33:28 GMT
expires: 0
pragma: no-cache
referrer-policy: no-referrer
transfer-encoding: chunked
Vary: Accept-Encoding
x-content-type-options: nosniff
x-frame-options: DENY
X-Powered-By: Express
x-xss-protection: 1 ; mode=block

应用其中一些设置时，应该会阻止我的网站在 i-frame 中加载，但即使标题包含这些值，i-frame 仍然可以加载它。此外，我还可以注入不安全的脚本和样式。

我正在使用最新版本的 Chrome 进行测试。我在响应标头中看到了 CSP，但它并没有阻止这些安全风险，这一事实告诉我我遗漏了一些东西。收到响应后，我需要采取什么步骤将 CSP 应用到前端？同样，这是一个 React 前端和一个 Java/Spring Boot 后端。以防万一，前端和后端是独立的项目。

提前感谢您抽出时间来帮助我。

【问题讨论】：

标签： reactjs spring-boot spring-webflux content-security-policy

【解决方案1】：

首先确保浏览器中没有安装Noscript、Disable Content-Security-Policy等插件。

你在前端和后端使用什么软件没有区别 - 浏览器对后端一无所知，它只是获取一个带有 HTTP 标头的 HTML 页面并呈现它。如果浏览器收到 CSP HTTP 标头，它将应用它。

您显示的 CSP（为便于阅读添加了换行符）：

default-src 'self';
script-src 'self';
img-src 'self';
media-src 'self';
object-src 'self';
connect-src 'self';
worker-src 'none';
form-action 'self';
frame-src 'none';
child-src none;
style-src 'self';
frame-ancestors 'none';

大量明确禁止嵌入到 iframe（frame-ancestors 'none';）、内联样式（style-src 'self';）和内联脚本（script-src 'self';）中。有一个语法错误：child-src none; 'none' 应该是单引号，但在这种情况下这无关紧要。

为了确保这一点，使用您的 CSP 创建一个 HTML 页面就足够了：

<head>
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self';
  img-src 'self'; media-src 'self'; object-src 'self'; connect-src 'self'; worker-src 'none';
  form-action 'self'; frame-src 'none'; child-src none; style-src 'self'; frame-ancestors 'none';">
</head>
<body>
<div style='color:red' onclick='alert("clicked!")'>is is red? Click me!</div>
</body>

并在启用了控制台（开发工具）的浏览器中打开它。您将看到被阻止的内联样式和脚本。

元标记的工作方式与 HTTP 标头完全相同，只是元标记不支持 frame-ancestors 指令。

【讨论】：

感谢您的回复并指出一个语法错误。我已经解决了。我正在测试的浏览器没有任何应该禁用 CSP 的插件。当直接放置在元标记中的 html 中时，我已经测试了 CSP。它在那里工作得很好。在响应标头中提供时，它似乎没有得到应用。
元标记与 HTTP 标头完全一样。要验证 CSP HTTP 标头是否已应用，请制定策略：http.headers().contentSecurityPolicy("default-src 'bad_token';");，您应该会在 Chrome 控制台中看到：The source list for the Content Security Policy directive 'default-src' contains an invalid source: ''bad_token''. It will be ignored.。