Glitch does not have any setting to automatically redirect from http to https, so you will have to set it up by yourself. How you would set it up depends on your project, but here are some of the most common on Glitch:
No backend (static website):
There is no good solution if you do not have a backend. The only thing you can do is issuing a redirect from the front end using location.replace like below (assigning to location.protocol will not allow your users to use the back button to go back). However, it does not really give any protection; the fact that your page is rendered via http is all an attacker needs.
const {href, protocol} = window.location
if (protocol === 'http:') {
window.location.replace(`https${href.slice(4)}`)
}
Node:
Since there are many web frameworks for Node all doing things differently, I will show three ways to do it; without external dependencies, with Express, and with Fastify.
//Without dependencies
const {PORT} = process.env
const {createServer} = require('http')
const secureConnection = ({headers, url}, response) => {
const protocols = headers['x-forwarded-proto'].split(',')
const secure = protocols[0] === 'https'
if (!secure) {
const newURL = `https://${headers.host}${url}`
response.writeHead(308, {'Location': newURL}).end()
}
}
const requestListener = (request, response) => {
secureConnection(request, response)
// Put your other rutes here; eg.
response.end('Hello World!')
}
const server = createServer(requestListener)
server.listen(PORT)
// With Express
const {PORT} = process.env
const {createServer} = require('http')
const express = require('express')
const requestListener = express()
requestListener.set('trust proxy', [
'127.0.0.1',
'10.0.0.0/8'
])
requestListener.use(({secure, hostname, url}, response, next) => {
if (!secure) {
return response.redirect(308, `https://${hostname}${url}`)
}
next()
})
// Put your other rutes here; eg.
requestListener.get('/', (request, response) => {
response.send('Hello World!')
})
const server = createServer(requestListener)
server.listen(PORT)
// With Fastify
const {PORT} = process.env
const {createServer} = require('http')
const fastify = require('fastify')
const server = createServer()
const trustProxy = [
'127.0.0.1',
'10.0.0.0/8'
]
const serverFactory = (handler, options) => {
server.on('request', (request, response) => {
handler(request, response)
})
return server
}
const requestListener = fastify({
trustProxy,
serverFactory
})
requestListener.decorateRequest('secure', false)
requestListener.addHook('onRequest', (request, reply, done) => {
// Do not use `request.protocol` (will always return `http`)
// Fastify does not parse multi-value `x-forwarded-proto` correctly
const protocols = request.headers['x-forwarded-proto'].split(',')
request.secure = protocols[0] === 'https'
done()
})
requestListener.addHook('onRequest', ({secure, hostname, url}, reply, done) => {
if (!secure) {
return reply.redirect(308, `https://${hostname}${url}`)
}
done()
})
// Put your other rutes here; eg.
requestListener.get('/', (request, reply) => {
reply.send('Hello World!')
})
requestListener.listen(PORT)
PHP (LAMP):
Even though it is not officially supported on Glitch, it is still a quite popular backend language / stack outside of Glitch. If you do not know how to use PHP on Glitch, I have created a LAMP starter project that should make it easy to get started.
# Using .htaccess file
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [R=308,QSA,L]