novox/mesh-catalog
18
0
Fork 0
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity

issue 1859: serve one script and one stylesheet from the page's own origin (1859.2)

Browse Source 
ADR 0515 §6: /static/app.js and /static/app.css are built in and served with their types and nosniff; the
policy allows script and style from the origin alone and connect-src 'self'; no page carries an inline script,
a style or a handler. The script posts the page's forms without a reload and says a failure on the page.
This commit is contained in:
jochen
2026-10-22 20:04:26 +02:00
parent ad4f312263
commit 7e83b99615
5 changed files with 262 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/mesh-mail-web/internal/web/server.go
+4 -1
View File
@@ -20,7 +20,9 @@ const OpenTool = "mail-webclient.open"
// CSP is ADR 0440 §5's own policy, set on every answer: nothing loaded from elsewhere, and this page never
// framed by another site.
const CSP = "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; " +
// ADR 0515 §6 (issue 1859): the page's one script and one stylesheet from its own origin alone, and the script
// talks only to it (connect-src 'self').
const CSP = "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; connect-src 'self'; " +
"frame-ancestors 'none'; base-uri 'none'; form-action 'self'"
// InternalHost is this machine's own internal name for the module (ADR 0440 §2): the operator's own setting
@@ -54,6 +56,7 @@ func NewServer(host string, auth *Auth, b *Bundle) *Server {
if b != nil {
s.Mux.HandleFunc("/", protect(b.listPage))
s.Mux.HandleFunc("/all", protect(b.accountsPage))
s.Mux.HandleFunc("/static/", staticPage) // the script and the stylesheet carry nothing of a mail
s.Mux.HandleFunc("/folder", protect(b.folderPage))
s.Mux.HandleFunc("/search", protect(b.searchPage))
s.Mux.HandleFunc("/mail", protect(b.mailPage))
modules/mesh-mail-web/internal/web/static.go
+37
View File
@@ -0,0 +1,37 @@
package web
// The mail page's one script and one stylesheet (novox/hq ADR 0515 §6, issue 1859), built into the binary and
// served from the page's own origin at /static/app.js and /static/app.css, with their types and nosniff;
// nothing else is served from /static/. Neither carries anything of a mail.
import (
"embed"
"net/http"
)
//go:embed static/app.js static/app.css
var staticFiles embed.FS
// staticTypes are the two files and their types.
var staticTypes = map[string]string{
"/static/app.js": "text/javascript; charset=utf-8",
"/static/app.css": "text/css; charset=utf-8",
}
// staticPage answers /static/app.js and /static/app.css; anything else under /static/ is 404.
func staticPage(w http.ResponseWriter, r *http.Request) {
typ, ok := staticTypes[r.URL.Path]
if !ok || (r.Method != http.MethodGet && r.Method != http.MethodHead) {
http.NotFound(w, r)
return
}
body, err := staticFiles.ReadFile(r.URL.Path[1:])
if err != nil {
http.NotFound(w, r)
return
}
w.Header().Set("Content-Type", typ)
w.Header().Set("X-Content-Type-Options", "nosniff")
w.Header().Set("Cache-Control", "no-cache")
_, _ = w.Write(body)
}
modules/mesh-mail-web/internal/web/static/app.css
+74
View File
@@ -0,0 +1,74 @@
/* The mail page's one stylesheet (novox/hq ADR 0515 §3, §6; issue 1859): phone first, one column; a wide
screen adds the reading pane beside the list. The mockup kept with design 63 is its direction. */
:root{--bg:#f5f5f2;--panel:#fff;--ink:#1c1c1a;--muted:#6b6b66;--line:#e2e1dc;--accent:#2f5bd3;--due:#b0124e;
--chip:#ecebe6;--hi:#fff7dc;--scam:#b3261e;--scam-bg:#fde8e6;--ok:#2e9d5b}
@media (prefers-color-scheme:dark){:root{--bg:#131313;--panel:#1c1c1c;--ink:#ebebe8;--muted:#9b9b95;--line:#2d2d2b;
--accent:#86a8ff;--due:#ff7aa6;--chip:#292927;--hi:#2b2616;--scam:#ff8a80;--scam-bg:#3a1c1a;--ok:#5fd38a}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--accent);text-decoration:none}
.muted{color:var(--muted)}
form{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
/* the bar on top: the page's name, the modes, All mail */
.topbar{position:sticky;top:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 12px;
background:var(--panel);border-bottom:1px solid var(--line)}
.topbar .logo{font-weight:700;font-size:17px;color:var(--ink)}
.modes{display:flex;gap:6px;overflow-x:auto;flex:1}
.modes form{flex:none}
.mode{padding:4px 12px;border-radius:99px;border:2px solid var(--line);background:var(--panel);font-size:14px;opacity:.6}
.mode.on{opacity:1;border-color:var(--accent);background:var(--hi)}
.btn{display:inline-block;padding:5px 11px;border:1px solid var(--line);border-radius:7px;font-size:13px;color:var(--ink);
background:var(--panel);white-space:nowrap}
.btn.p{background:var(--accent);border-color:var(--accent);color:#fff}
/* the list */
.page{display:block}
.list{padding:14px 16px 48px;max-width:760px;margin:0 auto;min-width:0}
.greet h1{font-size:26px;margin:4px 0}
.lede{color:var(--muted);margin:2px 0 6px}
.told li{padding:2px 0}
.notice{padding:9px 12px;border-radius:8px;margin:10px 0;font-size:14px;background:var(--hi)}
.notice.failed{background:var(--scam-bg);color:var(--scam)}
.sec h2{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:24px 0 4px;
display:flex;justify-content:space-between}
.cnt{font-size:11px;background:var(--chip);color:var(--muted);border-radius:99px;padding:0 7px}
.empty{font-size:14px;margin:6px 2px}
.tk{display:flex;gap:12px;align-items:flex-start;padding:12px 2px;border-bottom:1px solid var(--line)}
.box{flex:none;width:30px;height:30px;border-radius:8px;border:2.5px solid var(--line);background:var(--panel);
font-size:0;margin-top:1px}
.box:hover{border-color:var(--ink)}
.box.done{background:var(--ink);border-color:var(--ink)}
.box.done::after{content:"\2713";color:var(--bg);font-size:16px;font-weight:800;line-height:24px}
.tb{min-width:0;flex:1}
.tt{display:block;font-size:17px;line-height:1.3;color:var(--ink)}
#handled-today .tt{text-decoration:line-through;color:var(--muted)}
.tm{display:block;font-size:13px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.due{color:var(--due);font-weight:600}
.why{display:block;font-size:13px;color:var(--scam)}
#scam-warnings .tk{background:var(--scam-bg);border-radius:8px;padding:10px}
.later{flex:none;font-size:12px;padding:4px 8px}
.reminded .tt::before{content:"\23F0 "}
/* the reading pane: over the list on a phone, beside it on a wide screen */
.pane{background:var(--panel);padding:14px 16px 48px;min-width:0}
.pane h1{font-size:20px;margin:4px 0 6px;line-height:1.25}
.pane .bar{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.meta{font-size:13px;color:var(--muted)}
.body{white-space:pre-wrap;overflow-wrap:anywhere;font:15px/1.5 system-ui,sans-serif;margin:14px 0}
.items li{padding:4px 0;display:flex;gap:8px;align-items:center;justify-content:space-between}
.fix{margin-top:16px;border-top:1px solid var(--line);padding-top:10px}
.fix h2{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:8px 0}
.fix form{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.fix select,.fix input,.fix button{font:inherit;font-size:13px;padding:4px 7px;border:1px solid var(--line);
border-radius:6px;background:var(--panel);color:var(--ink)}
.atts li{padding:3px 0}
.with-pane .list{display:none}
.owly:empty{display:none}
@media (min-width:900px){
.with-pane{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px)}
.with-pane .list{display:block}
.pane{border-left:1px solid var(--line);position:sticky;top:49px;height:calc(100vh - 49px);overflow:auto}
}
modules/mesh-mail-web/internal/web/static/app.js
+70
View File
@@ -0,0 +1,70 @@
// The mail page's one script (novox/hq ADR 0515 §6; issue 1859). It talks only to the page's own origin:
// ticking, undoing, reminding and correcting post their form without a reload and put the list (and the
// reading pane) back as the page now answers it. Without it, every form still works by an ordinary post.
// An act that fails is said on the page, with its cause (ADR 0517 §5).
"use strict";
(function () {
function say(text) {
var list = document.getElementById("list");
if (!list) {
return;
}
var p = document.createElement("p");
p.className = "notice failed";
p.setAttribute("role", "alert");
p.textContent = text;
list.insertBefore(p, list.firstChild);
}
// Put back the parts of the page this address answers now.
function refresh() {
return fetch(location.href, { credentials: "same-origin" })
.then(function (r) { return r.text(); })
.then(function (html) {
var fresh = new DOMParser().parseFromString(html, "text/html");
["list", "pane"].forEach(function (id) {
var now = document.getElementById(id);
var next = fresh.getElementById(id);
if (now && next) {
now.replaceWith(document.importNode(next, true));
}
});
});
}
document.addEventListener("submit", function (event) {
var form = event.target;
if (!form.classList || !form.classList.contains("act")) {
return;
}
event.preventDefault();
var buttons = form.querySelectorAll("button");
buttons.forEach(function (b) { b.disabled = true; });
fetch(form.getAttribute("action"), {
method: "POST",
credentials: "same-origin",
headers: { "X-Requested-With": "fetch" },
body: new URLSearchParams(new FormData(form))
})
.then(function (r) {
return r.json().catch(function () { return { failed: "the page answered " + r.status }; });
})
.then(function (answer) {
if (answer.failed) {
buttons.forEach(function (b) { b.disabled = false; });
say(answer.failed);
return;
}
if (answer.go) {
location.assign(answer.go);
return;
}
return refresh();
})
.catch(function (err) {
buttons.forEach(function (b) { b.disabled = false; });
say("That did not reach the page: " + err);
});
});
}());
modules/mesh-mail-web/internal/web/static_test.go
+77
View File
@@ -0,0 +1,77 @@
package web
// Issue 1859/AC4 (novox/hq ADR 0515 §6): one script and one stylesheet, from the page's own origin; the
// content security policy allows script and style from it alone, and connect-src 'self'; no inline script
// and no style attribute on any page.
import (
"context"
"encoding/json"
"net/http"
"regexp"
"strings"
"testing"
"time"
)
var (
inlineScript = regexp.MustCompile(`(?i)<script(\s[^>]*)?>`)
styleAttr = regexp.MustCompile(`(?i)\sstyle\s*=|<style[\s>]|\son[a-z]+\s*=`)
)
// 1859/AC4.
func TestEveryPageLoadsScriptAndStyleFromItsOwnOriginAlone(t *testing.T) {
b := (&readingStandIn{list: fullList()}).bundle(time.Date(2026, 10, 22, 7, 45, 0, 0, time.UTC))
accountsRaw, _ := accountsAnswerJSON(map[string]any{"account": "work", "kind": "imap", "address": "op@work.example", "state": "current"})
b.Accounts = func(context.Context) (json.RawMessage, error) { return accountsRaw, nil }
b.AccountBucket = (&fakeAccountsBucket{}).get
b.MailLessons = seatAskJSON(t, map[string]any{"lessons": []any{}})
b.MailGroups = seatAskJSON(t, map[string]any{"groups": []any{}})
b.Search = seatAskJSON(t, map[string]any{"found": []any{}})
b.Read = seatAskJSON(t, map[string]any{"account": "work", "folder": "INBOX", "uid": 101, "subject": "s", "text": "t"})
s := NewServer(testHost, nil, b)
for _, path := range []string{"/", "/all", "/folder?account=work&folder=INBOX", "/search?q=x", "/mail?account=work&folder=INBOX&uid=101", "/write"} {
code, body, h := get(t, s, path)
csp := h.Get("Content-Security-Policy")
for _, want := range []string{"script-src 'self'", "style-src 'self'", "connect-src 'self'", "default-src 'self'"} {
if !strings.Contains(csp, want) {
t.Fatalf("%s: the policy %q does not hold %q", path, csp, want)
}
}
for _, tag := range inlineScript.FindAllString(body, -1) {
if !strings.Contains(tag, `src="/static/app.js"`) {
t.Fatalf("%s: a script that is not /static/app.js: %s", path, tag)
}
}
if m := styleAttr.FindString(body); m != "" {
t.Fatalf("%s (status %d): an inline style or handler %q:\n%s", path, code, m, body)
}
}
_, body, _ := get(t, s, "/")
if !strings.Contains(body, `<link rel="stylesheet" href="/static/app.css">`) || !strings.Contains(body, `<script src="/static/app.js" defer></script>`) {
t.Fatalf("the list page does not load the one stylesheet and the one script:\n%s", body)
}
for path, typ := range map[string]string{"/static/app.js": "text/javascript; charset=utf-8", "/static/app.css": "text/css; charset=utf-8"} {
code, body, h := get(t, s, path)
if code != http.StatusOK || h.Get("Content-Type") != typ || h.Get("X-Content-Type-Options") != "nosniff" || len(body) < 100 {
t.Fatalf("%s: status %d, type %q, nosniff %q, %d bytes; want 200, %s, nosniff, the file", path, code,
h.Get("Content-Type"), h.Get("X-Content-Type-Options"), len(body), typ)
}
}
if code, _, _ := get(t, s, "/static/other.js"); code != http.StatusNotFound {
t.Fatalf("/static/other.js: status %d, want 404 — the two files alone are served", code)
}
}
// 1859/AC4: the script talks only to its own origin: no address of another in it.
func TestTheScriptNamesNoOtherOrigin(t *testing.T) {
js, err := staticFiles.ReadFile("static/app.js")
if err != nil {
t.Fatal(err)
}
for _, word := range []string{"http://", "https://", "//cdn", "eval(", "innerHTML ="} {
if strings.Contains(string(js), word) {
t.Fatalf("app.js holds %q", word)
}
}
}