SIMAEC.NET WEB PUBLISHING

Firebase Hosting

Recently we discovered the possibility to host a static website on Firebase, a service offered by Google. It took us just a few hours to migrate a small website (< 25 pages) from Google Cloud Static hosting to Firebase. It will be more efficient for any other static website out there. It is free hosting for small websites not exceeding the storage and bandwidth limits.

Setup

  • Create a static website with a homepage and some additional pages
  • Setup account in Firebase
  • Create project in Firebase with hosting
  • Initialize the local folder for Firebase
  • Deploy your website
  • Point your domain name to the Firebase hosting project

Resources

Response Headers

Reviewing the homepage of this site with the Edge (for MacOS), some issues regarding response header serving different type of files popped-up. The following additions to firebase.json resolved those issues.

"headers": [{
	"source": "**",
	"headers": [{
		"key": "X-Content-Type-Options",
		"value": "nosniff"
	}]
}, {
	"source": "**/",
	"headers": [{
			"key": "Cache-Control",
			"value": "max-age=180"
		},
		{
			"key": "Content-Security-Policy",
			"value": "frame-ancestors 'self'"
		},
		{
			"key": "Access-Control-Allow-Origin",
			"value": "*"
		}
	]
}, {
	"source": "**/*.@(js|css|ico|jpg|jpeg|gif|png|svg)",
	"headers": [{
		"key": "Cache-Control",
		"value": "public,max-age=31536000,immutable"
	}]
}]

Content Security Policy (CSP)

Not that critical for this website as it doesn't allow content addition by users.

A tight control of content Content-Security-Policy can be achieved modifying the corresponding header statement above.

We ended up with this solution:

{ 
	"key" : "Content-Security-Policy",
	"value":"
		img-src 'self' simaecnet.imgix.net; 
		style-src www.simaec.net; 
		script-src www.simaec.net; 
		object-src www.simaec.net; 
		frame-ancestors 'self'
	"
}

Notes

  • The value in the firebase.json should be one line only. We show it here on multiple lines to facilitate reading.
  • Change Content-Security-Policy to Content-Security-Policy-Report-Only while debugging on a localhost or preview on a domain name other then the domain name in production.