[英]Content Security Policy React Express Application deployed nn Heroku
So I have been working on a social media application using React and Express deployed on Heroku. The app works perfectly in localhost but since deployment, something or the other keeps happening.因此,我一直在使用部署在 Heroku 上的 React 和 Express 开发社交媒体应用程序。该应用程序在本地主机上运行完美,但自部署以来,某些事情一直在发生。 My app structure looks like this:
我的应用程序结构如下所示:
After deploying the webpage looks like this: FireFox:部署后网页如下所示:FireFox:
In Brave, it looks this way:在 Brave 中,它看起来是这样的:
Heroku logs in CLI: Heroku 登录 CLI:
csp.json: csp.json:
{
"prod": {
"default-src": "'self'",
"script-src": ["'self'"],
"font-src": ["'self'", "*"],
"style-src": ["'self'", "https://*.googleapis.com", "'unsafe-inline'"],
"connect-src": ["'self'", "*"],
"img-src": ["'self'", "*"]
}
}
So thats the issue.这就是问题所在。 Firefox says it's CSP, Brave says it can't find it, CLI says that it can't locate the build.
Firefox 说是 CSP,Brave 说找不到,CLI 说找不到构建。 I have tried everything I can think of- even including csp although Im not doing any resource loading from outside, but still it won't work.
我已经尝试了我能想到的一切——甚至包括 csp,尽管我没有从外部加载任何资源,但它仍然无法正常工作。 Please help as m very confused now- this is my final portfolio project that I have been working on for two months and now I cant get it to deploy correctly.
请帮助我,因为我现在很困惑 - 这是我已经工作了两个月的最后一个投资组合项目,现在我无法正确部署它。
FrontEnd package.json:前端 package.json:
BackEnd package.json:后端 package.json:
server.js:服务器.js:
app.use(express.static(path.join(__dirname, 'FrontEnd/build')));
app.get('*', function (req, res) {
res.sendFile(path.join(__dirname, 'FrontEnd/build', 'index.html'));
});
app.all('*', (req, res, next) => {
next(new AppError(`The requested URL ${req.originalUrl} could not be found`, 404));
});
const port = process.env.PORT || 8000;
const server = app.listen(port, () => {
console.log(`App running on port ${port}`);
});
process.on('SIGTERM', () => {
console.log('SIGTERM RECEIVED!! Shutting down gracefully!');
server.close(() => {
console.log('💥Process Terminated!!');
});
});
I also tried replacing FrontEnd/build with /BackEnd/FrontEnd//build as you can see n CLI logs but that didnt work either.我还尝试用 /BackEnd/FrontEnd//build 替换 FrontEnd/build,因为您可以看到 n CLI 日志,但这也没有用。 I really dont know what to do at this point:(
我现在真的不知道该怎么办:(
Please help.请帮忙。 Any suggestions are appreciated.
任何建议表示赞赏。 Thank you for your time.
感谢您的时间。
If it is content security issue, I solved it like this in one of my express applications:如果是内容安全问题,我在我的一个快速应用程序中这样解决了它:
import helmet from "helmet";
app.use(
helmet.contentSecurityPolicy({
directives: {
// "default-src" used as fallback for any undeclared directives
"default-src": ["'self'"],
// i am using stripe api. if you have any script add it here
"script-src": ["'self'", "'unsafe-inline'", "js.stripe.com"],
// external css link here
"style-src": ["'self'", "'unsafe-inline'", "fonts.googleapis.com"],
"frame-src": ["'self'", "js.stripe.com"],
"font-src": [
"'self'",
"fonts.googleapis.com",
"fonts.gstatic.com",
"res.cloudinary.com/",
],
"img-src": ["'self'", "data:", "https://res.cloudinary.com"],
},
reportOnly: true,
})
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.