npm - mockaton - Versions diffs - 10.5.1 → 10.5.2 - Mend

mockaton 10.5.1 → 10.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/package.json +1 -1
package/src/Api.js +5 -19
package/src/ApiCommander.js +1 -7
package/src/DashboardHtml.js +37 -12
package/src/utils/http-response.js +3 -1

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "10.5.1",
+	"version": "10.5.2",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",

package/src/Api.js CHANGED Viewed

@@ -4,29 +4,21 @@
  */
 import { join } from 'node:path'
-import { randomBytes } from 'node:crypto'
 import { cookie } from './cookie.js'
-import DashboardHtml from './DashboardHtml.js'
 import { parseJSON } from './utils/http-request.js'
 import { uiSyncVersion } from './Watcher.js'
 import * as staticCollection from './staticCollection.js'
 import * as mockBrokersCollection from './mockBrokersCollection.js'
 import { config, ConfigValidator } from './config.js'
+import { LinkHeader, DashboardHtml, CSP, dashboardAssets } from './DashboardHtml.js'
 import { DF, API, LONG_POLL_SERVER_TIMEOUT } from './ApiConstants.js'
 import { sendOK, sendJSON, sendUnprocessableContent, sendFile, sendHTML } from './utils/http-response.js'
 export const apiGetRequests = new Map([
-	[API.dashboard, serveHtml],
-	...[
-		'/Dashboard.css',
-		'/Dashboard.js',
-		'/ApiConstants.js',
-		'/ApiCommander.js',
-		'/Filename.js',
-		'/Logo.svg'
-	].map(f => [API.dashboard + f, serveStatic(f)]),
+	[API.dashboard, serveDashboard],
+	...dashboardAssets.map(f => [API.dashboard + f, serveStatic(f)]),
 	[API.state, getState],
 	[API.syncVersion, longPollClientSyncVersion],
@@ -52,14 +44,8 @@ export const apiPatchRequests = new Map([
 /** # GET */
-function serveHtml(_, response) {
-	const nonce = randomBytes(12).toString('base64url')
-	response.setHeader('Content-Security-Policy', [
-		`default-src 'self'`,
-		`img-src data: blob: 'self'`,
-		`script-src 'nonce-${nonce}' 'self'`
-	].join(';'))
-	sendHTML(response, DashboardHtml(nonce))
+function serveDashboard(_, response) {
+	sendHTML(response, DashboardHtml, CSP, LinkHeader)
 }
 function serveStatic(f) {

package/src/ApiCommander.js CHANGED Viewed

@@ -17,13 +17,7 @@ export class Commander {
 	/** @returns {JsonPromise<State>} */
 	getState() {
-		const url = this.#addr + API.state
-		if (globalThis._aotFetch?.[url]) { // github.com/ericfortis/aot-fetch-demo
-			const promise = globalThis._aotFetch[url]
-			delete globalThis._aotFetch[url]
-			return promise
-		}
-		return fetch(url)
+		return fetch(this.#addr + API.state)
 	}
 	/** @returns {JsonPromise<number>} */

package/src/DashboardHtml.js CHANGED Viewed

@@ -1,19 +1,11 @@
-export default (nonce) => `
-<!DOCTYPE html>
+import { API } from './ApiConstants.js'
+export const DashboardHtml = `<!DOCTYPE html>
 <html lang="en-US">
 <head>
 	<meta charset="UTF-8">
-	<script nonce="${nonce}">
-		// Fetches critical API data ahead-of-time.
-		// It’s before loading the stylesheet because CSS blocks.
-		// https://github.com/ericfortis/aot-fetch-demo
-		const initialState = location.origin + '/mockaton/state'
-		window._aotFetch = { [initialState]: fetch(initialState) }
-	</script>
 	<link rel="stylesheet" href="./mockaton/Dashboard.css" />
 	<link rel="icon" href="data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m235 33.7v202c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-151c-0.115-4.49-6.72-5.88-8.46-0.87l-48.3 155c-2.22 7.01-7.72 10.1-16 9.9-3.63-0.191-7.01-1.14-9.66-2.89-2.89-1.72-4.83-4.34-5.57-7.72-11.1-37-22.6-74.3-34.1-111-4.34-14-8.95-31.4-14-48.3-1.82-4.83-8.16-5.32-8.46 1.16v156c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-207c0-5.74 2.62-13.2 9.39-16.3 7.5-3.14 15-4.05 21.8-3.8 3.14 0 6.03 0.686 8.95 1.46 3.14 0.797 6.03 1.98 8.7 3.63 2.65 1.38 5.32 3.14 7.5 5.57 2.22 2.22 3.87 4.83 5.07 7.72l45.8 157c4.63-15.9 32.4-117 33.3-121 4.12-13.8 7.72-26.5 10.9-38.7 1.16-2.65 2.89-5.32 5.07-7.5 2.15-2.15 4.58-4.12 7.5-5.32 2.65-1.57 5.57-2.89 8.46-3.63 3.14-0.797 9.44-0.988 12.1-0.988 11.6 1.07 29.4 9.14 29.4 27z' fill='%23808080'/%3E%3C/svg%3E">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<meta name="description" content="HTTP Mock Server">
@@ -24,3 +16,36 @@ export default (nonce) => `
 </body>
 </html>
 `
+export const CSP = [
+	`default-src 'self'`,
+	`img-src data: blob: 'self'`
+].join(';')
+const assets = {
+	style: ['/Dashboard.css'],
+	script: ['/Dashboard.js'],
+	module: ['/ApiConstants.js', '/ApiCommander.js', '/Filename.js'],
+	image: ['/Logo.svg']
+}
+export const dashboardAssets = Object.values(assets).flat()
+// Link Header. This is not very useful in localhost (only optimizes 2ms).
+const attrMap = {
+	module: 'rel=modulepreload',
+	image: 'rel=preload; as=image',
+	style: 'rel=preload; as=style',
+	script: 'rel=preload; as=script; crossorigin',
+	fetch: 'rel=preload; as=fetch; crossorigin'
+}
+let links = []
+for (const [type, files] of Object.entries(assets))
+	for (const f of files)
+		links.push(`<${API.dashboard + f}>; ${attrMap[type]}`)
+links.push(`<${API.state}>; ${attrMap.fetch}`)
+export const LinkHeader = links.join(',')

package/src/utils/http-response.js CHANGED Viewed

@@ -9,9 +9,11 @@ export function sendOK(response) {
 	response.end()
 }
-export function sendHTML(response, html) {
+export function sendHTML(response, html, csp, link) {
 	logger.access(response)
 	response.setHeader('Content-Type', mimeFor('html'))
+	response.setHeader('Content-Security-Policy', csp)
+	response.setHeader('Link', link)
 	response.end(html)
 }