Menu
So I know that I can add CSP in the <meta> on my website. However, I read that it is better to add these to your HTTP header. I checked in the Firebase docs and see the following:
We currently support the following headers as a key: ...Content-Security-Policy.
However, I can't find any example on how to format the rules in the file. I could be overthinking this, but how do I add rules to my Firebase headers that would cover this:
Refused to load the script 'data:application/javascript;base64,dmFyIHVyY2hpblRyYWNrZXI9ZnVuY3Rpb24oKXt9…RUcmFja2VyQnlOYW1lOiBmdW5jdGlvbigpe190cmFja0V2ZW50OiBmdW5jdGlvbigpe319fTs=' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' https://f.vimeocdn.com https://ssl.google-analytics.com https://js-agent.newrelic.com https://bam.nr-data.net https://f.vimeocdn.com".
966
Combining everything into a single Content-Security-Policy header works just fine, however. In other words, multiple Content-Security-Policy headers do not combine together. The most restrictive header is favored.
The Content-Security-Policy header allows you to restrict how resources such as JavaScript, CSS, or pretty much anything that the browser loads. Although it is primarily used as a HTTP response header, you can also apply it via a meta tag. The term Content Security Policy is often abbreviated as CSP .
To add this custom meta tag, you can go to www.yourStore.com/Admin/Setting/GeneralCommon and find Custom <head> tag and add this as shown in the image below. Content Security Policy protects against Cross Site Scripting (XSS) and other forms of attacks such as ClickJacking.
'unsafe-eval' allows the application to use the eval() JavaScript function. This reduces the protection against certain types of DOM-based XSS bugs, but makes it easier to adopt CSP. If your application doesn't use eval() , you can remove this keyword and have a safer policy.
Firebase Hosting doesn't enforce the formatting of your headers, so to get the exact results you want you'll just want to figure out how to format the header. This guide looks to be pretty comprehensive and can help you get started.
To actually apply the CSP headers to your Firebase Hosting site, you'll want to alter your firebase.json. For example:
{
"hosting": {
"headers": [{
"source":"**",
"headers": [
{"key":"Content-Security-Policy","value":"script-src 'self'"}
]
}]
}
}
See the Firebase Hosting docs for more details.
179
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
