octospacc
/
SpaccDotWeb
mirror of https://gitlab.com/SpaccInc/SpaccDotWeb.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Server] Cookie API improvements, metacookie, pager API passing options

This commit is contained in:
octospacc 2024-07-13 22:15:53 +02:00
parent 912534d13d
commit b47baf408b
2 changed files with 154 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
Example.Server.js
View File

@ -6,9 +6,9 @@ const server = SpaccDotWebServer.setup({
// staticFiles: [],
linkStyles: [ 'Example.css' ],
// linkScripts: [],
// pageTitler: (title) => `...`,
// appPager: (content, title) => `...`,
// htmlPager: (content, title) => `...`,
// pageTitler: (title, opts={}) => `...`,
// appPager: (content, title, opts={}) => `...`,
// htmlPager: (content, title, opts={}) => `...`,
});
if (SpaccDotWebServer.envIsNode && ['dump', 'html'].includes(process.argv[2])) {
@ -19,12 +19,13 @@ if (SpaccDotWebServer.envIsNode && ['dump', 'html'].includes(process.argv[2])) {
// defaultResponse: { code: 500, headers: {} },
// endpointsFalltrough: false,
// port: 3000,
// address: '127.0.0.1',
address: '0.0.0.0',
// maxBodyUploadSize: null,
// handleHttpHead: true,
// appElement: 'div#app',
// transitionElement: 'div#transition',
// cookieInUrl: 'spaccdotweb-cookie',
// metaCookie: 'spaccdotweb-meta',
// cookieInUrl: 'spaccdotweb-cookie', // not (yet) implemented
// endpoints are defined by a discriminator and an action
endpoints: [
@ -46,9 +47,8 @@ if (SpaccDotWebServer.envIsNode && ['dump', 'html'].includes(process.argv[2])) {
}
// a short sleep so that we can test client transitions
await (new Promise(r => setTimeout(r, 1500)));
await (new Promise(resolve => setTimeout(resolve, 1500)));
}
// TODO: setCookie should update the current cookie context, so that following getCookie calls return updated data
const content = `
<h2>Test</h2>
<p>This page was rendered at ${Date()}.</p>

183
SpaccDotWeb.Server.js
View File

@ -1,9 +1,12 @@
/* TODO:
* built-in logging
* configure to embed linked styles and scripts into the HTML output, or just link to file
* handle linkScripts to insert in the HTML, like linkStyles
* differentiate between client-only, served-only, and both-mode scripts?
* relative URL root
* utility functions for rewriting url query parameters?
* fix hash navigation to prevent no-going-back issue
* fix hash navigation to prevent no-going-back issue (possible?)
* finish polishing the cookie API
* other things listed in the file
*/
(() => {
@ -13,6 +16,11 @@ const envIsBrowser = (typeof window !== 'undefined' && typeof window.document !=
const allOpts = {};
let fs, path, mime, multipart;
// 2 years is a good default duration for a system cookie
// they say Firefox limits to that; Chromium forces expiry after 400 days
// (https://http.dev/set-cookie#max-age)
const cookieMaxAge2Years = (2 * 365 * 24 * 60 * 60);
const setup = (globalOptions={}) => {
allOpts.global = globalOptions;
//allOpts.global.appName ||= 'Untitled SpaccDotWeb App';
@ -26,18 +34,18 @@ const setup = (globalOptions={}) => {
allOpts.global.staticFiles.push(item);
}
}
allOpts.global.pageTitler ||= (title) => `${title || ''}${title && allOpts.global.appName ? ' — ' : ''}${allOpts.global.appName || ''}`,
allOpts.global.appPager ||= (content, title) => content,
allOpts.global.pageTitler ||= (title, opts={}) => `${title || ''}${title && allOpts.global.appName ? ' — ' : ''}${allOpts.global.appName || ''}`,
allOpts.global.appPager ||= (content, title, opts={}) => content,
allOpts.global.htmlPager ||= (content, title, opts={}) => `<!DOCTYPE html><html><head><!--
--><meta charset="utf-8"/><!--
--><meta name="viewport" content="width=device-width, initial-scale=1.0"/><!--
--><title>${(opts.pageTitler || allOpts.global.pageTitler)(title)}</title><!--
--><title>${(opts.pageTitler || allOpts.global.pageTitler)(title, opts)}</title><!--
-->${allOpts.global.linkStyles.map((item) => {
return `<link rel="stylesheet" href="${allOpts.global.staticFiles.includes(item) ? (allOpts.global.staticPrefix + item) : item}"/>`;
}).join('')}<!--
--></head><body><!--
--><div id="transition"></div><!--
--><div id="app">${(opts.appPager || allOpts.global.appPager)(content, title)}</div><!--
--><div id="app">${(opts.appPager || allOpts.global.appPager)(content, title, opts)}</div><!--
--></body></html>`;
const result = {};
result.initServer = (serverOptions={}) => initServer(serverOptions);
@ -51,6 +59,7 @@ const initServer = (serverOptions) => {
allOpts.server = serverOptions;
allOpts.server.defaultResponse ||= { code: 500, headers: {} };
allOpts.server.endpointsFalltrough ||= false;
allOpts.server.metaCookie ||= 'spaccdotweb-meta';
if (envIsNode) {
allOpts.server.port ||= 3000;
allOpts.server.address ||= '127.0.0.1';
@ -101,20 +110,24 @@ const handleRequest = async (request, response={}) => {
const context = {
request,
response,
cookieString: (envIsNode ? (request.headers.cookie || '') : envIsBrowser ? clientCookieApi() : ''),
clientLanguages: parseclientLanguages(request),
urlPath: request.url.slice(1).toLowerCase().split('?')[0],
urlQuery: request.url.split('?')?.slice(1)?.join('?'),
bodyParameters: (['POST', 'PUT', 'PATCH'].includes(request.method) && await parseBodyParams(request)), // TODO which other methods need body?
getCookie: (cookie) => getCookie(request, cookie),
setCookie: (cookie) => setCookie(response, cookie),
//storageApi: (key,value, opts) => storageApi(key, value, opts),
renderPage: (content, title, opts) => renderPage(response, content, title, opts),
redirectTo: (url) => redirectTo(response, url),
clientLanguages: parseclientLanguages(request),
};
context.renderPage = (content, title, opts) => renderPage(response, content, title, { ...opts, context });
context.urlSections = context.urlPath.split('/');
context.urlParameters = Object.fromEntries(new URLSearchParams(context.urlQuery));
context.cookieData = parseCookieString(context.cookieString);
context.getCookie = (cookieName) => (cookieName ? context.cookieData[cookieName]?.value : context.cookieString);
context.setCookie = (cookie, cookieValue, cookieFlags) => (context.cookieString = setCookie(context.cookieData, response, cookie, cookieValue, cookieFlags));
if (allOpts.server.metaCookie) {
context.renewCookie = (cookieName) => renewCookie(context.getCookie, context.setCookie, cookieName);
}
setClientTransition(true);
// TODO check if this is respected even when using renderPage?
const handlingHttpHead = (allOpts.server.handleHttpHead && request.method === 'HEAD')
if (handlingHttpHead) {
request.method = 'GET';
@ -174,11 +187,11 @@ const renderPage = (response, content, title, opts={}) => {
// TODO status code could need to be different in different situations and so should be set accordingly? (but we don't handle it here?)
if (envIsNode) {
response.setHeader('content-type', 'text/html; charset=utf-8');
response.end((opts.htmlPager || allOpts.global.htmlPager)(content, title));
response.end((opts.htmlPager || allOpts.global.htmlPager)(content, title, opts));
}
if (envIsBrowser) {
document.title = (opts.pageTitler || allOpts.global.pageTitler)(title);
document.querySelector(allOpts.server.appElement).innerHTML = ((opts.appPager || allOpts.global.appPager)(content, title));
document.title = (opts.pageTitler || allOpts.global.pageTitler)(title, opts);
document.querySelector(allOpts.server.appElement).innerHTML = ((opts.appPager || allOpts.global.appPager)(content, title, opts));
for (const srcElem of document.querySelectorAll(`[src^="${allOpts.global.staticPrefix}"]`)) {
srcElem.src = window.SpaccDotWebServer.staticFilesData[srcElem.getAttribute('src')];
}
@ -264,35 +277,133 @@ const parseBodyParams = async (request) => {
}
};
const getCookie = (request, name) => {
let cookies;
if (envIsNode) {
cookies = (request.headers?.cookie || '');
} else if (envIsBrowser) {
cookies = clientCookieApi();
const makeCookieString = (cookieData) => {
let cookieString = '';
for (const cookieName in cookieData) {
cookieString += `; ${cookieName}=${cookieData[cookieName].value}`;
}
if (name) {
// get a specific cookie
for (const cookie of (cookies?.split(';') || [])) {
// TODO ensure this is good, whitespace must be removed at the start but idk about the end
const [key, ...rest] = cookie.trim().split('=');
if (key === name) {
return rest.join('=');
}
return cookieString.slice(2);
}
const parseCookieString = (cookieString) => {
const cookieData = {};
if (!cookieString) {
return cookieData;
}
for (const cookie of cookieString.split('; ')) {
const [key, ...rest] = cookie.split('=');
cookieData[key] = { value: rest.join('=') };
}
if (allOpts.server.metaCookie) {
const metaData = parseMetaCookie(cookieData[allOpts.server.metaCookie].value);
for (const cookieName in cookieData) {
cookieData[cookieName] = { ...cookieData[cookieName], ...metaData[cookieName] };
}
} else {
// get all cookies
return cookies;
}
return cookieData;
};
const setCookie = (response, cookie) => {
if (envIsNode) {
response.setHeader('Set-Cookie', cookie);
// TODO update current cookie list in existing request to reflect new assignment
} else if (envIsBrowser) {
clientCookieApi(cookie);
const setCookie = (cookieData, response, cookie, cookieValue, cookieFlags) => {
const cookieSet = [];
const setCookie = (cookie, cookieValue, cookieFlags) => {
// TODO implement setCookie with standard raw format (current) and optional javascript object format
let cookieString, cookieName;
if (cookieValue === undefined) {
cookieString = cookie;
[cookieName, ...cookieValue] = cookieString.split('; ')[0].split('=');
cookieValue = cookieValue.join('=');
} else {
cookieName = cookie;
}
// Expires is deprecated, but old browsers don't support Max-Age
// (https://mrcoles.com/blog/cookies-max-age-vs-expires)
// so, we set Expires when it is missing but Max-Age is present
let expires = false;
let maxAge;
for (let flag of cookieString.split('; ').slice(1)) {
flag = flag.toLowerCase();
if (!expires && flag.startsWith('max-age=')) {
maxAge = flag.split('=')[1];
} else if (flag.startsWith('expires=')) {
expires = true;
}
}
if (!expires && maxAge) {
cookieString += `; expires=${(new Date(Date.now() + (maxAge * 1000))).toUTCString()}`;
}
if (envIsNode) {
cookieSet.push(cookieString);
} else if (envIsBrowser) {
clientCookieApi(cookieString);
}
// TODO update cookie flags inside cookieData, this just updates the value
// because of this (?) also the value of the metaCookie is not updated in the request
cookieData[cookieName] ||= {};
cookieData[cookieName].value = cookieValue;
cookieString = makeCookieString(cookieData);
return cookieString;
};
const result = setCookie(cookie, cookieValue, cookieFlags);
if (allOpts.server.metaCookie) {
const [cookieBody, ...cookieFlags] = cookie.split('; ');
const cookieName = cookieBody.split('=')[0];
const metaData = parseMetaCookie(cookieData[allOpts.server.metaCookie]?.value);
if (cookieFlags.length) {
metaData[cookieName] = parseMetaCookie(`${cookieName}&${cookieFlags.join('&')}`)[cookieName];
} else {
delete metaData[cookieName];
}
setCookie(`${allOpts.server.metaCookie}=${makeMetaCookie(metaData)}; max-age=${cookieMaxAge2Years}`);
}
if (envIsNode) {
response.setHeader('set-cookie', cookieSet);
}
return result;
};
// TODO handle renewal of all cookies at the same time if no name specified?
const renewCookie = (getCookie, setCookie, cookieName) => {
const metaData = parseMetaCookie(getCookie(allOpts.server.metaCookie));
const cookieFlags = makeMetaCookie({ [cookieName]: metaData[cookieName] }).split('|')[0].slice(cookieName.length).replaceAll('&', '; ');
setCookie(`${cookieName}=${getCookie(cookieName)}${cookieFlags}`);
setCookie(`${allOpts.server.metaCookie}=${makeMetaCookie(metaData)}; max-age=${cookieMaxAge2Years}`);
};
// below we use pipe ('|') to split cookies and amperstand ('&') for fields,
// no problem since as of 2024 no standard cookie flag has that in the body
const makeMetaCookie = (metaData) => {
let metaString = '';
metaData[allOpts.server.metaCookie] ||= {};
metaData[allOpts.server.metaCookie]['set-date'] = (new Date()).toUTCString();
for (const [name, flags] of Object.entries(metaData)) {
metaString += `|${name}&`;
for (const [key, value] of Object.entries(flags)) {
// by standard, boolean cookie flags are named without any value if true, omitted if false
metaString += (value === true ? `${key}&` : `${key}=${value}&`);
}
metaString = metaString.slice(0, -1);
}
return metaString.slice(1);
};
const parseMetaCookie = (metaString) => {
const metaCookie = {};
if (!metaString) {
return metaCookie;
}
for (const cookie of metaString.split('|')) {
const [name, ...fields] = cookie.split('&');
metaCookie[name] = {};
for (const field of fields) {
if (!field) {
continue;
}
const [key, ...tokens] = field.split('=');
metaCookie[name][key] = (tokens.join('=') || true);
}
}
return metaCookie;
};
// try to use the built-in cookie API, fallback to a Storage-based wrapper in case it fails (for example on file:///)