Angular应用meta标签设置Content-Security-Policy-Report-Only遭Chrome拦截

这个问题我之前排查过，Chrome v64弹出的提示其实是在明确告诉你：仅报告模式的内容安全策略（CSP）不能通过<meta>标签来配置，这是Chrome针对这类CSP的强制限制，你的版本正好处于这个规则生效的范围内。

为什么会出现这种情况？ #

• Chrome从特定版本开始，直接禁止了通过<meta>标签加载Content-Security-Policy-Report-Only类型的策略，所以你写的meta标签会被浏览器直接忽略，同时弹出提示告知你这个问题。
• Edge v41和Firefox v59虽然没有报错，但本质上它们也不支持通过<meta>标签启用仅报告模式的CSP，所以你的策略实际上根本没生效，自然也不会有错误提示。

正确的解决方案：用HTTP响应头配置 #

所有主流浏览器都支持通过HTTP响应头来配置仅报告模式的CSP，这也是官方推荐的标准方式，具体操作如下：

1. 后端添加响应头

不管你用什么后端技术，只需要在返回Angular页面的响应中添加Content-Security-Policy-Report-Only头即可。比如用Node.js/Express的话，代码示例如下：

app.use((req, res, next) => {
  // 配置仅报告模式的CSP，这里用你需要的规则
  res.setHeader('Content-Security-Policy-Report-Only', "default-src 'self'");
  next();
});

如果是Java Spring Boot，可以这样配置：

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new HandlerInterceptor() {
            @Override
            public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
                response.setHeader("Content-Security-Policy-Report-Only", "default-src 'self'");
            }
        });
    }
}

2. （可选）开发环境临时调试

如果只是开发环境想测试CSP规则，可以通过Chrome开发者工具的「Security」面板临时配置，但正式环境一定要用HTTP响应头的方式，确保策略生效且安全。

补充说明 #

为什么<meta>标签不能用于仅报告模式？一方面是因为仅报告模式需要浏览器发送违规报告，而meta标签无法配置报告接收地址（report-uri或report-to）；另一方面，从安全角度来说，HTTP响应头的配置方式更可靠，能避免页面内容被篡改后绕过CSP规则。

内容的提问来源于stack exchange，提问作者Ivan L