时间戳

首页 > 解决方案 > 具有反应路由器和 nodejs 的项目中的 CSP 问题

node.js - 具有反应路由器和 nodejs 的项目中的 CSP 问题

问题描述

我正在制作一个使用 React 路由器的 React 应用程序，并在后端 nodejs + express 上。我的任务是，在联系http://example.ru时，我给一个反应应用程序，而当http://example.ru/admin另一个时。问题是，如果我通过反应路由器 (NavLink)访问http://example.ru/shop ，我的 CSP 设置将起作用。但是，如果我使用浏览器地址栏，则 CSP 设置不起作用，或者它们仅适用于http://example.ru。

我的 CSP 设置 <meta http-equiv="Content-Security-Policy" content="default-src *; img-src http://localhost:3001 https://sun9-23.userapi.com https://steamcdn-a.akamaihd.net https://gspics.org data:">

如果通过浏览器地址栏 https://i.stack.imgur.com/CMV9b.png访问http://example.ru/shop会出错

在浏览器开发者工具中，有一个元标记。 https://i.stack.imgur.com/S15C7.png

标签： node.jsreactjsreact-router

解决方案

如果要加载外部图像，则需要在img-src策略中包含其域，在本例中为https://i.stack.imgur.com. 您还应该替换http://localhost:3001为'self'.

你的meta标签应该是：

<meta http-equiv="Content-Security-Policy" content="default-src *; img-src 'self' https://sun9-23.userapi.com https://steamcdn-a.akamaihd.net https://i.stack.imgur.com https://gspics.org data:">

推荐阅读