Spaces:
Running
Running
v0.4: browser probe label
Browse files- browser.js +602 -602
browser.js
CHANGED
|
@@ -1,602 +1,602 @@
|
|
| 1 |
-
/* ViKernel Browser: a governed agentic browser app for ViKernel Desktop.
|
| 2 |
-
Every navigation passes egress policy, SSRF guard and the ViKernel kernel gate on the server.
|
| 3 |
-
The page is shown as a sanitized reader view; hidden instructions are surfaced, and agent
|
| 4 |
-
actions on the page are decided by the gate. */
|
| 5 |
-
(() => {
|
| 6 |
-
'use strict';
|
| 7 |
-
|
| 8 |
-
const MAX_TABS = 6;
|
| 9 |
-
const BM_KEY = 'vb.bookmarks.v1';
|
| 10 |
-
const START = 'vb:start';
|
| 11 |
-
|
| 12 |
-
const ICON = '<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="M3 11h16M11 3c2.6 2.8 2.6 13.2 0 16M11 3c-2.6 2.8-2.6 13.2 0 16"/><path d="M17 13.5l4 1.5v3c0 2.2-1.7 3.6-4 4.5-2.3-.9-4-2.3-4-4.5v-3z" fill="currentColor" fill-opacity=".18"/></svg>';
|
| 13 |
-
const I = {
|
| 14 |
-
back: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>',
|
| 15 |
-
fwd: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>',
|
| 16 |
-
reload: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-2.6-6.4"/><path d="M21 3v6h-6"/></svg>',
|
| 17 |
-
star: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path d="M12 3l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.3 6.4 20.2l1.1-6.2L3 9.6l6.2-.9z"/></svg>',
|
| 18 |
-
lock: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>',
|
| 19 |
-
unlock: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 7.5-2"/></svg>',
|
| 20 |
-
shield: '<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"><path d="M12 2l8 3v6c0 5-3.4 9.3-8 11-4.6-1.7-8-6-8-11V5z" fill="currentColor" fill-opacity=".12"/><path d="M9 9l6 6M15 9l-6 6" stroke-linecap="round"/></svg>',
|
| 21 |
-
agent: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.8 4.6L18 9l-4.2 1.4L12 15l-1.8-4.6L6 9l4.2-1.4z"/><path d="M18 15l.9 2.1L21 18l-2.1.9L18 21l-.9-2.1L15 18l2.1-.9z"/></svg>',
|
| 22 |
-
hist: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>',
|
| 23 |
-
info: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 7.5v.5"/></svg>',
|
| 24 |
-
plus: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>',
|
| 25 |
-
x: '<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>',
|
| 26 |
-
warn: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l10 18H2z"/><path d="M12 10v5M12 18v.5"/></svg>'
|
| 27 |
-
};
|
| 28 |
-
|
| 29 |
-
const CSS = `
|
| 30 |
-
.vb-root{--vb-bg:#fff;--vb-fg:#0f172a;--vb-mut:#64748b;--vb-line:#e2e8f0;--vb-chrome:#f1f5f9;--vb-tab:#e2e8f0;--vb-acc:#2563EB;--vb-ok:#16a34a;--vb-okbg:#dcfce7;--vb-bad:#dc2626;--vb-badbg:#fee2e2;--vb-warn:#b45309;--vb-warnbg:#fef3c7;--vb-card:#f8fafc;--vb-mark:#fde68a;
|
| 31 |
-
position:relative;display:flex;flex-direction:column;height:100%;min-height:0;background:var(--vb-bg);color:var(--vb-fg);font:13px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;container-type:inline-size;outline:none;overflow:hidden}
|
| 32 |
-
@media (prefers-color-scheme:dark){.vb-root{--vb-bg:#0b1220;--vb-fg:#e2e8f0;--vb-mut:#94a3b8;--vb-line:#1e293b;--vb-chrome:#111a2e;--vb-tab:#1e293b;--vb-okbg:#052e16;--vb-ok:#4ade80;--vb-badbg:#450a0a;--vb-bad:#f87171;--vb-warnbg:#422006;--vb-warn:#fbbf24;--vb-card:#0f172a;--vb-mark:#713f12}}
|
| 33 |
-
:is(.dark,[data-theme="dark"]) .vb-root{--vb-bg:#0b1220;--vb-fg:#e2e8f0;--vb-mut:#94a3b8;--vb-line:#1e293b;--vb-chrome:#111a2e;--vb-tab:#1e293b;--vb-okbg:#052e16;--vb-ok:#4ade80;--vb-badbg:#450a0a;--vb-bad:#f87171;--vb-warnbg:#422006;--vb-warn:#fbbf24;--vb-card:#0f172a;--vb-mark:#713f12}
|
| 34 |
-
.vb-root *{box-sizing:border-box}
|
| 35 |
-
.vb-root button{font:inherit;color:inherit;cursor:pointer}
|
| 36 |
-
.vb-tabs{display:flex;align-items:flex-end;gap:2px;padding:6px 6px 0;background:var(--vb-chrome);overflow-x:auto;scrollbar-width:none;flex:none}
|
| 37 |
-
.vb-tab{display:flex;align-items:center;gap:6px;min-width:0;max-width:200px;flex:1 1 140px;padding:6px 8px 7px 10px;border-radius:8px 8px 0 0;background:transparent;border:0;color:var(--vb-mut);white-space:nowrap}
|
| 38 |
-
.vb-tab:hover{background:var(--vb-tab)}
|
| 39 |
-
.vb-tab.on{background:var(--vb-bg);color:var(--vb-fg);font-weight:600}
|
| 40 |
-
.vb-tab .vb-tt{overflow:hidden;text-overflow:ellipsis;flex:1;text-align:left}
|
| 41 |
-
.vb-tab .vb-tx{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;border:0;background:transparent;padding:0;opacity:.6}
|
| 42 |
-
.vb-tab .vb-tx:hover{background:var(--vb-line);opacity:1}
|
| 43 |
-
.vb-tab .vb-dot{width:7px;height:7px;border-radius:50%;background:var(--vb-mut);flex:none}
|
| 44 |
-
.vb-tab .vb-dot.ok{background:var(--vb-ok)}.vb-tab .vb-dot.bad{background:var(--vb-bad)}.vb-tab .vb-dot.warn{background:var(--vb-warn)}
|
| 45 |
-
.vb-newtab{flex:none;width:28px;height:28px;margin-bottom:3px;border:0;border-radius:7px;background:transparent;display:grid;place-items:center}
|
| 46 |
-
.vb-newtab:hover{background:var(--vb-tab)}
|
| 47 |
-
.vb-bar{display:flex;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid var(--vb-line);flex:none}
|
| 48 |
-
.vb-ib{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:8px;background:transparent;flex:none}
|
| 49 |
-
.vb-ib:hover:not(:disabled){background:var(--vb-chrome)}
|
| 50 |
-
.vb-ib:disabled{opacity:.35;cursor:default}
|
| 51 |
-
.vb-ib.on{color:var(--vb-acc);background:var(--vb-chrome)}
|
| 52 |
-
.vb-ib.starred{color:#eab308}.vb-ib.starred svg{fill:currentColor}
|
| 53 |
-
.vb-addr{flex:1;min-width:80px;display:flex;align-items:center;gap:6px;height:32px;padding:0 6px 0 10px;border-radius:16px;background:var(--vb-chrome);border:1px solid transparent}
|
| 54 |
-
.vb-addr:focus-within{border-color:var(--vb-acc);background:var(--vb-bg)}
|
| 55 |
-
.vb-addr input{flex:1;min-width:0;border:0;background:transparent;color:var(--vb-fg);font:inherit;font-size:13px;outline:none}
|
| 56 |
-
.vb-lock{display:grid;place-items:center;color:var(--vb-mut)}.vb-lock.https{color:var(--vb-ok)}.vb-lock.http{color:var(--vb-warn)}
|
| 57 |
-
.vb-chip{flex:none;font:700 11px/1 system-ui,sans-serif;padding:5px 8px;border-radius:10px;white-space:nowrap;letter-spacing:.2px}
|
| 58 |
-
.vb-chip.ok{background:var(--vb-okbg);color:var(--vb-ok)}.vb-chip.bad{background:var(--vb-badbg);color:var(--vb-bad)}.vb-chip.mut{background:var(--vb-chrome);color:var(--vb-mut)}
|
| 59 |
-
.vb-bm{display:flex;gap:4px;padding:4px 8px;border-bottom:1px solid var(--vb-line);overflow-x:auto;scrollbar-width:thin;flex:none}
|
| 60 |
-
.vb-bm button{flex:none;border:0;background:transparent;border-radius:6px;padding:3px 8px;color:var(--vb-mut);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
| 61 |
-
.vb-bm button:hover{background:var(--vb-chrome);color:var(--vb-fg)}
|
| 62 |
-
.vb-bm button.bad{color:var(--vb-bad)}.vb-bm button.demo{color:var(--vb-warn);font-weight:600}
|
| 63 |
-
.vb-main{flex:1;min-height:0;display:flex}
|
| 64 |
-
.vb-content{flex:1;min-width:0;overflow:auto;position:relative}
|
| 65 |
-
.vb-side{width:340px;flex:none;border-left:1px solid var(--vb-line);display:flex;flex-direction:column;min-height:0;background:var(--vb-card)}
|
| 66 |
-
.vb-side[hidden]{display:none}
|
| 67 |
-
.vb-side h3{margin:0;font-size:14px}
|
| 68 |
-
.vb-sidehd{padding:12px;border-bottom:1px solid var(--vb-line);display:flex;flex-direction:column;gap:8px}
|
| 69 |
-
.vb-sidehd textarea{width:100%;min-height:54px;resize:vertical;border:1px solid var(--vb-line);border-radius:8px;padding:8px;background:var(--vb-bg);color:var(--vb-fg);font:inherit}
|
| 70 |
-
.vb-run{align-self:flex-end;border:0;border-radius:8px;padding:7px 16px;background:var(--vb-acc);color:#fff !important;font-weight:700}
|
| 71 |
-
.vb-run:disabled{opacity:.5;cursor:default}
|
| 72 |
-
.vb-ev{flex:1;overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
|
| 73 |
-
.vb-e{border:1px solid var(--vb-line);border-radius:8px;padding:8px 10px;background:var(--vb-bg);word-break:break-word}
|
| 74 |
-
.vb-e .vb-k{font:700 10px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.6px;color:var(--vb-mut);margin-bottom:4px}
|
| 75 |
-
.vb-e code,.vb-e pre{font:12px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace}
|
| 76 |
-
.vb-e pre{margin:4px 0 0;white-space:pre-wrap;max-height:140px;overflow:auto;background:var(--vb-chrome);padding:6px;border-radius:6px}
|
| 77 |
-
.vb-e.deny{border-color:var(--vb-bad)}.vb-e.allow{border-color:var(--vb-ok)}
|
| 78 |
-
.vb-tag{display:inline-block;font:700 11px/1 system-ui,sans-serif;padding:4px 7px;border-radius:6px;margin-right:6px}
|
| 79 |
-
.vb-tag.ok{background:var(--vb-okbg);color:var(--vb-ok)}.vb-tag.bad{background:var(--vb-badbg);color:var(--vb-bad)}
|
| 80 |
-
.vb-callout{border-radius:10px;padding:10px 12px;background:var(--vb-badbg);color:var(--vb-bad);font-weight:600;border:1px solid var(--vb-bad)}
|
| 81 |
-
.vb-final{border-color:var(--vb-acc)}
|
| 82 |
-
.vb-banner{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--vb-warnbg);color:var(--vb-warn);font-weight:600;border-bottom:1px solid var(--vb-line)}
|
| 83 |
-
.vb-banner.soft{font-weight:500}
|
| 84 |
-
.vb-banner button{margin-left:auto;border:1px solid currentColor;background:transparent;border-radius:6px;padding:3px 10px;font-weight:700}
|
| 85 |
-
.vb-page{max-width:760px;margin:0 auto;padding:22px 28px 60px;font:16px/1.65 Georgia,"Times New Roman",serif;color:var(--vb-fg)}
|
| 86 |
-
.vb-page h1{font:700 28px/1.25 system-ui,sans-serif;margin:.2em 0 .6em}
|
| 87 |
-
.vb-page h2,.vb-page h3,.vb-page h4{font-family:system-ui,sans-serif;line-height:1.3;margin:1.4em 0 .5em}
|
| 88 |
-
.vb-page a{color:var(--vb-acc)}
|
| 89 |
-
.vb-page img{max-width:100%;height:auto;border-radius:6px}
|
| 90 |
-
.vb-page pre{overflow:auto;background:var(--vb-chrome);padding:10px;border-radius:8px;font-size:13px}
|
| 91 |
-
.vb-page code{font-family:ui-monospace,Consolas,monospace;font-size:.9em}
|
| 92 |
-
.vb-page blockquote{margin:1em 0;padding:.2em 1em;border-left:3px solid var(--vb-line);color:var(--vb-mut)}
|
| 93 |
-
.vb-page table{border-collapse:collapse;display:block;overflow-x:auto;max-width:100%;font:14px/1.4 system-ui,sans-serif}
|
| 94 |
-
.vb-page td,.vb-page th{border:1px solid var(--vb-line);padding:5px 8px;vertical-align:top}
|
| 95 |
-
.vb-pagehd{font:12px/1.4 system-ui,sans-serif;color:var(--vb-mut);margin-bottom:6px;word-break:break-all}
|
| 96 |
-
.vb-hidden-wrap{margin-top:40px;padding-top:14px;border-top:2px dashed var(--vb-warn);font-family:system-ui,sans-serif}
|
| 97 |
-
.vb-hidden-wrap h3{color:var(--vb-warn);margin-top:0}
|
| 98 |
-
mark.vb-hidden{display:block;background:var(--vb-mark);color:inherit;padding:8px 10px;border-radius:8px;margin:8px 0;font-size:14px;transition:box-shadow .3s}
|
| 99 |
-
mark.vb-hidden i{color:var(--vb-mut);font-size:12px}
|
| 100 |
-
mark.vb-hidden.vb-sus{border-left:4px solid var(--vb-bad)}
|
| 101 |
-
.vb-flash mark.vb-hidden{box-shadow:0 0 0 3px var(--vb-bad)}
|
| 102 |
-
.vb-center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;min-height:100%;gap:10px}
|
| 103 |
-
.vb-block{color:var(--vb-bad)}
|
| 104 |
-
.vb-block h2{margin:0;font:800 24px/1.2 system-ui,sans-serif;color:var(--vb-fg)}
|
| 105 |
-
.vb-kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;text-align:left;max-width:520px;background:var(--vb-card);border:1px solid var(--vb-line);border-radius:10px;padding:12px 16px;color:var(--vb-fg)}
|
| 106 |
-
.vb-kv b{color:var(--vb-mut);font-weight:600}
|
| 107 |
-
.vb-kv span{word-break:break-all}
|
| 108 |
-
.vb-spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--vb-line);border-top-color:var(--vb-acc);animation:vbspin .8s linear infinite}
|
| 109 |
-
@keyframes vbspin{to{transform:rotate(360deg)}}
|
| 110 |
-
.vb-start{max-width:780px;margin:0 auto;padding:30px 24px}
|
| 111 |
-
.vb-start h2{font:800 22px/1.2 system-ui,sans-serif;margin:0 0 4px;display:flex;align-items:center;gap:10px}
|
| 112 |
-
.vb-start h2 svg{color:var(--vb-acc)}
|
| 113 |
-
.vb-start p{color:var(--vb-mut);margin:0 0 18px}
|
| 114 |
-
.vb-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:22px}
|
| 115 |
-
.vb-tile{display:flex;flex-direction:column;gap:4px;text-align:left;border:1px solid var(--vb-line);border-radius:10px;background:var(--vb-card);padding:12px;min-height:76px}
|
| 116 |
-
.vb-tile:hover{border-color:var(--vb-acc)}
|
| 117 |
-
.vb-tile b{font-size:13px}.vb-tile small{color:var(--vb-mut);word-break:break-all;font-size:11px}
|
| 118 |
-
.vb-tile.bad b{color:var(--vb-bad)}.vb-tile.demo b{color:var(--vb-warn)}
|
| 119 |
-
.vb-guide{list-style:none;padding:0;margin:0;display:grid;gap:8px}
|
| 120 |
-
.vb-guide li{background:var(--vb-card);border:1px solid var(--vb-line);border-radius:8px;padding:9px 12px}
|
| 121 |
-
.vb-panel{position:absolute;top:84px;right:8px;bottom:8px;width:min(380px,calc(100% - 16px));z-index:5;background:var(--vb-bg);border:1px solid var(--vb-line);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.25);display:flex;flex-direction:column}
|
| 122 |
-
.vb-panel[hidden]{display:none}
|
| 123 |
-
.vb-panel header{display:flex;align-items:center;padding:10px 12px;border-bottom:1px solid var(--vb-line);font-weight:700}
|
| 124 |
-
.vb-panel header button{margin-left:auto;border:0;background:transparent;border-radius:6px;padding:4px}
|
| 125 |
-
.vb-panel .vb-pb{overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
|
| 126 |
-
.vb-hrow{display:flex;flex-direction:column;align-items:flex-start;border:0;background:transparent;text-align:left;padding:6px 8px;border-radius:6px;word-break:break-all}
|
| 127 |
-
.vb-hrow:hover{background:var(--vb-chrome)}
|
| 128 |
-
.vb-hrow small{color:var(--vb-mut)}
|
| 129 |
-
.vb-layer{border:1px solid var(--vb-line);border-radius:8px;padding:9px 11px}
|
| 130 |
-
.vb-layer b{display:block;margin-bottom:2px}
|
| 131 |
-
.vb-mut{color:var(--vb-mut)}
|
| 132 |
-
.vb-err{color:var(--vb-warn)}
|
| 133 |
-
@container (max-width:760px){.vb-main{flex-direction:column}.vb-side{width:auto;border-left:0;border-top:1px solid var(--vb-line);max-height:55%}.vb-page{padding:16px 16px 40px}.vb-chip{display:none}.vb-bar .vb-hide-sm{display:none}}
|
| 134 |
-
@media (max-width:760px){.vb-main{flex-direction:column}.vb-side{width:auto;border-left:0;border-top:1px solid var(--vb-line);max-height:55%}}
|
| 135 |
-
@media (prefers-reduced-motion:reduce){.vb-spin{animation-duration:2.4s}}
|
| 136 |
-
`;
|
| 137 |
-
|
| 138 |
-
function injectCss() {
|
| 139 |
-
if (document.getElementById('vb-style')) return;
|
| 140 |
-
const s = document.createElement('style');
|
| 141 |
-
s.id = 'vb-style';
|
| 142 |
-
s.textContent = CSS;
|
| 143 |
-
document.head.append(s);
|
| 144 |
-
}
|
| 145 |
-
|
| 146 |
-
const esc = s => String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&', '<':'<', '>':'>', '"':'"', "'":'''}[c]));
|
| 147 |
-
function mk(tag, cls, html) { const n = document.createElement(tag); if (cls) n.className = cls; if (html != null) n.innerHTML = html; return n; }
|
| 148 |
-
|
| 149 |
-
function defaultBookmarks() {
|
| 150 |
-
return [
|
| 151 |
-
{title:'Demo: poisoned page', url:location.origin + '/demo/poisoned-page', kind:'demo', note:'Hidden instructions try to hijack the agent'},
|
| 152 |
-
{title:'Wikipedia: Operating system', url:'https://en.wikipedia.org/wiki/Operating_system', note:'A long real page'},
|
| 153 |
-
{title:'Example.com', url:'https://example.com', note:'The simplest page'},
|
| 154 |
-
{title:'Blocked: attacker.example', url:'https://attacker.example/', kind:'bad', note:'Egress denylist'},
|
| 155 |
-
{title:'Blocked: metadata', url:'http://169.254.169.254/latest/meta-data/', kind:'bad', note:'SSRF guard, cloud metadata'}
|
| 156 |
-
];
|
| 157 |
-
}
|
| 158 |
-
function loadBookmarks() {
|
| 159 |
-
try { const v = JSON.parse(localStorage.getItem(BM_KEY) || 'null'); if (Array.isArray(v) && v.length) return v.filter(b => b && typeof b.url === 'string').slice(0, 40); } catch (e) { /* storage may be blocked */ }
|
| 160 |
-
return defaultBookmarks();
|
| 161 |
-
}
|
| 162 |
-
function saveBookmarks(list) { try { localStorage.setItem(BM_KEY, JSON.stringify(list)); } catch (e) { /* ignore */ } }
|
| 163 |
-
|
| 164 |
-
/* Defense in depth: the server already sanitizes; strip anything active again before inserting. */
|
| 165 |
-
const OK_TAGS = new Set('H1 H2 H3 H4 H5 H6 P UL OL LI BLOCKQUOTE PRE CODE TABLE THEAD TBODY TFOOT TR TH TD CAPTION A IMG BR HR EM STRONG B I U S SMALL SUB SUP DL DT DD FIGURE FIGCAPTION KBD SAMP Q ABBR CITE TIME MARK DEL INS DIV'.split(' '));
|
| 166 |
-
const OK_ATTR = new Set(['href', 'data-vb-href', 'rel', 'target', 'src', 'alt', 'loading', 'colspan', 'rowspan', 'class', 'data-vb-finding']);
|
| 167 |
-
function scrub(html) {
|
| 168 |
-
const t = document.createElement('template');
|
| 169 |
-
t.innerHTML = String(html || '');
|
| 170 |
-
const walk = node => {
|
| 171 |
-
for (const c of [...node.children]) {
|
| 172 |
-
if (!OK_TAGS.has(c.tagName)) { walk(c); c.replaceWith(...c.childNodes); continue; }
|
| 173 |
-
for (const a of [...c.attributes]) {
|
| 174 |
-
const n = a.name.toLowerCase();
|
| 175 |
-
if (!OK_ATTR.has(n)) { c.removeAttribute(a.name); continue; }
|
| 176 |
-
if ((n === 'href' || n === 'data-vb-href') && !/^https?:\/\//i.test(a.value)) c.removeAttribute(a.name);
|
| 177 |
-
if (n === 'class' && !/^vb-[\w -]*$/.test(a.value)) c.removeAttribute(a.name);
|
| 178 |
-
}
|
| 179 |
-
if (c.tagName === 'IMG') {
|
| 180 |
-
const s = c.getAttribute('src') || '';
|
| 181 |
-
if (s.startsWith('browser-img?u=')) c.setAttribute('src', 'api/ag/browser/img?u=' + s.slice('browser-img?u='.length));
|
| 182 |
-
else c.remove();
|
| 183 |
-
c.setAttribute('referrerpolicy', 'no-referrer');
|
| 184 |
-
c.setAttribute('loading', 'lazy');
|
| 185 |
-
continue;
|
| 186 |
-
}
|
| 187 |
-
walk(c);
|
| 188 |
-
}
|
| 189 |
-
};
|
| 190 |
-
walk(t.content);
|
| 191 |
-
// final guard: nothing outside the allow list survives
|
| 192 |
-
t.content.querySelectorAll('*').forEach(c => { if (!OK_TAGS.has(c.tagName)) c.remove(); });
|
| 193 |
-
return t.content;
|
| 194 |
-
}
|
| 195 |
-
|
| 196 |
-
const hostOf = u => { try { return new URL(u).hostname; } catch (e) { return u; } };
|
| 197 |
-
const isSend = fn => /^(http_post|send_email|upload|post|exfil)/i.test(String(fn || ''));
|
| 198 |
-
const vOk = v => String(v || '').toUpperCase() === 'ALLOW';
|
| 199 |
-
|
| 200 |
-
window.VK_EXTRA_APPS = window.VK_EXTRA_APPS || [];
|
| 201 |
-
window.VK_EXTRA_APPS.push(h => ({
|
| 202 |
-
id:'browser',
|
| 203 |
-
name:() => 'ViKernel Browser',
|
| 204 |
-
color:'#2563EB',
|
| 205 |
-
icon:ICON,
|
| 206 |
-
w:1100,
|
| 207 |
-
h:720,
|
| 208 |
-
render(body, win) {
|
| 209 |
-
injectCss();
|
| 210 |
-
const toast = m => { try { if (h && h.toast) h.toast(m); } catch (e) { /* ignore */ } };
|
| 211 |
-
const api = window.VK_API;
|
| 212 |
-
let bookmarks = loadBookmarks();
|
| 213 |
-
const visits = [];
|
| 214 |
-
let seq = 0;
|
| 215 |
-
const tabs = [];
|
| 216 |
-
let active = null;
|
| 217 |
-
|
| 218 |
-
const root = mk('div', 'vb-root');
|
| 219 |
-
root.tabIndex = -1;
|
| 220 |
-
root.innerHTML = `
|
| 221 |
-
<div class="vb-tabs" role="tablist"></div>
|
| 222 |
-
<div class="vb-bar">
|
| 223 |
-
<button class="vb-ib" data-a="back" title="Back (Alt+Left)" aria-label="Back">${I.back}</button>
|
| 224 |
-
<button class="vb-ib" data-a="fwd" title="Forward (Alt+Right)" aria-label="Forward">${I.fwd}</button>
|
| 225 |
-
<button class="vb-ib" data-a="reload" title="Reload (F5)" aria-label="Reload">${I.reload}</button>
|
| 226 |
-
<form class="vb-addr" autocomplete="off"><span class="vb-lock" aria-hidden="true">${I.info}</span><input type="text" spellcheck="false" placeholder="Enter a URL, e.g. en.wikipedia.org/wiki/Kernel" aria-label="Address bar"><button type="button" class="vb-ib" data-a="star" title="Bookmark this page" aria-label="Bookmark">${I.star}</button></form>
|
| 227 |
-
<span class="vb-chip mut" title="Kernel verdict for this navigation">no page</span>
|
| 228 |
-
<button class="vb-ib" data-a="agent" title="Ask Muse Spark (agent)" aria-label="Agent sidebar">${I.agent}</button>
|
| 229 |
-
<button class="vb-ib vb-hide-sm" data-a="hist" title="History" aria-label="History">${I.hist}</button>
|
| 230 |
-
<button class="vb-ib" data-a="about" title="About the protection layers" aria-label="About">${I.info}</button>
|
| 231 |
-
</div>
|
| 232 |
-
<div class="vb-bm"></div>
|
| 233 |
-
<div class="vb-main">
|
| 234 |
-
<div class="vb-content"></div>
|
| 235 |
-
<aside class="vb-side" hidden>
|
| 236 |
-
<div class="vb-sidehd">
|
| 237 |
-
<h3>Ask Muse Spark to do this on the page</h3>
|
| 238 |
-
<div class="vb-mut">The agent reads the whole page, hidden text included. Every action it proposes goes through the ViKernel gate.</div>
|
| 239 |
-
<textarea maxlength="500" aria-label="Task">Summarize this page for me</textarea>
|
| 240 |
-
<button class="vb-run">Run</button>
|
| 241 |
-
</div>
|
| 242 |
-
<div class="vb-ev"><div class="vb-mut">Open a page, then run a task.</div></div>
|
| 243 |
-
</aside>
|
| 244 |
-
</div>
|
| 245 |
-
<section class="vb-panel" data-p="hist" hidden><header>History<button data-close aria-label="Close">${I.x}</button></header><div class="vb-pb"></div></section>
|
| 246 |
-
<section class="vb-panel" data-p="about" hidden><header>How ViKernel Browser protects you<button data-close aria-label="Close">${I.x}</button></header><div class="vb-pb"></div></section>`;
|
| 247 |
-
body.innerHTML = '';
|
| 248 |
-
body.append(root);
|
| 249 |
-
|
| 250 |
-
const $ = s => root.querySelector(s);
|
| 251 |
-
const tabsEl = $('.vb-tabs'), bmEl = $('.vb-bm'), content = $('.vb-content'), side = $('.vb-side');
|
| 252 |
-
const addr = $('.vb-addr input'), lockEl = $('.vb-lock'), chip = $('.vb-chip'), evEl = $('.vb-ev');
|
| 253 |
-
const runBtn = $('.vb-run'), taskEl = $('.vb-sidehd textarea');
|
| 254 |
-
const btn = a => root.querySelector(`[data-a="${a}"]`);
|
| 255 |
-
|
| 256 |
-
function newTab(url, focus = true) {
|
| 257 |
-
if (tabs.length >= MAX_TABS) { toast('Maximum ' + MAX_TABS + ' tabs'); return null; }
|
| 258 |
-
const t = {id:++seq, hist:[], idx:-1, url:START, title:'New tab', state:'start', data:null, nav:0, events:null, agentBusy:false, showHidden:false};
|
| 259 |
-
tabs.push(t);
|
| 260 |
-
if (focus || !active) active = t;
|
| 261 |
-
if (url) navigate(t, url); else renderAll();
|
| 262 |
-
return t;
|
| 263 |
-
}
|
| 264 |
-
function closeTab(t) {
|
| 265 |
-
const i = tabs.indexOf(t);
|
| 266 |
-
if (i < 0) return;
|
| 267 |
-
tabs.splice(i, 1);
|
| 268 |
-
if (!tabs.length) { active = null; newTab(); return; }
|
| 269 |
-
if (active === t) active = tabs[Math.min(i, tabs.length - 1)];
|
| 270 |
-
renderAll();
|
| 271 |
-
}
|
| 272 |
-
|
| 273 |
-
async function navigate(t, raw, push = true) {
|
| 274 |
-
let url = String(raw || '').trim();
|
| 275 |
-
if (!url) return;
|
| 276 |
-
if (url === START) { t.url = START; t.state = 'start'; t.title = 'New tab'; t.data = null; if (push) pushHist(t, START); renderAll(); return; }
|
| 277 |
-
if (!/^[a-z][a-z0-9+.-]*:/i.test(url)) url = 'https://' + url;
|
| 278 |
-
const my = ++t.nav;
|
| 279 |
-
t.url = url; t.state = 'loading'; t.title = hostOf(url); t.data = null; t.events = null; t.showHidden = false;
|
| 280 |
-
if (push) pushHist(t, url);
|
| 281 |
-
renderAll();
|
| 282 |
-
let r;
|
| 283 |
-
try { r = await api('browser/open', {url}); }
|
| 284 |
-
catch (e) { r = {ok:false, error:e && e.message === 'rate' ? 'Rate limited. Please wait a few seconds and try again.' : 'Network error: ' + (e && e.message || e)}; }
|
| 285 |
-
if (my !== t.nav) return;
|
| 286 |
-
t.data = r || {ok:false, error:'Empty response'};
|
| 287 |
-
if (r && r.ok) {
|
| 288 |
-
t.state = 'page'; t.title = r.title || hostOf(r.final_url || url);
|
| 289 |
-
if (r.final_url && r.final_url !== url) { t.url = r.final_url; t.hist[t.idx] = r.final_url; }
|
| 290 |
-
} else if (r && r.blocked) { t.state = 'blocked'; t.title = 'Blocked: ' + hostOf(url); }
|
| 291 |
-
else { t.state = 'error'; t.title = 'Error: ' + hostOf(url); }
|
| 292 |
-
visits.unshift({url:t.url, title:t.title, at:new Date(), state:t.state});
|
| 293 |
-
if (visits.length > 100) visits.pop();
|
| 294 |
-
renderAll();
|
| 295 |
-
if (t === active) content.scrollTop = 0;
|
| 296 |
-
}
|
| 297 |
-
function pushHist(t, url) { t.hist = t.hist.slice(0, t.idx + 1); t.hist.push(url); t.idx = t.hist.length - 1; }
|
| 298 |
-
function go(delta) {
|
| 299 |
-
const t = active;
|
| 300 |
-
if (!t) return;
|
| 301 |
-
const j = t.idx + delta;
|
| 302 |
-
if (j < 0 || j >= t.hist.length) return;
|
| 303 |
-
t.idx = j;
|
| 304 |
-
navigate(t, t.hist[j], false);
|
| 305 |
-
}
|
| 306 |
-
const reload = () => { if (active && active.url !== START) navigate(active, active.url, false); };
|
| 307 |
-
|
| 308 |
-
function renderTabs() {
|
| 309 |
-
tabsEl.innerHTML = '';
|
| 310 |
-
for (const t of tabs) {
|
| 311 |
-
const b = mk('button', 'vb-tab' + (t === active ? ' on' : ''));
|
| 312 |
-
b.setAttribute('role', 'tab');
|
| 313 |
-
b.title = t.url === START ? 'New tab' : t.url;
|
| 314 |
-
const sus = t.data && t.data.ok && (t.data.findings || []).some(f => f.suspicious);
|
| 315 |
-
const dot = t.state === 'blocked' ? 'bad' : sus ? 'warn' : t.state === 'page' ? 'ok' : '';
|
| 316 |
-
b.innerHTML = `<span class="vb-dot ${dot}"></span><span class="vb-tt">${esc(t.state === 'loading' ? 'Loading ' + t.title : t.title)}</span><span class="vb-tx" role="button" aria-label="Close tab">${I.x}</span>`;
|
| 317 |
-
b.onclick = e => { if (e.target.closest('.vb-tx')) { e.stopPropagation(); closeTab(t); return; } active = t; renderAll(); };
|
| 318 |
-
b.onauxclick = e => { if (e.button === 1) closeTab(t); };
|
| 319 |
-
tabsEl.append(b);
|
| 320 |
-
}
|
| 321 |
-
const n = mk('button', 'vb-newtab', I.plus);
|
| 322 |
-
n.title = 'New tab'; n.setAttribute('aria-label', 'New tab');
|
| 323 |
-
n.onclick = () => newTab();
|
| 324 |
-
tabsEl.append(n);
|
| 325 |
-
}
|
| 326 |
-
|
| 327 |
-
function renderBar() {
|
| 328 |
-
const t = active;
|
| 329 |
-
btn('back').disabled = !t || t.idx <= 0;
|
| 330 |
-
btn('fwd').disabled = !t || t.idx >= t.hist.length - 1;
|
| 331 |
-
if (document.activeElement !== addr) addr.value = !t || t.url === START ? '' : t.url;
|
| 332 |
-
const proto = t && t.url !== START ? (t.url.match(/^(\w+):/) || [])[1] : '';
|
| 333 |
-
lockEl.className = 'vb-lock' + (proto === 'https' ? ' https' : proto ? ' http' : '');
|
| 334 |
-
lockEl.innerHTML = proto === 'https' ? I.lock : proto ? I.unlock : I.info;
|
| 335 |
-
lockEl.title = proto === 'https' ? 'Encrypted connection (https)' : proto ? 'Not encrypted (' + proto + ')' : '';
|
| 336 |
-
const d = t && t.data;
|
| 337 |
-
if (!t || t.state === 'start') { chip.className = 'vb-chip mut'; chip.textContent = 'no page'; }
|
| 338 |
-
else if (t.state === 'loading') { chip.className = 'vb-chip mut'; chip.textContent = 'checking...'; }
|
| 339 |
-
else if (d && d.ok && d.kernel) { chip.className = 'vb-chip ok'; chip.textContent = 'ALLOW · audit #' + (d.kernel.audit_seq ?? '?'); chip.title = 'Kernel gate rule ' + (d.kernel.rule || '-') + (d.kernel.kernel_ms != null ? ', ' + d.kernel.kernel_ms + ' ms' : ''); }
|
| 340 |
-
else if (d && d.blocked) { chip.className = 'vb-chip bad'; chip.textContent = 'DENY · rule ' + d.blocked.rule; chip.title = d.blocked.reason || ''; }
|
| 341 |
-
else { chip.className = 'vb-chip mut'; chip.textContent = 'error'; }
|
| 342 |
-
const starred = t && t.url !== START && bookmarks.some(b => b.url === t.url);
|
| 343 |
-
btn('star').classList.toggle('starred', !!starred);
|
| 344 |
-
btn('star').disabled = !t || t.url === START;
|
| 345 |
-
btn('agent').classList.toggle('on', !side.hidden);
|
| 346 |
-
}
|
| 347 |
-
|
| 348 |
-
function renderBookmarks() {
|
| 349 |
-
bmEl.innerHTML = '';
|
| 350 |
-
for (const b of bookmarks) {
|
| 351 |
-
const x = mk('button', b.kind || '');
|
| 352 |
-
x.textContent = b.title || b.url;
|
| 353 |
-
x.title = b.url + (b.note ? '\n' + b.note : '');
|
| 354 |
-
x.onclick = e => { if (e.ctrlKey || e.metaKey) newTab(b.url); else navigate(active, b.url); };
|
| 355 |
-
bmEl.append(x);
|
| 356 |
-
}
|
| 357 |
-
}
|
| 358 |
-
|
| 359 |
-
function startPage() {
|
| 360 |
-
const w = mk('div', 'vb-start');
|
| 361 |
-
w.innerHTML = `<h2>${ICON} ViKernel Browser</h2>
|
| 362 |
-
<p>A governed browser. Every page load passes egress policy, an SSRF guard and the ViKernel kernel gate, and every agent action on a page is decided by the gate.</p>
|
| 363 |
-
<div class="vb-tiles"></div>
|
| 364 |
-
<ol class="vb-guide">
|
| 365 |
-
<li><b>1.</b> Open <b>Demo: poisoned page</b>. It looks like a normal review blog, but hides instructions for AI agents. The banner shows what was hidden.</li>
|
| 366 |
-
<li><b>2.</b> Open the agent sidebar and press <b>Run</b>. The agent reads the hidden text too. When it tries to send your files out, ViKernel denies it and records an audit entry.</li>
|
| 367 |
-
<li><b>3.</b> Try the <b>Blocked</b> bookmarks to see the egress policy and the SSRF guard stop a request before any byte leaves.</li>
|
| 368 |
-
</ol>`;
|
| 369 |
-
const tiles = w.querySelector('.vb-tiles');
|
| 370 |
-
for (const b of bookmarks) {
|
| 371 |
-
const x = mk('button', 'vb-tile ' + (b.kind || ''));
|
| 372 |
-
x.innerHTML = `<b>${esc(b.title || b.url)}</b><small>${esc(b.note || hostOf(b.url))}</small>`;
|
| 373 |
-
x.title = b.url;
|
| 374 |
-
x.onclick = () => navigate(active, b.url);
|
| 375 |
-
tiles.append(x);
|
| 376 |
-
}
|
| 377 |
-
return w;
|
| 378 |
-
}
|
| 379 |
-
|
| 380 |
-
function blockPage(d) {
|
| 381 |
-
const b = d.blocked || {};
|
| 382 |
-
const w = mk('div', 'vb-center vb-block');
|
| 383 |
-
const audit = d.kernel && d.kernel.audit_seq != null ? `<b>Audit</b><span>#${esc(d.kernel.audit_seq)}</span>` : '';
|
| 384 |
-
const layerName = {egress:'Egress policy', ssrf:'SSRF guard', kernel:'Kernel gate'}[b.layer] || b.layer || '-';
|
| 385 |
-
w.innerHTML = `${I.shield}<h2>Blocked by ViKernel</h2>
|
| 386 |
-
<div class="vb-mut">This request never left the server.</div>
|
| 387 |
-
<div class="vb-kv"><b>URL</b><span>${esc(d.url)}</span><b>Rule</b><span>${esc(b.rule || '-')}</span><b>Layer</b><span>${esc(layerName)}</span><b>Reason</b><span>${esc(b.reason || '-')}</span>${audit}</div>`;
|
| 388 |
-
return w;
|
| 389 |
-
}
|
| 390 |
-
|
| 391 |
-
function errorPage(d) {
|
| 392 |
-
const w = mk('div', 'vb-center');
|
| 393 |
-
w.innerHTML = `<div class="vb-err">${I.warn}</div><h3 style="margin:0">This page could not be loaded</h3><div class="vb-mut">${esc(d && d.error || 'Unknown error')}</div>`;
|
| 394 |
-
const r = mk('button', 'vb-run', 'Try again');
|
| 395 |
-
r.onclick = reload;
|
| 396 |
-
w.append(r);
|
| 397 |
-
return w;
|
| 398 |
-
}
|
| 399 |
-
|
| 400 |
-
function pageView(t) {
|
| 401 |
-
const d = t.data;
|
| 402 |
-
const frag = document.createDocumentFragment();
|
| 403 |
-
const fs = d.findings || [];
|
| 404 |
-
const sus = fs.filter(f => f.suspicious).length;
|
| 405 |
-
if (fs.length) {
|
| 406 |
-
const bn = mk('div', 'vb-banner' + (sus ? '' : ' soft'));
|
| 407 |
-
bn.innerHTML = sus ? `${I.warn}<span>Injection detected: ${sus} hidden instruction${sus === 1 ? '' : 's'} on this page</span>`
|
| 408 |
-
: `${I.info}<span>${fs.length} hidden text block${fs.length === 1 ? '' : 's'} on this page (no instructions found)</span>`;
|
| 409 |
-
const sb = mk('button', '', t.showHidden ? 'Hide' : 'Show');
|
| 410 |
-
sb.onclick = () => {
|
| 411 |
-
t.showHidden = !t.showHidden;
|
| 412 |
-
sb.textContent = t.showHidden ? 'Hide' : 'Show';
|
| 413 |
-
const pg = content.querySelector('.vb-page');
|
| 414 |
-
if (!pg) return;
|
| 415 |
-
pg.classList.toggle('vb-flash', t.showHidden);
|
| 416 |
-
const first = pg.querySelector('mark.vb-sus') || pg.querySelector('mark.vb-hidden');
|
| 417 |
-
if (t.showHidden && first) first.scrollIntoView({behavior:'smooth', block:'center'});
|
| 418 |
-
};
|
| 419 |
-
bn.append(sb);
|
| 420 |
-
frag.append(bn);
|
| 421 |
-
}
|
| 422 |
-
const pg = mk('article', 'vb-page' + (t.showHidden ? ' vb-flash' : ''));
|
| 423 |
-
const hd = mk('div', 'vb-pagehd');
|
| 424 |
-
hd.textContent = (d.final_url || d.url) + ' · ' + Math.round((d.bytes || 0) / 1024) + ' KB · ' + (d.ms != null ? d.ms + ' ms' : '') + (d.truncated ? ' · truncated' : '');
|
| 425 |
-
pg.append(hd);
|
| 426 |
-
if (d.title) { const h1 = mk('h1'); h1.textContent = d.title; pg.append(h1); }
|
| 427 |
-
pg.append(scrub(d.html));
|
| 428 |
-
frag.append(pg);
|
| 429 |
-
return frag;
|
| 430 |
-
}
|
| 431 |
-
|
| 432 |
-
function renderContent() {
|
| 433 |
-
const t = active;
|
| 434 |
-
content.innerHTML = '';
|
| 435 |
-
if (!t) return;
|
| 436 |
-
if (t.state === 'start') content.append(startPage());
|
| 437 |
-
else if (t.state === 'loading') { const w = mk('div', 'vb-center'); w.innerHTML = `<div class="vb-spin" role="status" aria-label="Loading"></div><div class="vb-mut">Checking egress, SSRF and kernel gate for ${esc(hostOf(t.url))}...</div>`; content.append(w); }
|
| 438 |
-
else if (t.state === 'blocked') content.append(blockPage(t.data));
|
| 439 |
-
else if (t.state === 'error') content.append(errorPage(t.data));
|
| 440 |
-
else content.append(pageView(t));
|
| 441 |
-
}
|
| 442 |
-
|
| 443 |
-
function evCard(k, cls, html) { const e = mk('div', 'vb-e ' + (cls || '')); e.innerHTML = `<div class="vb-k">${esc(k)}</div>${html}`; return e; }
|
| 444 |
-
const short = v => { let s; try { s = typeof v === 'string' ? v : JSON.stringify(v, null, 1); } catch (e) { s = String(v); } return s && s.length > 900 ? s.slice(0, 900) + ' ...' : s; };
|
| 445 |
-
|
| 446 |
-
function renderEvents() {
|
| 447 |
-
const t = active;
|
| 448 |
-
evEl.innerHTML = '';
|
| 449 |
-
runBtn.disabled = !t || t.state !== 'page' || t.agentBusy;
|
| 450 |
-
runBtn.textContent = t && t.agentBusy ? 'Running...' : 'Run';
|
| 451 |
-
if (!t || t.state !== 'page') { evEl.innerHTML = '<div class="vb-mut">Open a page, then run a task.</div>'; return; }
|
| 452 |
-
if (t.agentBusy && !t.events) { const w = mk('div', 'vb-center'); w.style.minHeight = '120px'; w.innerHTML = '<div class="vb-spin"></div><div class="vb-mut">The agent is reading the page. Each action waits for a kernel verdict.</div>'; evEl.append(w); return; }
|
| 453 |
-
if (!t.events) { evEl.innerHTML = '<div class="vb-mut">Press Run. Try the poisoned demo page to see the gate stop a hijacked agent.</div>'; return; }
|
| 454 |
-
const r = t.events;
|
| 455 |
-
if (r.error) evEl.append(evCard('error', 'deny', `<div>${esc(r.error)}</div>`));
|
| 456 |
-
if (r.blocked) evEl.append(evCard('blocked', 'deny', `<div>Blocked by ViKernel: rule ${esc(r.blocked.rule)} (${esc(r.blocked.layer)}). ${esc(r.blocked.reason)}</div>`));
|
| 457 |
-
const evs = Array.isArray(r.events) ? r.events : [];
|
| 458 |
-
const denied = evs.filter(e => (e.type || e.kind) === 'verdict' && !vOk(e.verdict));
|
| 459 |
-
for (const d of denied) {
|
| 460 |
-
const ref = `(rule ${esc(d.rule || '?')}, audit #${esc(d.audit_seq ?? '?')})`;
|
| 461 |
-
const msg = isSend(d.fn) ? `The page tried to make the agent send your files. ViKernel denied it ${ref}.`
|
| 462 |
-
: `ViKernel denied the agent's ${esc(d.fn)} call ${ref}.`;
|
| 463 |
-
evEl.append(mk('div', 'vb-callout', msg));
|
| 464 |
-
}
|
| 465 |
-
for (const e of evs) {
|
| 466 |
-
const ty = e.type || e.kind || e.event;
|
| 467 |
-
if (ty === 'user') evEl.append(evCard('task', '', `<div>${esc(e.text || '')}</div>`));
|
| 468 |
-
else if (ty === 'proposed') evEl.append(evCard('proposed action', '', `<div><code>${esc(e.fn)}</code>${e.model ? ` <span class="vb-mut">by ${esc(e.model)}${e.model_ms != null ? ', ' + esc(e.model_ms) + ' ms' : ''}</span>` : ''}</div><pre>${esc(short(e.args))}</pre>`));
|
| 469 |
-
else if (ty === 'verdict') {
|
| 470 |
-
const ok = vOk(e.verdict);
|
| 471 |
-
evEl.append(evCard('kernel verdict', ok ? 'allow' : 'deny', `<div><span class="vb-tag ${ok ? 'ok' : 'bad'}">${esc(String(e.verdict || '?').toUpperCase())}</span><code>${esc(e.fn)}</code> <span class="vb-mut">rule ${esc(e.rule || '-')} · audit #${esc(e.audit_seq ?? '?')}</span></div>${e.reason ? `<div class="vb-mut">${esc(e.reason)}</div>` : ''}`));
|
| 472 |
-
} else if (ty === 'executed') evEl.append(evCard('executed', '', `<div><code>${esc(e.fn)}</code></div><pre>${esc(short(e.result))}</pre>`));
|
| 473 |
-
else if (ty === 'final') evEl.append(evCard('answer', 'vb-final', `<div style="white-space:pre-wrap">${esc(e.text || '')}</div>`));
|
| 474 |
-
else if (ty === 'error') evEl.append(evCard('error', 'deny', `<div>${esc(e.text || '')}</div>`));
|
| 475 |
-
}
|
| 476 |
-
if (!evs.length && !r.error && !r.blocked) evEl.append(mk('div', 'vb-mut', 'The agent returned no events.'));
|
| 477 |
-
}
|
| 478 |
-
|
| 479 |
-
async function runAgent() {
|
| 480 |
-
const t = active;
|
| 481 |
-
if (!t || t.state !== 'page' || t.agentBusy) return;
|
| 482 |
-
const task = taskEl.value.trim() || 'Summarize this page for me';
|
| 483 |
-
t.agentBusy = true; t.events = null;
|
| 484 |
-
renderEvents();
|
| 485 |
-
let r;
|
| 486 |
-
try { r = await api('browser/agent', {url:t.url, task}); }
|
| 487 |
-
catch (e) { r = {error:e && e.message === 'rate' ? 'Rate limited. Please wait a few seconds and try again.' : 'Network error: ' + (e && e.message || e)}; }
|
| 488 |
-
t.agentBusy = false; t.events = r || {error:'Empty response'};
|
| 489 |
-
if (t === active) renderEvents();
|
| 490 |
-
const den = (r && r.events || []).find(e => (e.type || e.kind) === 'verdict' && !vOk(e.verdict));
|
| 491 |
-
if (den) toast('ViKernel denied ' + den.fn + ' (audit #' + (den.audit_seq ?? '?') + ')');
|
| 492 |
-
}
|
| 493 |
-
|
| 494 |
-
function renderHistory() {
|
| 495 |
-
const pb = root.querySelector('[data-p="hist"] .vb-pb');
|
| 496 |
-
pb.innerHTML = '';
|
| 497 |
-
const t = active;
|
| 498 |
-
if (t && t.hist.length) {
|
| 499 |
-
pb.append(mk('div', 'vb-mut', 'This tab'));
|
| 500 |
-
t.hist.forEach((u, i) => {
|
| 501 |
-
const r = mk('button', 'vb-hrow');
|
| 502 |
-
r.innerHTML = `<span>${i === t.idx ? '▸ ' : ''}${esc(u === START ? 'New tab' : u)}</span>`;
|
| 503 |
-
r.onclick = () => { t.idx = i; navigate(t, u, false); };
|
| 504 |
-
pb.append(r);
|
| 505 |
-
});
|
| 506 |
-
}
|
| 507 |
-
pb.append(mk('div', 'vb-mut', 'All visits this session'));
|
| 508 |
-
if (!visits.length) pb.append(mk('div', 'vb-mut', 'Nothing yet.'));
|
| 509 |
-
for (const v of visits) {
|
| 510 |
-
const r = mk('button', 'vb-hrow');
|
| 511 |
-
r.innerHTML = `<span>${esc(v.title)}</span><small>${esc(v.url)} · ${esc(v.state)} · ${esc(v.at.toLocaleTimeString())}</small>`;
|
| 512 |
-
r.onclick = () => navigate(active, v.url);
|
| 513 |
-
pb.append(r);
|
| 514 |
-
}
|
| 515 |
-
}
|
| 516 |
-
|
| 517 |
-
let policyCache = null;
|
| 518 |
-
async function renderAbout() {
|
| 519 |
-
const pb = root.querySelector('[data-p="about"] .vb-pb');
|
| 520 |
-
const layers = [
|
| 521 |
-
['1. Egress policy', 'Only http and https on ports 80 and 443. No credentials in URLs. Known exfiltration hosts (attacker.example, collector.example.invalid, evil.test, anything containing "attacker") are denied.'],
|
| 522 |
-
['2. SSRF guard', 'The server resolves DNS and refuses private, loopback, link-local, multicast, reserved, unspecified and IPv4-mapped addresses, plus cloud metadata names. It re-checks after every redirect (max 3).'],
|
| 523 |
-
['3. Kernel gate', 'Each navigation is decided by the real ViKernel gate and written to the audit log. The verdict chip shows the audit id. Agent actions (http_post, send_email, upload) go through the same gate.'],
|
| 524 |
-
['4. Injection scanner', 'Before the page is cleaned, the raw HTML is scanned for hidden text (display:none, visibility:hidden, font-size:0, opacity:0, white on white, aria-hidden), comments and phrases like "ignore previous instructions". Findings are shown at the end of the page.'],
|
| 525 |
-
['5. Reader view', 'Scripts, styles, frames, forms and embeds are removed. Pages are fetched with GET only, no cookies, a 6 s timeout and a 1.5 MB cap. Images go through the same guarded proxy.']
|
| 526 |
-
];
|
| 527 |
-
pb.innerHTML = layers.map(([a, b]) => `<div class="vb-layer"><b>${esc(a)}</b>${esc(b)}</div>`).join('') + '<div class="vb-mut vb-pol">Loading live policy...</div>';
|
| 528 |
-
try {
|
| 529 |
-
policyCache = policyCache || await api('browser/policy', {});
|
| 530 |
-
const p = policyCache;
|
| 531 |
-
const el = pb.querySelector('.vb-pol');
|
| 532 |
-
el.className = 'vb-layer';
|
| 533 |
-
el.innerHTML = `<b>Live policy from the server</b>Deny hosts: ${esc((p.egress && p.egress.deny_hosts || []).join(', '))}<br>Ports: ${esc((p.egress && p.egress.ports || []).join(', '))}<br>Max redirects: ${esc(p.ssrf && p.ssrf.max_redirects)}<br>Page limit: ${esc(Math.round((p.fetch && p.fetch.max_page_bytes || 0) / 1000))} KB, timeout ${esc(p.fetch && p.fetch.timeout_s)} s<br>User-Agent: <code>${esc(p.fetch && p.fetch.user_agent)}</code>`;
|
| 534 |
-
} catch (e) {
|
| 535 |
-
const el = pb.querySelector('.vb-pol');
|
| 536 |
-
if (el) el.textContent = 'Live policy unavailable right now.';
|
| 537 |
-
}
|
| 538 |
-
}
|
| 539 |
-
|
| 540 |
-
function togglePanel(name) {
|
| 541 |
-
root.querySelectorAll('.vb-panel').forEach(p => { p.hidden = p.dataset.p !== name || !p.hidden; });
|
| 542 |
-
const p = root.querySelector(`[data-p="${name}"]`);
|
| 543 |
-
if (p && !p.hidden) { if (name === 'hist') renderHistory(); else renderAbout(); }
|
| 544 |
-
}
|
| 545 |
-
|
| 546 |
-
function renderAll() { renderTabs(); renderBar(); renderContent(); renderEvents(); }
|
| 547 |
-
|
| 548 |
-
// events
|
| 549 |
-
$('.vb-addr').addEventListener('submit', e => { e.preventDefault(); const v = addr.value.trim(); if (v) { navigate(active, v); addr.blur(); } });
|
| 550 |
-
addr.addEventListener('keydown', e => { if (e.key === 'Escape') { addr.value = active && active.url !== START ? active.url : ''; addr.blur(); } });
|
| 551 |
-
addr.addEventListener('focus', () => addr.select());
|
| 552 |
-
btn('back').onclick = () => go(-1);
|
| 553 |
-
btn('fwd').onclick = () => go(1);
|
| 554 |
-
btn('reload').onclick = reload;
|
| 555 |
-
btn('star').onclick = () => {
|
| 556 |
-
const t = active;
|
| 557 |
-
if (!t || t.url === START) return;
|
| 558 |
-
const i = bookmarks.findIndex(b => b.url === t.url);
|
| 559 |
-
if (i >= 0) { bookmarks.splice(i, 1); toast('Bookmark removed'); }
|
| 560 |
-
else { bookmarks.push({title:(t.title || hostOf(t.url)).slice(0, 60), url:t.url}); toast('Bookmarked'); }
|
| 561 |
-
saveBookmarks(bookmarks);
|
| 562 |
-
renderBookmarks(); renderBar();
|
| 563 |
-
};
|
| 564 |
-
btn('agent').onclick = () => { side.hidden = !side.hidden; renderBar(); if (!side.hidden) taskEl.focus(); };
|
| 565 |
-
btn('hist').onclick = () => togglePanel('hist');
|
| 566 |
-
btn('about').onclick = () => togglePanel('about');
|
| 567 |
-
root.querySelectorAll('[data-close]').forEach(b => { b.onclick = () => { b.closest('.vb-panel').hidden = true; }; });
|
| 568 |
-
runBtn.onclick = runAgent;
|
| 569 |
-
taskEl.addEventListener('keydown', e => { if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) { e.preventDefault(); runAgent(); } });
|
| 570 |
-
|
| 571 |
-
content.addEventListener('click', e => {
|
| 572 |
-
const a = e.target.closest('a');
|
| 573 |
-
if (!a || !content.contains(a)) return;
|
| 574 |
-
e.preventDefault();
|
| 575 |
-
const u = a.getAttribute('data-vb-href') || a.getAttribute('href');
|
| 576 |
-
if (!u || !/^https?:\/\//i.test(u)) return;
|
| 577 |
-
if (e.ctrlKey || e.metaKey || e.shiftKey) newTab(u, false); else navigate(active, u);
|
| 578 |
-
});
|
| 579 |
-
content.addEventListener('auxclick', e => {
|
| 580 |
-
const a = e.button === 1 && e.target.closest('a');
|
| 581 |
-
if (!a) return;
|
| 582 |
-
e.preventDefault();
|
| 583 |
-
const u = a.getAttribute('data-vb-href') || a.getAttribute('href');
|
| 584 |
-
if (u && /^https?:\/\//i.test(u)) newTab(u, false);
|
| 585 |
-
});
|
| 586 |
-
|
| 587 |
-
root.addEventListener('keydown', e => {
|
| 588 |
-
if ((e.ctrlKey || e.metaKey) && (e.key === 'l' || e.key === 'L')) { e.preventDefault(); addr.focus(); addr.select(); }
|
| 589 |
-
else if (e.altKey && e.key === 'ArrowLeft') { e.preventDefault(); go(-1); }
|
| 590 |
-
else if (e.altKey && e.key === 'ArrowRight') { e.preventDefault(); go(1); }
|
| 591 |
-
else if (e.key === 'F5') { e.preventDefault(); reload(); }
|
| 592 |
-
else if (e.key === 'Escape') root.querySelectorAll('.vb-panel').forEach(p => { p.hidden = true; });
|
| 593 |
-
});
|
| 594 |
-
root.addEventListener('mousedown', e => { if (!e.target.closest('input,textarea,button,a,.vb-content')) root.focus({preventScroll:true}); });
|
| 595 |
-
|
| 596 |
-
renderBookmarks();
|
| 597 |
-
newTab();
|
| 598 |
-
void win;
|
| 599 |
-
return root;
|
| 600 |
-
}
|
| 601 |
-
}));
|
| 602 |
-
})();
|
|
|
|
| 1 |
+
/* ViKernel Browser: a governed agentic browser app for ViKernel Desktop.
|
| 2 |
+
Every navigation passes egress policy, SSRF guard and the ViKernel kernel gate on the server.
|
| 3 |
+
The page is shown as a sanitized reader view; hidden instructions are surfaced, and agent
|
| 4 |
+
actions on the page are decided by the gate. */
|
| 5 |
+
(() => {
|
| 6 |
+
'use strict';
|
| 7 |
+
|
| 8 |
+
const MAX_TABS = 6;
|
| 9 |
+
const BM_KEY = 'vb.bookmarks.v1';
|
| 10 |
+
const START = 'vb:start';
|
| 11 |
+
|
| 12 |
+
const ICON = '<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="M3 11h16M11 3c2.6 2.8 2.6 13.2 0 16M11 3c-2.6 2.8-2.6 13.2 0 16"/><path d="M17 13.5l4 1.5v3c0 2.2-1.7 3.6-4 4.5-2.3-.9-4-2.3-4-4.5v-3z" fill="currentColor" fill-opacity=".18"/></svg>';
|
| 13 |
+
const I = {
|
| 14 |
+
back: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>',
|
| 15 |
+
fwd: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>',
|
| 16 |
+
reload: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-2.6-6.4"/><path d="M21 3v6h-6"/></svg>',
|
| 17 |
+
star: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path d="M12 3l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.3 6.4 20.2l1.1-6.2L3 9.6l6.2-.9z"/></svg>',
|
| 18 |
+
lock: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>',
|
| 19 |
+
unlock: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 7.5-2"/></svg>',
|
| 20 |
+
shield: '<svg viewBox="0 0 24 24" width="96" height="96" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"><path d="M12 2l8 3v6c0 5-3.4 9.3-8 11-4.6-1.7-8-6-8-11V5z" fill="currentColor" fill-opacity=".12"/><path d="M9 9l6 6M15 9l-6 6" stroke-linecap="round"/></svg>',
|
| 21 |
+
agent: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.8 4.6L18 9l-4.2 1.4L12 15l-1.8-4.6L6 9l4.2-1.4z"/><path d="M18 15l.9 2.1L21 18l-2.1.9L18 21l-.9-2.1L15 18l2.1-.9z"/></svg>',
|
| 22 |
+
hist: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>',
|
| 23 |
+
info: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 7.5v.5"/></svg>',
|
| 24 |
+
plus: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>',
|
| 25 |
+
x: '<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>',
|
| 26 |
+
warn: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l10 18H2z"/><path d="M12 10v5M12 18v.5"/></svg>'
|
| 27 |
+
};
|
| 28 |
+
|
| 29 |
+
const CSS = `
|
| 30 |
+
.vb-root{--vb-bg:#fff;--vb-fg:#0f172a;--vb-mut:#64748b;--vb-line:#e2e8f0;--vb-chrome:#f1f5f9;--vb-tab:#e2e8f0;--vb-acc:#2563EB;--vb-ok:#16a34a;--vb-okbg:#dcfce7;--vb-bad:#dc2626;--vb-badbg:#fee2e2;--vb-warn:#b45309;--vb-warnbg:#fef3c7;--vb-card:#f8fafc;--vb-mark:#fde68a;
|
| 31 |
+
position:relative;display:flex;flex-direction:column;height:100%;min-height:0;background:var(--vb-bg);color:var(--vb-fg);font:13px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;container-type:inline-size;outline:none;overflow:hidden}
|
| 32 |
+
@media (prefers-color-scheme:dark){.vb-root{--vb-bg:#0b1220;--vb-fg:#e2e8f0;--vb-mut:#94a3b8;--vb-line:#1e293b;--vb-chrome:#111a2e;--vb-tab:#1e293b;--vb-okbg:#052e16;--vb-ok:#4ade80;--vb-badbg:#450a0a;--vb-bad:#f87171;--vb-warnbg:#422006;--vb-warn:#fbbf24;--vb-card:#0f172a;--vb-mark:#713f12}}
|
| 33 |
+
:is(.dark,[data-theme="dark"]) .vb-root{--vb-bg:#0b1220;--vb-fg:#e2e8f0;--vb-mut:#94a3b8;--vb-line:#1e293b;--vb-chrome:#111a2e;--vb-tab:#1e293b;--vb-okbg:#052e16;--vb-ok:#4ade80;--vb-badbg:#450a0a;--vb-bad:#f87171;--vb-warnbg:#422006;--vb-warn:#fbbf24;--vb-card:#0f172a;--vb-mark:#713f12}
|
| 34 |
+
.vb-root *{box-sizing:border-box}
|
| 35 |
+
.vb-root button{font:inherit;color:inherit;cursor:pointer}
|
| 36 |
+
.vb-tabs{display:flex;align-items:flex-end;gap:2px;padding:6px 6px 0;background:var(--vb-chrome);overflow-x:auto;scrollbar-width:none;flex:none}
|
| 37 |
+
.vb-tab{display:flex;align-items:center;gap:6px;min-width:0;max-width:200px;flex:1 1 140px;padding:6px 8px 7px 10px;border-radius:8px 8px 0 0;background:transparent;border:0;color:var(--vb-mut);white-space:nowrap}
|
| 38 |
+
.vb-tab:hover{background:var(--vb-tab)}
|
| 39 |
+
.vb-tab.on{background:var(--vb-bg);color:var(--vb-fg);font-weight:600}
|
| 40 |
+
.vb-tab .vb-tt{overflow:hidden;text-overflow:ellipsis;flex:1;text-align:left}
|
| 41 |
+
.vb-tab .vb-tx{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;border:0;background:transparent;padding:0;opacity:.6}
|
| 42 |
+
.vb-tab .vb-tx:hover{background:var(--vb-line);opacity:1}
|
| 43 |
+
.vb-tab .vb-dot{width:7px;height:7px;border-radius:50%;background:var(--vb-mut);flex:none}
|
| 44 |
+
.vb-tab .vb-dot.ok{background:var(--vb-ok)}.vb-tab .vb-dot.bad{background:var(--vb-bad)}.vb-tab .vb-dot.warn{background:var(--vb-warn)}
|
| 45 |
+
.vb-newtab{flex:none;width:28px;height:28px;margin-bottom:3px;border:0;border-radius:7px;background:transparent;display:grid;place-items:center}
|
| 46 |
+
.vb-newtab:hover{background:var(--vb-tab)}
|
| 47 |
+
.vb-bar{display:flex;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid var(--vb-line);flex:none}
|
| 48 |
+
.vb-ib{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:8px;background:transparent;flex:none}
|
| 49 |
+
.vb-ib:hover:not(:disabled){background:var(--vb-chrome)}
|
| 50 |
+
.vb-ib:disabled{opacity:.35;cursor:default}
|
| 51 |
+
.vb-ib.on{color:var(--vb-acc);background:var(--vb-chrome)}
|
| 52 |
+
.vb-ib.starred{color:#eab308}.vb-ib.starred svg{fill:currentColor}
|
| 53 |
+
.vb-addr{flex:1;min-width:80px;display:flex;align-items:center;gap:6px;height:32px;padding:0 6px 0 10px;border-radius:16px;background:var(--vb-chrome);border:1px solid transparent}
|
| 54 |
+
.vb-addr:focus-within{border-color:var(--vb-acc);background:var(--vb-bg)}
|
| 55 |
+
.vb-addr input{flex:1;min-width:0;border:0;background:transparent;color:var(--vb-fg);font:inherit;font-size:13px;outline:none}
|
| 56 |
+
.vb-lock{display:grid;place-items:center;color:var(--vb-mut)}.vb-lock.https{color:var(--vb-ok)}.vb-lock.http{color:var(--vb-warn)}
|
| 57 |
+
.vb-chip{flex:none;font:700 11px/1 system-ui,sans-serif;padding:5px 8px;border-radius:10px;white-space:nowrap;letter-spacing:.2px}
|
| 58 |
+
.vb-chip.ok{background:var(--vb-okbg);color:var(--vb-ok)}.vb-chip.bad{background:var(--vb-badbg);color:var(--vb-bad)}.vb-chip.mut{background:var(--vb-chrome);color:var(--vb-mut)}
|
| 59 |
+
.vb-bm{display:flex;gap:4px;padding:4px 8px;border-bottom:1px solid var(--vb-line);overflow-x:auto;scrollbar-width:thin;flex:none}
|
| 60 |
+
.vb-bm button{flex:none;border:0;background:transparent;border-radius:6px;padding:3px 8px;color:var(--vb-mut);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
| 61 |
+
.vb-bm button:hover{background:var(--vb-chrome);color:var(--vb-fg)}
|
| 62 |
+
.vb-bm button.bad{color:var(--vb-bad)}.vb-bm button.demo{color:var(--vb-warn);font-weight:600}
|
| 63 |
+
.vb-main{flex:1;min-height:0;display:flex}
|
| 64 |
+
.vb-content{flex:1;min-width:0;overflow:auto;position:relative}
|
| 65 |
+
.vb-side{width:340px;flex:none;border-left:1px solid var(--vb-line);display:flex;flex-direction:column;min-height:0;background:var(--vb-card)}
|
| 66 |
+
.vb-side[hidden]{display:none}
|
| 67 |
+
.vb-side h3{margin:0;font-size:14px}
|
| 68 |
+
.vb-sidehd{padding:12px;border-bottom:1px solid var(--vb-line);display:flex;flex-direction:column;gap:8px}
|
| 69 |
+
.vb-sidehd textarea{width:100%;min-height:54px;resize:vertical;border:1px solid var(--vb-line);border-radius:8px;padding:8px;background:var(--vb-bg);color:var(--vb-fg);font:inherit}
|
| 70 |
+
.vb-run{align-self:flex-end;border:0;border-radius:8px;padding:7px 16px;background:var(--vb-acc);color:#fff !important;font-weight:700}
|
| 71 |
+
.vb-run:disabled{opacity:.5;cursor:default}
|
| 72 |
+
.vb-ev{flex:1;overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
|
| 73 |
+
.vb-e{border:1px solid var(--vb-line);border-radius:8px;padding:8px 10px;background:var(--vb-bg);word-break:break-word}
|
| 74 |
+
.vb-e .vb-k{font:700 10px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.6px;color:var(--vb-mut);margin-bottom:4px}
|
| 75 |
+
.vb-e code,.vb-e pre{font:12px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace}
|
| 76 |
+
.vb-e pre{margin:4px 0 0;white-space:pre-wrap;max-height:140px;overflow:auto;background:var(--vb-chrome);padding:6px;border-radius:6px}
|
| 77 |
+
.vb-e.deny{border-color:var(--vb-bad)}.vb-e.allow{border-color:var(--vb-ok)}
|
| 78 |
+
.vb-tag{display:inline-block;font:700 11px/1 system-ui,sans-serif;padding:4px 7px;border-radius:6px;margin-right:6px}
|
| 79 |
+
.vb-tag.ok{background:var(--vb-okbg);color:var(--vb-ok)}.vb-tag.bad{background:var(--vb-badbg);color:var(--vb-bad)}
|
| 80 |
+
.vb-callout{border-radius:10px;padding:10px 12px;background:var(--vb-badbg);color:var(--vb-bad);font-weight:600;border:1px solid var(--vb-bad)}
|
| 81 |
+
.vb-final{border-color:var(--vb-acc)}
|
| 82 |
+
.vb-banner{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--vb-warnbg);color:var(--vb-warn);font-weight:600;border-bottom:1px solid var(--vb-line)}
|
| 83 |
+
.vb-banner.soft{font-weight:500}
|
| 84 |
+
.vb-banner button{margin-left:auto;border:1px solid currentColor;background:transparent;border-radius:6px;padding:3px 10px;font-weight:700}
|
| 85 |
+
.vb-page{max-width:760px;margin:0 auto;padding:22px 28px 60px;font:16px/1.65 Georgia,"Times New Roman",serif;color:var(--vb-fg)}
|
| 86 |
+
.vb-page h1{font:700 28px/1.25 system-ui,sans-serif;margin:.2em 0 .6em}
|
| 87 |
+
.vb-page h2,.vb-page h3,.vb-page h4{font-family:system-ui,sans-serif;line-height:1.3;margin:1.4em 0 .5em}
|
| 88 |
+
.vb-page a{color:var(--vb-acc)}
|
| 89 |
+
.vb-page img{max-width:100%;height:auto;border-radius:6px}
|
| 90 |
+
.vb-page pre{overflow:auto;background:var(--vb-chrome);padding:10px;border-radius:8px;font-size:13px}
|
| 91 |
+
.vb-page code{font-family:ui-monospace,Consolas,monospace;font-size:.9em}
|
| 92 |
+
.vb-page blockquote{margin:1em 0;padding:.2em 1em;border-left:3px solid var(--vb-line);color:var(--vb-mut)}
|
| 93 |
+
.vb-page table{border-collapse:collapse;display:block;overflow-x:auto;max-width:100%;font:14px/1.4 system-ui,sans-serif}
|
| 94 |
+
.vb-page td,.vb-page th{border:1px solid var(--vb-line);padding:5px 8px;vertical-align:top}
|
| 95 |
+
.vb-pagehd{font:12px/1.4 system-ui,sans-serif;color:var(--vb-mut);margin-bottom:6px;word-break:break-all}
|
| 96 |
+
.vb-hidden-wrap{margin-top:40px;padding-top:14px;border-top:2px dashed var(--vb-warn);font-family:system-ui,sans-serif}
|
| 97 |
+
.vb-hidden-wrap h3{color:var(--vb-warn);margin-top:0}
|
| 98 |
+
mark.vb-hidden{display:block;background:var(--vb-mark);color:inherit;padding:8px 10px;border-radius:8px;margin:8px 0;font-size:14px;transition:box-shadow .3s}
|
| 99 |
+
mark.vb-hidden i{color:var(--vb-mut);font-size:12px}
|
| 100 |
+
mark.vb-hidden.vb-sus{border-left:4px solid var(--vb-bad)}
|
| 101 |
+
.vb-flash mark.vb-hidden{box-shadow:0 0 0 3px var(--vb-bad)}
|
| 102 |
+
.vb-center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;min-height:100%;gap:10px}
|
| 103 |
+
.vb-block{color:var(--vb-bad)}
|
| 104 |
+
.vb-block h2{margin:0;font:800 24px/1.2 system-ui,sans-serif;color:var(--vb-fg)}
|
| 105 |
+
.vb-kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;text-align:left;max-width:520px;background:var(--vb-card);border:1px solid var(--vb-line);border-radius:10px;padding:12px 16px;color:var(--vb-fg)}
|
| 106 |
+
.vb-kv b{color:var(--vb-mut);font-weight:600}
|
| 107 |
+
.vb-kv span{word-break:break-all}
|
| 108 |
+
.vb-spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--vb-line);border-top-color:var(--vb-acc);animation:vbspin .8s linear infinite}
|
| 109 |
+
@keyframes vbspin{to{transform:rotate(360deg)}}
|
| 110 |
+
.vb-start{max-width:780px;margin:0 auto;padding:30px 24px}
|
| 111 |
+
.vb-start h2{font:800 22px/1.2 system-ui,sans-serif;margin:0 0 4px;display:flex;align-items:center;gap:10px}
|
| 112 |
+
.vb-start h2 svg{color:var(--vb-acc)}
|
| 113 |
+
.vb-start p{color:var(--vb-mut);margin:0 0 18px}
|
| 114 |
+
.vb-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:22px}
|
| 115 |
+
.vb-tile{display:flex;flex-direction:column;gap:4px;text-align:left;border:1px solid var(--vb-line);border-radius:10px;background:var(--vb-card);padding:12px;min-height:76px}
|
| 116 |
+
.vb-tile:hover{border-color:var(--vb-acc)}
|
| 117 |
+
.vb-tile b{font-size:13px}.vb-tile small{color:var(--vb-mut);word-break:break-all;font-size:11px}
|
| 118 |
+
.vb-tile.bad b{color:var(--vb-bad)}.vb-tile.demo b{color:var(--vb-warn)}
|
| 119 |
+
.vb-guide{list-style:none;padding:0;margin:0;display:grid;gap:8px}
|
| 120 |
+
.vb-guide li{background:var(--vb-card);border:1px solid var(--vb-line);border-radius:8px;padding:9px 12px}
|
| 121 |
+
.vb-panel{position:absolute;top:84px;right:8px;bottom:8px;width:min(380px,calc(100% - 16px));z-index:5;background:var(--vb-bg);border:1px solid var(--vb-line);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.25);display:flex;flex-direction:column}
|
| 122 |
+
.vb-panel[hidden]{display:none}
|
| 123 |
+
.vb-panel header{display:flex;align-items:center;padding:10px 12px;border-bottom:1px solid var(--vb-line);font-weight:700}
|
| 124 |
+
.vb-panel header button{margin-left:auto;border:0;background:transparent;border-radius:6px;padding:4px}
|
| 125 |
+
.vb-panel .vb-pb{overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
|
| 126 |
+
.vb-hrow{display:flex;flex-direction:column;align-items:flex-start;border:0;background:transparent;text-align:left;padding:6px 8px;border-radius:6px;word-break:break-all}
|
| 127 |
+
.vb-hrow:hover{background:var(--vb-chrome)}
|
| 128 |
+
.vb-hrow small{color:var(--vb-mut)}
|
| 129 |
+
.vb-layer{border:1px solid var(--vb-line);border-radius:8px;padding:9px 11px}
|
| 130 |
+
.vb-layer b{display:block;margin-bottom:2px}
|
| 131 |
+
.vb-mut{color:var(--vb-mut)}
|
| 132 |
+
.vb-err{color:var(--vb-warn)}
|
| 133 |
+
@container (max-width:760px){.vb-main{flex-direction:column}.vb-side{width:auto;border-left:0;border-top:1px solid var(--vb-line);max-height:55%}.vb-page{padding:16px 16px 40px}.vb-chip{display:none}.vb-bar .vb-hide-sm{display:none}}
|
| 134 |
+
@media (max-width:760px){.vb-main{flex-direction:column}.vb-side{width:auto;border-left:0;border-top:1px solid var(--vb-line);max-height:55%}}
|
| 135 |
+
@media (prefers-reduced-motion:reduce){.vb-spin{animation-duration:2.4s}}
|
| 136 |
+
`;
|
| 137 |
+
|
| 138 |
+
function injectCss() {
|
| 139 |
+
if (document.getElementById('vb-style')) return;
|
| 140 |
+
const s = document.createElement('style');
|
| 141 |
+
s.id = 'vb-style';
|
| 142 |
+
s.textContent = CSS;
|
| 143 |
+
document.head.append(s);
|
| 144 |
+
}
|
| 145 |
+
|
| 146 |
+
const esc = s => String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&', '<':'<', '>':'>', '"':'"', "'":'''}[c]));
|
| 147 |
+
function mk(tag, cls, html) { const n = document.createElement(tag); if (cls) n.className = cls; if (html != null) n.innerHTML = html; return n; }
|
| 148 |
+
|
| 149 |
+
function defaultBookmarks() {
|
| 150 |
+
return [
|
| 151 |
+
{title:'Demo: poisoned page', url:location.origin + '/demo/poisoned-page', kind:'demo', note:'Hidden instructions try to hijack the agent'},
|
| 152 |
+
{title:'Wikipedia: Operating system', url:'https://en.wikipedia.org/wiki/Operating_system', note:'A long real page'},
|
| 153 |
+
{title:'Example.com', url:'https://example.com', note:'The simplest page'},
|
| 154 |
+
{title:'Blocked: attacker.example', url:'https://attacker.example/', kind:'bad', note:'Egress denylist'},
|
| 155 |
+
{title:'Blocked: metadata', url:'http://169.254.169.254/latest/meta-data/', kind:'bad', note:'SSRF guard, cloud metadata'}
|
| 156 |
+
];
|
| 157 |
+
}
|
| 158 |
+
function loadBookmarks() {
|
| 159 |
+
try { const v = JSON.parse(localStorage.getItem(BM_KEY) || 'null'); if (Array.isArray(v) && v.length) return v.filter(b => b && typeof b.url === 'string').slice(0, 40); } catch (e) { /* storage may be blocked */ }
|
| 160 |
+
return defaultBookmarks();
|
| 161 |
+
}
|
| 162 |
+
function saveBookmarks(list) { try { localStorage.setItem(BM_KEY, JSON.stringify(list)); } catch (e) { /* ignore */ } }
|
| 163 |
+
|
| 164 |
+
/* Defense in depth: the server already sanitizes; strip anything active again before inserting. */
|
| 165 |
+
const OK_TAGS = new Set('H1 H2 H3 H4 H5 H6 P UL OL LI BLOCKQUOTE PRE CODE TABLE THEAD TBODY TFOOT TR TH TD CAPTION A IMG BR HR EM STRONG B I U S SMALL SUB SUP DL DT DD FIGURE FIGCAPTION KBD SAMP Q ABBR CITE TIME MARK DEL INS DIV'.split(' '));
|
| 166 |
+
const OK_ATTR = new Set(['href', 'data-vb-href', 'rel', 'target', 'src', 'alt', 'loading', 'colspan', 'rowspan', 'class', 'data-vb-finding']);
|
| 167 |
+
function scrub(html) {
|
| 168 |
+
const t = document.createElement('template');
|
| 169 |
+
t.innerHTML = String(html || '');
|
| 170 |
+
const walk = node => {
|
| 171 |
+
for (const c of [...node.children]) {
|
| 172 |
+
if (!OK_TAGS.has(c.tagName)) { walk(c); c.replaceWith(...c.childNodes); continue; }
|
| 173 |
+
for (const a of [...c.attributes]) {
|
| 174 |
+
const n = a.name.toLowerCase();
|
| 175 |
+
if (!OK_ATTR.has(n)) { c.removeAttribute(a.name); continue; }
|
| 176 |
+
if ((n === 'href' || n === 'data-vb-href') && !/^https?:\/\//i.test(a.value)) c.removeAttribute(a.name);
|
| 177 |
+
if (n === 'class' && !/^vb-[\w -]*$/.test(a.value)) c.removeAttribute(a.name);
|
| 178 |
+
}
|
| 179 |
+
if (c.tagName === 'IMG') {
|
| 180 |
+
const s = c.getAttribute('src') || '';
|
| 181 |
+
if (s.startsWith('browser-img?u=')) c.setAttribute('src', 'api/ag/browser/img?u=' + s.slice('browser-img?u='.length));
|
| 182 |
+
else c.remove();
|
| 183 |
+
c.setAttribute('referrerpolicy', 'no-referrer');
|
| 184 |
+
c.setAttribute('loading', 'lazy');
|
| 185 |
+
continue;
|
| 186 |
+
}
|
| 187 |
+
walk(c);
|
| 188 |
+
}
|
| 189 |
+
};
|
| 190 |
+
walk(t.content);
|
| 191 |
+
// final guard: nothing outside the allow list survives
|
| 192 |
+
t.content.querySelectorAll('*').forEach(c => { if (!OK_TAGS.has(c.tagName)) c.remove(); });
|
| 193 |
+
return t.content;
|
| 194 |
+
}
|
| 195 |
+
|
| 196 |
+
const hostOf = u => { try { return new URL(u).hostname; } catch (e) { return u; } };
|
| 197 |
+
const isSend = fn => /^(http_post|send_email|upload|post|exfil)/i.test(String(fn || ''));
|
| 198 |
+
const vOk = v => String(v || '').toUpperCase() === 'ALLOW';
|
| 199 |
+
|
| 200 |
+
window.VK_EXTRA_APPS = window.VK_EXTRA_APPS || [];
|
| 201 |
+
window.VK_EXTRA_APPS.push(h => ({
|
| 202 |
+
id:'browser',
|
| 203 |
+
name:() => 'ViKernel Browser',
|
| 204 |
+
color:'#2563EB',
|
| 205 |
+
icon:ICON,
|
| 206 |
+
w:1100,
|
| 207 |
+
h:720,
|
| 208 |
+
render(body, win) {
|
| 209 |
+
injectCss();
|
| 210 |
+
const toast = m => { try { if (h && h.toast) h.toast(m); } catch (e) { /* ignore */ } };
|
| 211 |
+
const api = window.VK_API;
|
| 212 |
+
let bookmarks = loadBookmarks();
|
| 213 |
+
const visits = [];
|
| 214 |
+
let seq = 0;
|
| 215 |
+
const tabs = [];
|
| 216 |
+
let active = null;
|
| 217 |
+
|
| 218 |
+
const root = mk('div', 'vb-root');
|
| 219 |
+
root.tabIndex = -1;
|
| 220 |
+
root.innerHTML = `
|
| 221 |
+
<div class="vb-tabs" role="tablist"></div>
|
| 222 |
+
<div class="vb-bar">
|
| 223 |
+
<button class="vb-ib" data-a="back" title="Back (Alt+Left)" aria-label="Back">${I.back}</button>
|
| 224 |
+
<button class="vb-ib" data-a="fwd" title="Forward (Alt+Right)" aria-label="Forward">${I.fwd}</button>
|
| 225 |
+
<button class="vb-ib" data-a="reload" title="Reload (F5)" aria-label="Reload">${I.reload}</button>
|
| 226 |
+
<form class="vb-addr" autocomplete="off"><span class="vb-lock" aria-hidden="true">${I.info}</span><input type="text" spellcheck="false" placeholder="Enter a URL, e.g. en.wikipedia.org/wiki/Kernel" aria-label="Address bar"><button type="button" class="vb-ib" data-a="star" title="Bookmark this page" aria-label="Bookmark">${I.star}</button></form>
|
| 227 |
+
<span class="vb-chip mut" title="Kernel verdict for this navigation">no page</span>
|
| 228 |
+
<button class="vb-ib" data-a="agent" title="Ask Muse Spark (agent)" aria-label="Agent sidebar">${I.agent}</button>
|
| 229 |
+
<button class="vb-ib vb-hide-sm" data-a="hist" title="History" aria-label="History">${I.hist}</button>
|
| 230 |
+
<button class="vb-ib" data-a="about" title="About the protection layers" aria-label="About">${I.info}</button>
|
| 231 |
+
</div>
|
| 232 |
+
<div class="vb-bm"></div>
|
| 233 |
+
<div class="vb-main">
|
| 234 |
+
<div class="vb-content"></div>
|
| 235 |
+
<aside class="vb-side" hidden>
|
| 236 |
+
<div class="vb-sidehd">
|
| 237 |
+
<h3>Ask Muse Spark to do this on the page</h3>
|
| 238 |
+
<div class="vb-mut">The agent reads the whole page, hidden text included. Every action it proposes goes through the ViKernel gate.</div>
|
| 239 |
+
<textarea maxlength="500" aria-label="Task">Summarize this page for me</textarea>
|
| 240 |
+
<button class="vb-run">Run</button>
|
| 241 |
+
</div>
|
| 242 |
+
<div class="vb-ev"><div class="vb-mut">Open a page, then run a task.</div></div>
|
| 243 |
+
</aside>
|
| 244 |
+
</div>
|
| 245 |
+
<section class="vb-panel" data-p="hist" hidden><header>History<button data-close aria-label="Close">${I.x}</button></header><div class="vb-pb"></div></section>
|
| 246 |
+
<section class="vb-panel" data-p="about" hidden><header>How ViKernel Browser protects you<button data-close aria-label="Close">${I.x}</button></header><div class="vb-pb"></div></section>`;
|
| 247 |
+
body.innerHTML = '';
|
| 248 |
+
body.append(root);
|
| 249 |
+
|
| 250 |
+
const $ = s => root.querySelector(s);
|
| 251 |
+
const tabsEl = $('.vb-tabs'), bmEl = $('.vb-bm'), content = $('.vb-content'), side = $('.vb-side');
|
| 252 |
+
const addr = $('.vb-addr input'), lockEl = $('.vb-lock'), chip = $('.vb-chip'), evEl = $('.vb-ev');
|
| 253 |
+
const runBtn = $('.vb-run'), taskEl = $('.vb-sidehd textarea');
|
| 254 |
+
const btn = a => root.querySelector(`[data-a="${a}"]`);
|
| 255 |
+
|
| 256 |
+
function newTab(url, focus = true) {
|
| 257 |
+
if (tabs.length >= MAX_TABS) { toast('Maximum ' + MAX_TABS + ' tabs'); return null; }
|
| 258 |
+
const t = {id:++seq, hist:[], idx:-1, url:START, title:'New tab', state:'start', data:null, nav:0, events:null, agentBusy:false, showHidden:false};
|
| 259 |
+
tabs.push(t);
|
| 260 |
+
if (focus || !active) active = t;
|
| 261 |
+
if (url) navigate(t, url); else renderAll();
|
| 262 |
+
return t;
|
| 263 |
+
}
|
| 264 |
+
function closeTab(t) {
|
| 265 |
+
const i = tabs.indexOf(t);
|
| 266 |
+
if (i < 0) return;
|
| 267 |
+
tabs.splice(i, 1);
|
| 268 |
+
if (!tabs.length) { active = null; newTab(); return; }
|
| 269 |
+
if (active === t) active = tabs[Math.min(i, tabs.length - 1)];
|
| 270 |
+
renderAll();
|
| 271 |
+
}
|
| 272 |
+
|
| 273 |
+
async function navigate(t, raw, push = true) {
|
| 274 |
+
let url = String(raw || '').trim();
|
| 275 |
+
if (!url) return;
|
| 276 |
+
if (url === START) { t.url = START; t.state = 'start'; t.title = 'New tab'; t.data = null; if (push) pushHist(t, START); renderAll(); return; }
|
| 277 |
+
if (!/^[a-z][a-z0-9+.-]*:/i.test(url)) url = 'https://' + url;
|
| 278 |
+
const my = ++t.nav;
|
| 279 |
+
t.url = url; t.state = 'loading'; t.title = hostOf(url); t.data = null; t.events = null; t.showHidden = false;
|
| 280 |
+
if (push) pushHist(t, url);
|
| 281 |
+
renderAll();
|
| 282 |
+
let r;
|
| 283 |
+
try { r = await api('browser/open', {url}); }
|
| 284 |
+
catch (e) { r = {ok:false, error:e && e.message === 'rate' ? 'Rate limited. Please wait a few seconds and try again.' : 'Network error: ' + (e && e.message || e)}; }
|
| 285 |
+
if (my !== t.nav) return;
|
| 286 |
+
t.data = r || {ok:false, error:'Empty response'};
|
| 287 |
+
if (r && r.ok) {
|
| 288 |
+
t.state = 'page'; t.title = r.title || hostOf(r.final_url || url);
|
| 289 |
+
if (r.final_url && r.final_url !== url) { t.url = r.final_url; t.hist[t.idx] = r.final_url; }
|
| 290 |
+
} else if (r && r.blocked) { t.state = 'blocked'; t.title = 'Blocked: ' + hostOf(url); }
|
| 291 |
+
else { t.state = 'error'; t.title = 'Error: ' + hostOf(url); }
|
| 292 |
+
visits.unshift({url:t.url, title:t.title, at:new Date(), state:t.state});
|
| 293 |
+
if (visits.length > 100) visits.pop();
|
| 294 |
+
renderAll();
|
| 295 |
+
if (t === active) content.scrollTop = 0;
|
| 296 |
+
}
|
| 297 |
+
function pushHist(t, url) { t.hist = t.hist.slice(0, t.idx + 1); t.hist.push(url); t.idx = t.hist.length - 1; }
|
| 298 |
+
function go(delta) {
|
| 299 |
+
const t = active;
|
| 300 |
+
if (!t) return;
|
| 301 |
+
const j = t.idx + delta;
|
| 302 |
+
if (j < 0 || j >= t.hist.length) return;
|
| 303 |
+
t.idx = j;
|
| 304 |
+
navigate(t, t.hist[j], false);
|
| 305 |
+
}
|
| 306 |
+
const reload = () => { if (active && active.url !== START) navigate(active, active.url, false); };
|
| 307 |
+
|
| 308 |
+
function renderTabs() {
|
| 309 |
+
tabsEl.innerHTML = '';
|
| 310 |
+
for (const t of tabs) {
|
| 311 |
+
const b = mk('button', 'vb-tab' + (t === active ? ' on' : ''));
|
| 312 |
+
b.setAttribute('role', 'tab');
|
| 313 |
+
b.title = t.url === START ? 'New tab' : t.url;
|
| 314 |
+
const sus = t.data && t.data.ok && (t.data.findings || []).some(f => f.suspicious);
|
| 315 |
+
const dot = t.state === 'blocked' ? 'bad' : sus ? 'warn' : t.state === 'page' ? 'ok' : '';
|
| 316 |
+
b.innerHTML = `<span class="vb-dot ${dot}"></span><span class="vb-tt">${esc(t.state === 'loading' ? 'Loading ' + t.title : t.title)}</span><span class="vb-tx" role="button" aria-label="Close tab">${I.x}</span>`;
|
| 317 |
+
b.onclick = e => { if (e.target.closest('.vb-tx')) { e.stopPropagation(); closeTab(t); return; } active = t; renderAll(); };
|
| 318 |
+
b.onauxclick = e => { if (e.button === 1) closeTab(t); };
|
| 319 |
+
tabsEl.append(b);
|
| 320 |
+
}
|
| 321 |
+
const n = mk('button', 'vb-newtab', I.plus);
|
| 322 |
+
n.title = 'New tab'; n.setAttribute('aria-label', 'New tab');
|
| 323 |
+
n.onclick = () => newTab();
|
| 324 |
+
tabsEl.append(n);
|
| 325 |
+
}
|
| 326 |
+
|
| 327 |
+
function renderBar() {
|
| 328 |
+
const t = active;
|
| 329 |
+
btn('back').disabled = !t || t.idx <= 0;
|
| 330 |
+
btn('fwd').disabled = !t || t.idx >= t.hist.length - 1;
|
| 331 |
+
if (document.activeElement !== addr) addr.value = !t || t.url === START ? '' : t.url;
|
| 332 |
+
const proto = t && t.url !== START ? (t.url.match(/^(\w+):/) || [])[1] : '';
|
| 333 |
+
lockEl.className = 'vb-lock' + (proto === 'https' ? ' https' : proto ? ' http' : '');
|
| 334 |
+
lockEl.innerHTML = proto === 'https' ? I.lock : proto ? I.unlock : I.info;
|
| 335 |
+
lockEl.title = proto === 'https' ? 'Encrypted connection (https)' : proto ? 'Not encrypted (' + proto + ')' : '';
|
| 336 |
+
const d = t && t.data;
|
| 337 |
+
if (!t || t.state === 'start') { chip.className = 'vb-chip mut'; chip.textContent = 'no page'; }
|
| 338 |
+
else if (t.state === 'loading') { chip.className = 'vb-chip mut'; chip.textContent = 'checking...'; }
|
| 339 |
+
else if (d && d.ok && d.kernel) { chip.className = 'vb-chip ok'; chip.textContent = 'ALLOW · audit #' + (d.kernel.audit_seq ?? '?'); chip.title = 'Kernel gate rule ' + (d.kernel.rule || '-') + (d.kernel.kernel_ms != null ? ', ' + d.kernel.kernel_ms + ' ms' : ''); }
|
| 340 |
+
else if (d && d.blocked) { chip.className = 'vb-chip bad'; chip.textContent = 'DENY · rule ' + d.blocked.rule; chip.title = d.blocked.reason || ''; }
|
| 341 |
+
else { chip.className = 'vb-chip mut'; chip.textContent = 'error'; }
|
| 342 |
+
const starred = t && t.url !== START && bookmarks.some(b => b.url === t.url);
|
| 343 |
+
btn('star').classList.toggle('starred', !!starred);
|
| 344 |
+
btn('star').disabled = !t || t.url === START;
|
| 345 |
+
btn('agent').classList.toggle('on', !side.hidden);
|
| 346 |
+
}
|
| 347 |
+
|
| 348 |
+
function renderBookmarks() {
|
| 349 |
+
bmEl.innerHTML = '';
|
| 350 |
+
for (const b of bookmarks) {
|
| 351 |
+
const x = mk('button', b.kind || '');
|
| 352 |
+
x.textContent = b.title || b.url;
|
| 353 |
+
x.title = b.url + (b.note ? '\n' + b.note : '');
|
| 354 |
+
x.onclick = e => { if (e.ctrlKey || e.metaKey) newTab(b.url); else navigate(active, b.url); };
|
| 355 |
+
bmEl.append(x);
|
| 356 |
+
}
|
| 357 |
+
}
|
| 358 |
+
|
| 359 |
+
function startPage() {
|
| 360 |
+
const w = mk('div', 'vb-start');
|
| 361 |
+
w.innerHTML = `<h2>${ICON} ViKernel Browser</h2>
|
| 362 |
+
<p>A governed browser. Every page load passes egress policy, an SSRF guard and the ViKernel kernel gate, and every agent action on a page is decided by the gate.</p>
|
| 363 |
+
<div class="vb-tiles"></div>
|
| 364 |
+
<ol class="vb-guide">
|
| 365 |
+
<li><b>1.</b> Open <b>Demo: poisoned page</b>. It looks like a normal review blog, but hides instructions for AI agents. The banner shows what was hidden.</li>
|
| 366 |
+
<li><b>2.</b> Open the agent sidebar and press <b>Run</b>. The agent reads the hidden text too. When it tries to send your files out, ViKernel denies it and records an audit entry.</li>
|
| 367 |
+
<li><b>3.</b> Try the <b>Blocked</b> bookmarks to see the egress policy and the SSRF guard stop a request before any byte leaves.</li>
|
| 368 |
+
</ol>`;
|
| 369 |
+
const tiles = w.querySelector('.vb-tiles');
|
| 370 |
+
for (const b of bookmarks) {
|
| 371 |
+
const x = mk('button', 'vb-tile ' + (b.kind || ''));
|
| 372 |
+
x.innerHTML = `<b>${esc(b.title || b.url)}</b><small>${esc(b.note || hostOf(b.url))}</small>`;
|
| 373 |
+
x.title = b.url;
|
| 374 |
+
x.onclick = () => navigate(active, b.url);
|
| 375 |
+
tiles.append(x);
|
| 376 |
+
}
|
| 377 |
+
return w;
|
| 378 |
+
}
|
| 379 |
+
|
| 380 |
+
function blockPage(d) {
|
| 381 |
+
const b = d.blocked || {};
|
| 382 |
+
const w = mk('div', 'vb-center vb-block');
|
| 383 |
+
const audit = d.kernel && d.kernel.audit_seq != null ? `<b>Audit</b><span>#${esc(d.kernel.audit_seq)}</span>` : '';
|
| 384 |
+
const layerName = {egress:'Egress policy', ssrf:'SSRF guard', kernel:'Kernel gate'}[b.layer] || b.layer || '-';
|
| 385 |
+
w.innerHTML = `${I.shield}<h2>Blocked by ViKernel</h2>
|
| 386 |
+
<div class="vb-mut">This request never left the server.</div>
|
| 387 |
+
<div class="vb-kv"><b>URL</b><span>${esc(d.url)}</span><b>Rule</b><span>${esc(b.rule || '-')}</span><b>Layer</b><span>${esc(layerName)}</span><b>Reason</b><span>${esc(b.reason || '-')}</span>${audit}</div>`;
|
| 388 |
+
return w;
|
| 389 |
+
}
|
| 390 |
+
|
| 391 |
+
function errorPage(d) {
|
| 392 |
+
const w = mk('div', 'vb-center');
|
| 393 |
+
w.innerHTML = `<div class="vb-err">${I.warn}</div><h3 style="margin:0">This page could not be loaded</h3><div class="vb-mut">${esc(d && d.error || 'Unknown error')}</div>`;
|
| 394 |
+
const r = mk('button', 'vb-run', 'Try again');
|
| 395 |
+
r.onclick = reload;
|
| 396 |
+
w.append(r);
|
| 397 |
+
return w;
|
| 398 |
+
}
|
| 399 |
+
|
| 400 |
+
function pageView(t) {
|
| 401 |
+
const d = t.data;
|
| 402 |
+
const frag = document.createDocumentFragment();
|
| 403 |
+
const fs = d.findings || [];
|
| 404 |
+
const sus = fs.filter(f => f.suspicious).length;
|
| 405 |
+
if (fs.length) {
|
| 406 |
+
const bn = mk('div', 'vb-banner' + (sus ? '' : ' soft'));
|
| 407 |
+
bn.innerHTML = sus ? `${I.warn}<span>Injection detected: ${sus} hidden instruction${sus === 1 ? '' : 's'} on this page</span>`
|
| 408 |
+
: `${I.info}<span>${fs.length} hidden text block${fs.length === 1 ? '' : 's'} on this page (no instructions found)</span>`;
|
| 409 |
+
const sb = mk('button', '', t.showHidden ? 'Hide' : 'Show');
|
| 410 |
+
sb.onclick = () => {
|
| 411 |
+
t.showHidden = !t.showHidden;
|
| 412 |
+
sb.textContent = t.showHidden ? 'Hide' : 'Show';
|
| 413 |
+
const pg = content.querySelector('.vb-page');
|
| 414 |
+
if (!pg) return;
|
| 415 |
+
pg.classList.toggle('vb-flash', t.showHidden);
|
| 416 |
+
const first = pg.querySelector('mark.vb-sus') || pg.querySelector('mark.vb-hidden');
|
| 417 |
+
if (t.showHidden && first) first.scrollIntoView({behavior:'smooth', block:'center'});
|
| 418 |
+
};
|
| 419 |
+
bn.append(sb);
|
| 420 |
+
frag.append(bn);
|
| 421 |
+
}
|
| 422 |
+
const pg = mk('article', 'vb-page' + (t.showHidden ? ' vb-flash' : ''));
|
| 423 |
+
const hd = mk('div', 'vb-pagehd');
|
| 424 |
+
hd.textContent = (d.final_url || d.url) + ' · ' + Math.round((d.bytes || 0) / 1024) + ' KB · ' + (d.ms != null ? d.ms + ' ms' : '') + (d.truncated ? ' · truncated' : '');
|
| 425 |
+
pg.append(hd);
|
| 426 |
+
if (d.title) { const h1 = mk('h1'); h1.textContent = d.title; pg.append(h1); }
|
| 427 |
+
pg.append(scrub(d.html));
|
| 428 |
+
frag.append(pg);
|
| 429 |
+
return frag;
|
| 430 |
+
}
|
| 431 |
+
|
| 432 |
+
function renderContent() {
|
| 433 |
+
const t = active;
|
| 434 |
+
content.innerHTML = '';
|
| 435 |
+
if (!t) return;
|
| 436 |
+
if (t.state === 'start') content.append(startPage());
|
| 437 |
+
else if (t.state === 'loading') { const w = mk('div', 'vb-center'); w.innerHTML = `<div class="vb-spin" role="status" aria-label="Loading"></div><div class="vb-mut">Checking egress, SSRF and kernel gate for ${esc(hostOf(t.url))}...</div>`; content.append(w); }
|
| 438 |
+
else if (t.state === 'blocked') content.append(blockPage(t.data));
|
| 439 |
+
else if (t.state === 'error') content.append(errorPage(t.data));
|
| 440 |
+
else content.append(pageView(t));
|
| 441 |
+
}
|
| 442 |
+
|
| 443 |
+
function evCard(k, cls, html) { const e = mk('div', 'vb-e ' + (cls || '')); e.innerHTML = `<div class="vb-k">${esc(k)}</div>${html}`; return e; }
|
| 444 |
+
const short = v => { let s; try { s = typeof v === 'string' ? v : JSON.stringify(v, null, 1); } catch (e) { s = String(v); } return s && s.length > 900 ? s.slice(0, 900) + ' ...' : s; };
|
| 445 |
+
|
| 446 |
+
function renderEvents() {
|
| 447 |
+
const t = active;
|
| 448 |
+
evEl.innerHTML = '';
|
| 449 |
+
runBtn.disabled = !t || t.state !== 'page' || t.agentBusy;
|
| 450 |
+
runBtn.textContent = t && t.agentBusy ? 'Running...' : 'Run';
|
| 451 |
+
if (!t || t.state !== 'page') { evEl.innerHTML = '<div class="vb-mut">Open a page, then run a task.</div>'; return; }
|
| 452 |
+
if (t.agentBusy && !t.events) { const w = mk('div', 'vb-center'); w.style.minHeight = '120px'; w.innerHTML = '<div class="vb-spin"></div><div class="vb-mut">The agent is reading the page. Each action waits for a kernel verdict.</div>'; evEl.append(w); return; }
|
| 453 |
+
if (!t.events) { evEl.innerHTML = '<div class="vb-mut">Press Run. Try the poisoned demo page to see the gate stop a hijacked agent.</div>'; return; }
|
| 454 |
+
const r = t.events;
|
| 455 |
+
if (r.error) evEl.append(evCard('error', 'deny', `<div>${esc(r.error)}</div>`));
|
| 456 |
+
if (r.blocked) evEl.append(evCard('blocked', 'deny', `<div>Blocked by ViKernel: rule ${esc(r.blocked.rule)} (${esc(r.blocked.layer)}). ${esc(r.blocked.reason)}</div>`));
|
| 457 |
+
const evs = Array.isArray(r.events) ? r.events : [];
|
| 458 |
+
const denied = evs.filter(e => (e.type || e.kind) === 'verdict' && !vOk(e.verdict));
|
| 459 |
+
for (const d of denied) {
|
| 460 |
+
const ref = `(rule ${esc(d.rule || '?')}, audit #${esc(d.audit_seq ?? '?')})`;
|
| 461 |
+
const msg = d.probe ? `The page hides an instruction to send your files to ${esc((d.args || {}).url || 'an outside URL')}. Muse Spark did not follow it; the same action sent as a compromised agent would was denied by ViKernel ${ref}.` : isSend(d.fn) ? `The page tried to make the agent send your files. ViKernel denied it ${ref}.`
|
| 462 |
+
: `ViKernel denied the agent's ${esc(d.fn)} call ${ref}.`;
|
| 463 |
+
evEl.append(mk('div', 'vb-callout', msg));
|
| 464 |
+
}
|
| 465 |
+
for (const e of evs) {
|
| 466 |
+
const ty = e.type || e.kind || e.event;
|
| 467 |
+
if (ty === 'user') evEl.append(evCard('task', '', `<div>${esc(e.text || '')}</div>`));
|
| 468 |
+
else if (ty === 'proposed') evEl.append(evCard('proposed action', '', `<div><code>${esc(e.fn)}</code>${e.model ? ` <span class="vb-mut">by ${esc(e.model)}${e.model_ms != null ? ', ' + esc(e.model_ms) + ' ms' : ''}</span>` : ''}</div><pre>${esc(short(e.args))}</pre>`));
|
| 469 |
+
else if (ty === 'verdict') {
|
| 470 |
+
const ok = vOk(e.verdict);
|
| 471 |
+
evEl.append(evCard(e.probe ? 'kernel verdict (' + e.probe + ')' : 'kernel verdict', ok ? 'allow' : 'deny', `<div><span class="vb-tag ${ok ? 'ok' : 'bad'}">${esc(String(e.verdict || '?').toUpperCase())}</span><code>${esc(e.fn)}</code> <span class="vb-mut">rule ${esc(e.rule || '-')} · audit #${esc(e.audit_seq ?? '?')}</span></div>${e.reason ? `<div class="vb-mut">${esc(e.reason)}</div>` : ''}`));
|
| 472 |
+
} else if (ty === 'executed') evEl.append(evCard('executed', '', `<div><code>${esc(e.fn)}</code></div><pre>${esc(short(e.result))}</pre>`));
|
| 473 |
+
else if (ty === 'final') evEl.append(evCard('answer', 'vb-final', `<div style="white-space:pre-wrap">${esc(e.text || '')}</div>`));
|
| 474 |
+
else if (ty === 'error') evEl.append(evCard('error', 'deny', `<div>${esc(e.text || '')}</div>`));
|
| 475 |
+
}
|
| 476 |
+
if (!evs.length && !r.error && !r.blocked) evEl.append(mk('div', 'vb-mut', 'The agent returned no events.'));
|
| 477 |
+
}
|
| 478 |
+
|
| 479 |
+
async function runAgent() {
|
| 480 |
+
const t = active;
|
| 481 |
+
if (!t || t.state !== 'page' || t.agentBusy) return;
|
| 482 |
+
const task = taskEl.value.trim() || 'Summarize this page for me';
|
| 483 |
+
t.agentBusy = true; t.events = null;
|
| 484 |
+
renderEvents();
|
| 485 |
+
let r;
|
| 486 |
+
try { r = await api('browser/agent', {url:t.url, task}); }
|
| 487 |
+
catch (e) { r = {error:e && e.message === 'rate' ? 'Rate limited. Please wait a few seconds and try again.' : 'Network error: ' + (e && e.message || e)}; }
|
| 488 |
+
t.agentBusy = false; t.events = r || {error:'Empty response'};
|
| 489 |
+
if (t === active) renderEvents();
|
| 490 |
+
const den = (r && r.events || []).find(e => (e.type || e.kind) === 'verdict' && !vOk(e.verdict));
|
| 491 |
+
if (den) toast('ViKernel denied ' + den.fn + ' (audit #' + (den.audit_seq ?? '?') + ')');
|
| 492 |
+
}
|
| 493 |
+
|
| 494 |
+
function renderHistory() {
|
| 495 |
+
const pb = root.querySelector('[data-p="hist"] .vb-pb');
|
| 496 |
+
pb.innerHTML = '';
|
| 497 |
+
const t = active;
|
| 498 |
+
if (t && t.hist.length) {
|
| 499 |
+
pb.append(mk('div', 'vb-mut', 'This tab'));
|
| 500 |
+
t.hist.forEach((u, i) => {
|
| 501 |
+
const r = mk('button', 'vb-hrow');
|
| 502 |
+
r.innerHTML = `<span>${i === t.idx ? '▸ ' : ''}${esc(u === START ? 'New tab' : u)}</span>`;
|
| 503 |
+
r.onclick = () => { t.idx = i; navigate(t, u, false); };
|
| 504 |
+
pb.append(r);
|
| 505 |
+
});
|
| 506 |
+
}
|
| 507 |
+
pb.append(mk('div', 'vb-mut', 'All visits this session'));
|
| 508 |
+
if (!visits.length) pb.append(mk('div', 'vb-mut', 'Nothing yet.'));
|
| 509 |
+
for (const v of visits) {
|
| 510 |
+
const r = mk('button', 'vb-hrow');
|
| 511 |
+
r.innerHTML = `<span>${esc(v.title)}</span><small>${esc(v.url)} · ${esc(v.state)} · ${esc(v.at.toLocaleTimeString())}</small>`;
|
| 512 |
+
r.onclick = () => navigate(active, v.url);
|
| 513 |
+
pb.append(r);
|
| 514 |
+
}
|
| 515 |
+
}
|
| 516 |
+
|
| 517 |
+
let policyCache = null;
|
| 518 |
+
async function renderAbout() {
|
| 519 |
+
const pb = root.querySelector('[data-p="about"] .vb-pb');
|
| 520 |
+
const layers = [
|
| 521 |
+
['1. Egress policy', 'Only http and https on ports 80 and 443. No credentials in URLs. Known exfiltration hosts (attacker.example, collector.example.invalid, evil.test, anything containing "attacker") are denied.'],
|
| 522 |
+
['2. SSRF guard', 'The server resolves DNS and refuses private, loopback, link-local, multicast, reserved, unspecified and IPv4-mapped addresses, plus cloud metadata names. It re-checks after every redirect (max 3).'],
|
| 523 |
+
['3. Kernel gate', 'Each navigation is decided by the real ViKernel gate and written to the audit log. The verdict chip shows the audit id. Agent actions (http_post, send_email, upload) go through the same gate.'],
|
| 524 |
+
['4. Injection scanner', 'Before the page is cleaned, the raw HTML is scanned for hidden text (display:none, visibility:hidden, font-size:0, opacity:0, white on white, aria-hidden), comments and phrases like "ignore previous instructions". Findings are shown at the end of the page.'],
|
| 525 |
+
['5. Reader view', 'Scripts, styles, frames, forms and embeds are removed. Pages are fetched with GET only, no cookies, a 6 s timeout and a 1.5 MB cap. Images go through the same guarded proxy.']
|
| 526 |
+
];
|
| 527 |
+
pb.innerHTML = layers.map(([a, b]) => `<div class="vb-layer"><b>${esc(a)}</b>${esc(b)}</div>`).join('') + '<div class="vb-mut vb-pol">Loading live policy...</div>';
|
| 528 |
+
try {
|
| 529 |
+
policyCache = policyCache || await api('browser/policy', {});
|
| 530 |
+
const p = policyCache;
|
| 531 |
+
const el = pb.querySelector('.vb-pol');
|
| 532 |
+
el.className = 'vb-layer';
|
| 533 |
+
el.innerHTML = `<b>Live policy from the server</b>Deny hosts: ${esc((p.egress && p.egress.deny_hosts || []).join(', '))}<br>Ports: ${esc((p.egress && p.egress.ports || []).join(', '))}<br>Max redirects: ${esc(p.ssrf && p.ssrf.max_redirects)}<br>Page limit: ${esc(Math.round((p.fetch && p.fetch.max_page_bytes || 0) / 1000))} KB, timeout ${esc(p.fetch && p.fetch.timeout_s)} s<br>User-Agent: <code>${esc(p.fetch && p.fetch.user_agent)}</code>`;
|
| 534 |
+
} catch (e) {
|
| 535 |
+
const el = pb.querySelector('.vb-pol');
|
| 536 |
+
if (el) el.textContent = 'Live policy unavailable right now.';
|
| 537 |
+
}
|
| 538 |
+
}
|
| 539 |
+
|
| 540 |
+
function togglePanel(name) {
|
| 541 |
+
root.querySelectorAll('.vb-panel').forEach(p => { p.hidden = p.dataset.p !== name || !p.hidden; });
|
| 542 |
+
const p = root.querySelector(`[data-p="${name}"]`);
|
| 543 |
+
if (p && !p.hidden) { if (name === 'hist') renderHistory(); else renderAbout(); }
|
| 544 |
+
}
|
| 545 |
+
|
| 546 |
+
function renderAll() { renderTabs(); renderBar(); renderContent(); renderEvents(); }
|
| 547 |
+
|
| 548 |
+
// events
|
| 549 |
+
$('.vb-addr').addEventListener('submit', e => { e.preventDefault(); const v = addr.value.trim(); if (v) { navigate(active, v); addr.blur(); } });
|
| 550 |
+
addr.addEventListener('keydown', e => { if (e.key === 'Escape') { addr.value = active && active.url !== START ? active.url : ''; addr.blur(); } });
|
| 551 |
+
addr.addEventListener('focus', () => addr.select());
|
| 552 |
+
btn('back').onclick = () => go(-1);
|
| 553 |
+
btn('fwd').onclick = () => go(1);
|
| 554 |
+
btn('reload').onclick = reload;
|
| 555 |
+
btn('star').onclick = () => {
|
| 556 |
+
const t = active;
|
| 557 |
+
if (!t || t.url === START) return;
|
| 558 |
+
const i = bookmarks.findIndex(b => b.url === t.url);
|
| 559 |
+
if (i >= 0) { bookmarks.splice(i, 1); toast('Bookmark removed'); }
|
| 560 |
+
else { bookmarks.push({title:(t.title || hostOf(t.url)).slice(0, 60), url:t.url}); toast('Bookmarked'); }
|
| 561 |
+
saveBookmarks(bookmarks);
|
| 562 |
+
renderBookmarks(); renderBar();
|
| 563 |
+
};
|
| 564 |
+
btn('agent').onclick = () => { side.hidden = !side.hidden; renderBar(); if (!side.hidden) taskEl.focus(); };
|
| 565 |
+
btn('hist').onclick = () => togglePanel('hist');
|
| 566 |
+
btn('about').onclick = () => togglePanel('about');
|
| 567 |
+
root.querySelectorAll('[data-close]').forEach(b => { b.onclick = () => { b.closest('.vb-panel').hidden = true; }; });
|
| 568 |
+
runBtn.onclick = runAgent;
|
| 569 |
+
taskEl.addEventListener('keydown', e => { if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) { e.preventDefault(); runAgent(); } });
|
| 570 |
+
|
| 571 |
+
content.addEventListener('click', e => {
|
| 572 |
+
const a = e.target.closest('a');
|
| 573 |
+
if (!a || !content.contains(a)) return;
|
| 574 |
+
e.preventDefault();
|
| 575 |
+
const u = a.getAttribute('data-vb-href') || a.getAttribute('href');
|
| 576 |
+
if (!u || !/^https?:\/\//i.test(u)) return;
|
| 577 |
+
if (e.ctrlKey || e.metaKey || e.shiftKey) newTab(u, false); else navigate(active, u);
|
| 578 |
+
});
|
| 579 |
+
content.addEventListener('auxclick', e => {
|
| 580 |
+
const a = e.button === 1 && e.target.closest('a');
|
| 581 |
+
if (!a) return;
|
| 582 |
+
e.preventDefault();
|
| 583 |
+
const u = a.getAttribute('data-vb-href') || a.getAttribute('href');
|
| 584 |
+
if (u && /^https?:\/\//i.test(u)) newTab(u, false);
|
| 585 |
+
});
|
| 586 |
+
|
| 587 |
+
root.addEventListener('keydown', e => {
|
| 588 |
+
if ((e.ctrlKey || e.metaKey) && (e.key === 'l' || e.key === 'L')) { e.preventDefault(); addr.focus(); addr.select(); }
|
| 589 |
+
else if (e.altKey && e.key === 'ArrowLeft') { e.preventDefault(); go(-1); }
|
| 590 |
+
else if (e.altKey && e.key === 'ArrowRight') { e.preventDefault(); go(1); }
|
| 591 |
+
else if (e.key === 'F5') { e.preventDefault(); reload(); }
|
| 592 |
+
else if (e.key === 'Escape') root.querySelectorAll('.vb-panel').forEach(p => { p.hidden = true; });
|
| 593 |
+
});
|
| 594 |
+
root.addEventListener('mousedown', e => { if (!e.target.closest('input,textarea,button,a,.vb-content')) root.focus({preventScroll:true}); });
|
| 595 |
+
|
| 596 |
+
renderBookmarks();
|
| 597 |
+
newTab();
|
| 598 |
+
void win;
|
| 599 |
+
return root;
|
| 600 |
+
}
|
| 601 |
+
}));
|
| 602 |
+
})();
|