英文:
Issue including multi security-content-policy on firebase-hosting
问题
Next.js / Firebase 应用托管在 Firebase Hosting 上。
我已在托管配置的头部添加了一个安全脚本：（并且这个脚本运行良好）
// 旧值:
"value": "frame-ancestors 'self'"
现在我添加了两个更多的脚本：
// 新值:
"value": "frame-ancestors 'self'; default-src 'none'; script-src 'self'"
部署UI后，应用程序出现故障，我进行了研究，发现其他人也以与我相同的方式添加了这些脚本。
是否有人遇到类似的问题，或者是否看到我的方法有问题？
firebase.json 文件：
{
"hosting": {
...
"headers": [
{
"source": "**",
"headers": [
{
"key": "x-frame-options",
"value": "SAMEORIGIN"
},
{
"key": "content-security-policy",
// 部署后UI出现故障
"value": "frame-ancestors 'self'; default-src 'none'; script-src 'self'"
}
]
}
]
}
}
英文:
Next.js / Firebase app hosted on Firebase-hosting.
I have added one security script in the header of the hosting configuration: (and this is working fine)
// Old value:
"value": "frame-ancestors 'self'"
Now I added two more scripts:
// New value:
"value": "frame-ancestors 'self'; default-src 'none'; script-src 'self'"
After deploying the UI and the app is broken, I did research and saw that people adding those scripts in the same way as me.
Does anyone faced a similar problem, or maybe seen a problem in my approach?
firebase.json file:
{
"hosting": {
...
"headers": [
{
"source": "**",
"headers": [
{
"key": "x-frame-options",
"value": "SAMEORIGIN"
},
{
"key": "content-security-policy",
//After deployment UI is broken
"value": "frame-ancestors 'self'; default-src 'none'; script-src 'self'"
}
]
}
]
},
}
答案1
得分: 1
你的问题在于你提供了相互抵消的 content-security-policy 策略，就像你的情况中：
frame-ancestors 'self'：表示允许将你的应用嵌入到与你的应用具有相同源（同一域）的 iframe 中。它限制了来自其他源的框架嵌入。default-src 'none'：表示默认情况下，不应从任何源加载内容。这是一种非常严格的设置，你需要添加其他指令来允许从特定源加载内容。script-src 'self'：表示脚本只能从相同源（self）加载。这限制了从外部源加载脚本。
通过结合这些指令，你已经显著加强了你的应用的安全性，禁止了从外部源加载内容，并将脚本加载限制为相同源。
删除 default-src 'none' 有所帮助，因为通过删除该策略，除了 self 之外的任何其他源的内容获取限制都被解除了。
你可以查看此指南，它解释了所有安全标头。你还可以在此处 测试你的策略。
参考：配置标头 和 内容安全策略（CSP）。
英文:
Your issue is you are giving counteracting content-security-policy policies as in your case :
frame-ancestors 'self': Means allow your app to be embedded within an iframe on the same origin (same domain) as your app. It restricts framing from any other origins.default-src 'none': means by default, no content should be loaded from any source. This is a very restrictive setting, and you'll need to add additional directives to allow specific sources from where your app can load content.script-src 'self': means scripts can only be loaded from the same origin (self). This restricts loading scripts from any external sources.
Combining these directives you have significantly tightened the security of your app by disallowing loading content from any external sources and restricting script loading to the same origin.
As removing default-src 'none' helped, because by removing that policy the restriction for getting content from any other source than self has been lifted.
You can go through this guide which explains all security headers. You can also test your policies here
Reference : Configure headers and Content Security Policy (CSP)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论