264 lines
13 KiB
JavaScript
264 lines
13 KiB
JavaScript
'use strict';
|
||
|
||
/**
|
||
* HTML 邮件渲染验收（v4）。
|
||
*
|
||
* 验的是四件事：
|
||
* 1. 富文本正文真的渲染出来了（iframe 里有内容，不是空白）
|
||
* 2. **邮件里的 <script> 绝对不能执行**（这是最关键的一条：正文是别人写的代码）
|
||
* 3. 远程图片默认被拦（否则一打开就把你的 IP/时间告诉发件人），可以手动放行
|
||
* 4. 富文本 / 纯文本可以切换
|
||
*
|
||
* 做法：用客户端自己的发信接口给自己发一封**带恶意脚本的 HTML 邮件**，然后打开它。
|
||
* 用法：node tools/ui-check-v4.js [url] [--creds <account.json>] [--keep]
|
||
*/
|
||
|
||
const { spawn } = require('node:child_process');
|
||
const fs = require('node:fs');
|
||
const os = require('node:os');
|
||
const path = require('node:path');
|
||
|
||
const URL_ = process.argv[2] && !process.argv[2].startsWith('--') ? process.argv[2] : 'http://127.0.0.1:8788/';
|
||
const credsArg = process.argv.indexOf('--creds');
|
||
const CREDS = credsArg > 0 ? process.argv[credsArg + 1] : path.join(__dirname, '..', 'data', 'account.json');
|
||
const KEEP = process.argv.includes('--keep');
|
||
const PORT = 9228;
|
||
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
|
||
|
||
const report = [];
|
||
const results = [];
|
||
function say(s = '') { report.push(s); }
|
||
function step(name, ok, detail = '') {
|
||
results.push({ name, ok, detail });
|
||
report.push(`${ok ? '[PASS]' : '[FAIL]'} ${name}${detail ? ' —— ' + detail : ''}`);
|
||
process.stdout.write(`${ok ? 'PASS' : 'FAIL'} ${name}${detail ? ' —— ' + detail : ''}\n`);
|
||
}
|
||
|
||
async function api(base, method, p, body) {
|
||
const res = await fetch(base + p, {
|
||
method,
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: body === undefined ? undefined : JSON.stringify(body),
|
||
});
|
||
const text = await res.text();
|
||
let data = null;
|
||
try { data = text ? JSON.parse(text) : null; } catch { data = { error: text }; }
|
||
if (!res.ok) throw new Error((data && data.error) || `HTTP ${res.status}`);
|
||
return data;
|
||
}
|
||
|
||
class Cdp {
|
||
constructor(ws) { this.ws = ws; this.id = 0; this.pending = new Map(); this.errors = []; }
|
||
static async connect(url) {
|
||
const ws = new WebSocket(url);
|
||
await new Promise((res, rej) => {
|
||
ws.addEventListener('open', res, { once: true });
|
||
ws.addEventListener('error', () => rej(new Error('CDP 连接失败')), { once: true });
|
||
});
|
||
const c = new Cdp(ws);
|
||
ws.addEventListener('message', (ev) => {
|
||
let m; try { m = JSON.parse(ev.data); } catch { return; }
|
||
if (m.id && c.pending.has(m.id)) {
|
||
const { resolve, reject } = c.pending.get(m.id);
|
||
c.pending.delete(m.id);
|
||
if (m.error) reject(new Error(m.error.message)); else resolve(m.result);
|
||
} else if (m.method === 'Runtime.exceptionThrown') {
|
||
const d = m.params.exceptionDetails;
|
||
c.errors.push('EXCEPTION: ' + (d.exception && d.exception.description ? d.exception.description.split('\n')[0] : d.text));
|
||
} else if (m.method === 'Runtime.consoleAPICalled' && m.params.type === 'error') {
|
||
c.errors.push('console.error: ' + m.params.args.map((a) => a.value || a.description || '').join(' '));
|
||
}
|
||
});
|
||
return c;
|
||
}
|
||
send(method, params = {}) {
|
||
const id = ++this.id;
|
||
return new Promise((resolve, reject) => {
|
||
this.pending.set(id, { resolve, reject });
|
||
this.ws.send(JSON.stringify({ id, method, params }));
|
||
setTimeout(() => { if (this.pending.has(id)) { this.pending.delete(id); reject(new Error(method + ' 超时')); } }, 20000);
|
||
});
|
||
}
|
||
async eval(expression) {
|
||
const r = await this.send('Runtime.evaluate', { expression, returnByValue: true, awaitPromise: true });
|
||
if (r.exceptionDetails) throw new Error(r.exceptionDetails.text || 'evaluate 异常');
|
||
return r.result ? r.result.value : undefined;
|
||
}
|
||
}
|
||
|
||
(async () => {
|
||
const base = URL_.replace(/\/$/, '');
|
||
const stamp = Date.now().toString().slice(-6);
|
||
const subject = `HTML 渲染验收 ${stamp}`;
|
||
let uid = null;
|
||
let cdp = null;
|
||
let child = null;
|
||
|
||
try {
|
||
const creds = JSON.parse(fs.readFileSync(CREDS, 'utf8'));
|
||
const login = await api(base, 'POST', '/api/login', {
|
||
host: creds.host, user: creds.user, password: creds.password, displayName: creds.displayName || '',
|
||
});
|
||
step('客户端登录', !!login.ok, `${(login.folders || []).length} 个文件夹`);
|
||
|
||
// ── 1) 发一封带「恶意脚本 + 远程图片」的 HTML 邮件给自己
|
||
const evilHtml = [
|
||
'<div style="font-family:sans-serif">',
|
||
`<p>富文本正文 <b>加粗</b> <span style="color:#c00">红色</span> ${stamp}</p>`,
|
||
'<script>window.__pwned = true; document.title = "PWNED";</script>',
|
||
'<img src="https://example.com/tracker.gif?x=1" onerror="window.__pwned=true">',
|
||
'<a href="javascript:window.__pwned=true">危险链接</a>',
|
||
'<iframe src="https://example.com/x"></iframe>',
|
||
'</div>',
|
||
].join('');
|
||
await api(base, 'POST', '/api/send', {
|
||
to: creds.user, subject, text: `这是纯文本兜底 ${stamp}`, html: evilHtml,
|
||
});
|
||
step('已发出带脚本的 HTML 测试邮件', true, subject);
|
||
|
||
// ── 2) 等服务端投递到自己的收件箱，并检查净化结果
|
||
let message = null;
|
||
for (let i = 0; i < 30 && !message; i++) {
|
||
await sleep(1000);
|
||
const list = await api(base, 'GET', `/api/messages?folder=INBOX&limit=20`);
|
||
message = (list.messages || []).find((m) => m.subject === subject) || null;
|
||
}
|
||
step('测试邮件已投递到收件箱', !!message, message ? `uid=${message.uid}` : '(未收到)');
|
||
if (!message) throw new Error('没收到测试邮件，后续无法继续');
|
||
uid = message.uid;
|
||
|
||
const detail = await api(base, 'GET', `/api/messages/${uid}?folder=INBOX`);
|
||
step('服务端净化：<script> 被清掉', !/<script/i.test(detail.html || ''), `html 长度 ${(detail.html || '').length}`);
|
||
step('服务端净化：记录清理了哪些东西', Array.isArray(detail.sanitized) && detail.sanitized.length > 0,
|
||
(detail.sanitized || []).join('、'));
|
||
step('服务端净化：iframe 被清掉', !/<iframe/i.test(detail.html || ''), '');
|
||
step('服务端净化：javascript: 链接被改写', !/href\s*=\s*["']?javascript:/i.test(detail.html || ''), '');
|
||
step('服务端净化：事件处理器被清掉', !/\sonerror\s*=/i.test(detail.html || ''), '');
|
||
step('远程图片默认被拦', (detail.blockedImages || []).length > 0, `${(detail.blockedImages || []).length} 张`);
|
||
step('渲染文档带 CSP 且禁脚本', /Content-Security-Policy/.test(detail.htmlDocument || '')
|
||
&& /default-src 'none'/.test(detail.htmlDocument || ''), '');
|
||
step('保留了正常内容（加粗文字还在）', /富文本正文/.test(detail.html || '') && /<b>加粗<\/b>/.test(detail.html || ''), '');
|
||
|
||
const withImages = await api(base, 'GET', `/api/messages/${uid}?folder=INBOX&images=1`);
|
||
step('放行图片后不再拦截（img 保留）', /<img/i.test(withImages.html || ''), `${(withImages.blockedImages || []).length} 张被拦`);
|
||
|
||
// ── 3) 打开界面，点开这封邮件，检查真的渲染了
|
||
const edge = ['C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
|
||
'C:\\Program Files\\Microsoft\\Edge\\Application\\msedge.exe'].find((p) => fs.existsSync(p));
|
||
if (!edge) throw new Error('找不到 msedge.exe');
|
||
const profile = fs.mkdtempSync(path.join(os.tmpdir(), 'wpyw-ui4-'));
|
||
child = spawn(edge, ['--headless=new', `--remote-debugging-port=${PORT}`, `--user-data-dir=${profile}`,
|
||
'--no-first-run', '--no-default-browser-check', '--disable-extensions', '--window-size=1440,900', URL_],
|
||
{ stdio: 'ignore' });
|
||
|
||
let target = null;
|
||
for (let i = 0; i < 50 && !target; i++) {
|
||
await sleep(400);
|
||
try {
|
||
const list = await (await fetch(`http://127.0.0.1:${PORT}/json/list`)).json();
|
||
target = list.find((t) => t.type === 'page' && t.webSocketDebuggerUrl);
|
||
} catch { /* 等 */ }
|
||
}
|
||
if (!target) throw new Error('等不到 Edge 调试目标');
|
||
cdp = await Cdp.connect(target.webSocketDebuggerUrl);
|
||
await cdp.send('Runtime.enable');
|
||
await cdp.send('Page.enable');
|
||
await cdp.send('Page.navigate', { url: URL_ });
|
||
|
||
let rows = 0;
|
||
for (let i = 0; i < 40; i++) {
|
||
await sleep(500);
|
||
rows = await cdp.eval('document.querySelectorAll("[data-uid]").length');
|
||
if (rows > 0) break;
|
||
}
|
||
step('界面加载出邮件列表', rows > 0, `${rows} 行`);
|
||
|
||
const clicked = await cdp.eval(`(() => {
|
||
const row = [...document.querySelectorAll('[data-uid]')].find(el => el.textContent.includes(${JSON.stringify(stamp)}));
|
||
if (!row) return false;
|
||
row.click();
|
||
return true;
|
||
})()`);
|
||
step('点开了这封 HTML 邮件', clicked, '');
|
||
|
||
let probe = null;
|
||
for (let i = 0; i < 30; i++) {
|
||
await sleep(400);
|
||
probe = await cdp.eval(`(() => {
|
||
const f = document.querySelector('#html-body');
|
||
const article = document.querySelector('article.mail-body');
|
||
return {
|
||
iframe: !!f,
|
||
height: f ? f.getBoundingClientRect().height : 0,
|
||
srcdocLen: f && f.getAttribute('srcdoc') ? f.getAttribute('srcdoc').length : 0,
|
||
srcdocHasScript: f ? /<script/i.test(f.getAttribute('srcdoc') || '') : null,
|
||
srcdocHasCsp: f ? /Content-Security-Policy/.test(f.getAttribute('srcdoc') || '') : null,
|
||
sandbox: f ? f.getAttribute('sandbox') : null,
|
||
articleVisible: !!article,
|
||
toggle: !!document.querySelector('#body-view-toggle'),
|
||
notice: document.body.innerText.includes('已拦截') || document.body.innerText.includes('已清理'),
|
||
pwned: !!window.__pwned,
|
||
pwnedInFrames: (() => { try { return window.frames.length > 0 && !!window.frames[0].__pwned; } catch (e) { return 'cross-origin'; } })(),
|
||
};
|
||
})()`);
|
||
if (probe && probe.iframe && probe.srcdocLen > 0) break;
|
||
}
|
||
step('HTML 正文渲染在 iframe 里', !!probe && probe.iframe && probe.srcdocLen > 100,
|
||
probe ? `srcdoc ${probe.srcdocLen} 字节，高度 ${Math.round(probe.height)}px` : '没找到 #html-body');
|
||
step('iframe 带 sandbox 且不给 allow-scripts',
|
||
!!probe && typeof probe.sandbox === 'string' && !/allow-scripts/.test(probe.sandbox),
|
||
probe ? `sandbox="${probe.sandbox}"` : '');
|
||
step('iframe 文档里没有 <script>', !!probe && probe.srcdocHasScript === false, '');
|
||
step('iframe 文档带 CSP', !!probe && probe.srcdocHasCsp === true, '');
|
||
step('★ 邮件里的脚本没有执行（window.__pwned 未设置）', !!probe && probe.pwned === false,
|
||
probe ? String(probe.pwnedInFrames) : '');
|
||
step('界面提示了拦截/清理', !!probe && probe.notice, '');
|
||
step('有富文本/纯文本切换', !!probe && probe.toggle, '');
|
||
|
||
// 切纯文本
|
||
await cdp.eval(`(() => { const b = document.querySelector('#view-text'); if (b) b.click(); })()`);
|
||
await sleep(500);
|
||
const textView = await cdp.eval(`(() => ({
|
||
iframe: !!document.querySelector('#html-body'),
|
||
article: !!document.querySelector('article.mail-body'),
|
||
hasText: document.body.innerText.includes(${JSON.stringify(stamp)}),
|
||
}))()`);
|
||
step('切到纯文本后不再用 iframe、改用 <article>',
|
||
!textView.iframe && textView.article && textView.hasText, JSON.stringify(textView));
|
||
|
||
// 切回富文本
|
||
await cdp.eval(`(() => { const b = document.querySelector('#view-html'); if (b) b.click(); })()`);
|
||
await sleep(700);
|
||
const backToHtml = await cdp.eval('!!document.querySelector("#html-body")');
|
||
step('切回富文本正常', backToHtml, '');
|
||
|
||
const unexpected = cdp.errors.filter((e) => !/403 \(Forbidden\)/.test(e));
|
||
step('零 JS 异常 / 零 console.error', unexpected.length === 0, unexpected.slice(0, 3).join(' | '));
|
||
} catch (err) {
|
||
step('验收过程异常', false, `${err.name}: ${err.message}`);
|
||
} finally {
|
||
try { if (cdp) cdp.ws.close(); } catch { }
|
||
try { if (child) child.kill(); } catch { }
|
||
// 清理测试邮件（客户端的删除接口是 POST /api/delete，不是 REST 风格的 DELETE）
|
||
if (uid && !KEEP) {
|
||
try {
|
||
await api(base, 'POST', '/api/delete', { uid, folder: 'INBOX', permanent: true });
|
||
step('清理测试邮件（永久删除）', true, `uid=${uid}`);
|
||
} catch (err) {
|
||
step('清理测试邮件', false, err.message);
|
||
}
|
||
}
|
||
const pass = results.filter((r) => r.ok).length;
|
||
const fail = results.length - pass;
|
||
say('');
|
||
say(`结果：${pass} 项通过，${fail} 项失败`);
|
||
for (const r of results.filter((x) => !x.ok)) say(` [失败] ${r.name} —— ${r.detail}`);
|
||
try {
|
||
const out = path.join(__dirname, '..', '..', 'artifacts', 'client-ui-check-v4.txt');
|
||
fs.mkdirSync(path.dirname(out), { recursive: true });
|
||
fs.writeFileSync(out, report.join('\n'), 'utf8');
|
||
} catch { }
|
||
process.exitCode = fail === 0 ? 0 : 1;
|
||
}
|
||
})();
|