nodebb-plugin-pdf-secure 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-pdf-secure",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Secure PDF viewer plugin for NodeBB - prevents downloading, enables canvas-only rendering with Premium group support",
   "main": "library.js",
   "repository": {

package/static/lib/main.js

@@ -42,7 +42,7 @@
 
 	async function openSecureViewer(filename) {
 		try {
-			// Request nonce from server
+			// 1. Request nonce from server
 			const response = await fetch(
 				`${config.relative_path}/api/v3/plugins/pdf-secure/nonce?file=${encodeURIComponent(filename)}`,
 				{
@@ -65,7 +65,7 @@
 			const result = await response.json();
 			const { nonce, isPremium } = result.response;
 
-			// Fetch PDF binary in parent (before iframe creation)
+			// 2. Fetch PDF binary data
 			const pdfResponse = await fetch(
 				`${config.relative_path}/api/v3/plugins/pdf-secure/pdf-data?nonce=${encodeURIComponent(nonce)}`,
 				{ credentials: 'same-origin' }
@@ -76,45 +76,51 @@
 			}
 			const pdfArrayBuffer = await pdfResponse.arrayBuffer();
 
-			// Create overlay with iframe
+			// 3. Create overlay DOM (no iframe)
 			const overlay = document.createElement('div');
 			overlay.className = 'pdf-secure-overlay';
 			overlay.id = 'pdf-secure-overlay';
-
-			const iframe = document.createElement('iframe');
-			const viewerUrl = `${config.relative_path}/plugins/nodebb-plugin-pdf-secure/static/lib/viewer.html`;
-			iframe.src = viewerUrl;
-			iframe.className = 'pdf-secure-iframe';
-			iframe.setAttribute('sandbox', 'allow-scripts');
-
-			overlay.appendChild(iframe);
+			overlay.innerHTML = `
+				<div class="pdf-secure-viewer">
+					<div id="pdf-toolbar">
+						<button id="pdf-prev-btn" disabled>&laquo; Prev</button>
+						<span id="pdf-page-info">Loading...</span>
+						<button id="pdf-next-btn" disabled>Next &raquo;</button>
+						<button id="pdf-close-btn">&times; Close</button>
+					</div>
+					<div id="pdf-premium-banner">
+						This is a preview (page 1 only). Upgrade to Premium to view the full document.
+					</div>
+					<div id="pdf-canvas-wrapper">
+						<div id="pdf-loading">Loading PDF...</div>
+						<div id="pdf-error-msg"></div>
+						<canvas id="pdf-canvas"></canvas>
+					</div>
+				</div>
+			`;
 			document.body.appendChild(overlay);
 
-			// Listen for messages from viewer
-			function onMessage(e) {
-				if (e.source !== iframe.contentWindow) return;
-				if (e.data && e.data.type === 'pdf-viewer-close') {
-					closeOverlay();
-				} else if (e.data && e.data.type === 'pdf-viewer-ready') {
-					iframe.contentWindow.postMessage(
-						{ type: 'pdf-data', pdf: pdfArrayBuffer, isPremium: isPremium },
-						'*',
-						[pdfArrayBuffer]
-					);
-				}
-			}
-			window.addEventListener('message', onMessage);
+			// 4. Dynamically import viewer.js
+			const { initViewer } = await import(
+				`${config.relative_path}/plugins/nodebb-plugin-pdf-secure/static/lib/viewer.js`
+			);
+
+			// 5. Initialize viewer
+			const cleanupViewer = await initViewer(
+				overlay.querySelector('.pdf-secure-viewer'),
+				pdfArrayBuffer,
+				isPremium,
+				closeOverlay
+			);
 
-			// Close on Escape key
+			// 6. Escape key handler (in main.js scope)
 			function onKeydown(e) {
-				if (e.key === 'Escape') {
-					closeOverlay();
-				}
+				if (e.key === 'Escape') closeOverlay();
 			}
 			document.addEventListener('keydown', onKeydown);
 
 			function closeOverlay() {
-				window.removeEventListener('message', onMessage);
+				if (cleanupViewer) cleanupViewer();
 				document.removeEventListener('keydown', onKeydown);
 				const el = document.getElementById('pdf-secure-overlay');
 				if (el) el.remove();

package/static/lib/viewer.js

@@ -1,149 +1,122 @@
 import { getDocument, GlobalWorkerOptions } from './pdf.min.mjs';
 
-// Set worker path
-GlobalWorkerOptions.workerSrc = './pdf.worker.min.mjs';
+// Worker path resolved relative to this file's URL
+GlobalWorkerOptions.workerSrc = new URL('./pdf.worker.min.mjs', import.meta.url).href;
+
+export async function initViewer(container, pdfArrayBuffer, isPremium, onClose) {
+	// DOM elements scoped to container
+	const canvas = container.querySelector('#pdf-canvas');
+	const ctx = canvas.getContext('2d');
+	const prevBtn = container.querySelector('#pdf-prev-btn');
+	const nextBtn = container.querySelector('#pdf-next-btn');
+	const pageInfo = container.querySelector('#pdf-page-info');
+	const loadingEl = container.querySelector('#pdf-loading');
+	const errorEl = container.querySelector('#pdf-error-msg');
+	const premiumBanner = container.querySelector('#pdf-premium-banner');
+	const closeBtn = container.querySelector('#pdf-close-btn');
+	const canvasWrapper = container.querySelector('#pdf-canvas-wrapper');
+
+	let pdfDoc = null;
+	let currentPage = 1;
+	let totalPages = 0;
+	let rendering = false;
+
+	// --- Security: scoped to container ---
+	container.addEventListener('contextmenu', (e) => e.preventDefault());
+	container.addEventListener('dragstart', (e) => e.preventDefault());
+	container.addEventListener('selectstart', (e) => e.preventDefault());
+
+	// Keyboard shortcuts (Ctrl+S/P/U/A, F12) — document level
+	function onSecurityKeydown(e) {
+		if (e.key === 'F12') {
+			e.preventDefault();
+			return;
+		}
+		if ((e.ctrlKey || e.metaKey) && ['s', 'p', 'u', 'a'].includes(e.key.toLowerCase())) {
+			e.preventDefault();
+		}
+	}
+	document.addEventListener('keydown', onSecurityKeydown);
 
-// --- Security event listeners ---
+	// Premium banner
+	if (!isPremium) {
+		premiumBanner.style.display = 'block';
+	}
 
-// Block right-click context menu
-document.addEventListener('contextmenu', (e) => {
-	e.preventDefault();
-});
+	// Close button
+	closeBtn.addEventListener('click', onClose);
 
-// Block keyboard shortcuts (Ctrl+S, Ctrl+P, Ctrl+U, F12)
-document.addEventListener('keydown', (e) => {
-	if (e.key === 'F12') {
-		e.preventDefault();
-		return;
-	}
-	if ((e.ctrlKey || e.metaKey) && ['s', 'p', 'u', 'a'].includes(e.key.toLowerCase())) {
-		e.preventDefault();
-		return;
-	}
-});
-
-// Block drag
-document.addEventListener('dragstart', (e) => {
-	e.preventDefault();
-});
-
-// Block text selection via JS as well
-document.addEventListener('selectstart', (e) => {
-	e.preventDefault();
-});
-
-// --- PDF Viewer Logic ---
-
-const canvas = document.getElementById('pdf-canvas');
-const ctx = canvas.getContext('2d');
-const prevBtn = document.getElementById('prev-btn');
-const nextBtn = document.getElementById('next-btn');
-const pageInfo = document.getElementById('page-info');
-const loadingEl = document.getElementById('loading');
-const errorEl = document.getElementById('error-msg');
-const premiumBanner = document.getElementById('premium-banner');
-const closeBtn = document.getElementById('close-btn');
-
-let pdfDoc = null;
-let currentPage = 1;
-let totalPages = 0;
-let rendering = false;
-
-// Close button handler
-closeBtn.addEventListener('click', () => {
-	if (window.parent && window.parent !== window) {
-		window.parent.postMessage({ type: 'pdf-viewer-close' }, '*');
-	} else {
-		window.close();
-	}
-});
+	// --- Render ---
+	async function renderPage(pageNum) {
+		if (rendering) return;
+		rendering = true;
 
-async function renderPage(pageNum) {
-	if (rendering) return;
-	rendering = true;
+		try {
+			const page = await pdfDoc.getPage(pageNum);
 
-	try {
-		const page = await pdfDoc.getPage(pageNum);
-
-		// Calculate scale to fit container width
-		const wrapper = document.getElementById('canvas-wrapper');
-		const maxWidth = wrapper.clientWidth - 40; // padding
-		const viewport = page.getViewport({ scale: 1 });
-		const scale = Math.min(maxWidth / viewport.width, 2.0); // max 2x
-		const scaledViewport = page.getViewport({ scale });
-
-		canvas.width = scaledViewport.width;
-		canvas.height = scaledViewport.height;
-
-		await page.render({
-			canvasContext: ctx,
-			viewport: scaledViewport,
-		}).promise;
-
-		currentPage = pageNum;
-		pageInfo.textContent = `Page ${currentPage} / ${totalPages}`;
-		prevBtn.disabled = currentPage <= 1;
-		nextBtn.disabled = currentPage >= totalPages;
-	} catch (err) {
-		showError('Error rendering page.');
-	}
+			const maxWidth = canvasWrapper.clientWidth - 40;
+			const viewport = page.getViewport({ scale: 1 });
+			const scale = Math.min(maxWidth / viewport.width, 2.0);
+			const scaledViewport = page.getViewport({ scale });
 
-	rendering = false;
-}
+			canvas.width = scaledViewport.width;
+			canvas.height = scaledViewport.height;
 
-function showError(msg) {
-	loadingEl.style.display = 'none';
-	canvas.style.display = 'none';
-	errorEl.style.display = 'flex';
-	errorEl.textContent = msg;
-}
+			await page.render({
+				canvasContext: ctx,
+				viewport: scaledViewport,
+			}).promise;
+
+			currentPage = pageNum;
+			pageInfo.textContent = `Page ${currentPage} / ${totalPages}`;
+			prevBtn.disabled = currentPage <= 1;
+			nextBtn.disabled = currentPage >= totalPages;
+		} catch (err) {
+			showError('Error rendering page.');
+		}
 
-// Navigation
-prevBtn.addEventListener('click', () => {
-	if (currentPage > 1) renderPage(currentPage - 1);
-});
-
-nextBtn.addEventListener('click', () => {
-	if (currentPage < totalPages) renderPage(currentPage + 1);
-});
-
-// Keyboard navigation
-document.addEventListener('keydown', (e) => {
-	if (e.key === 'ArrowLeft' && currentPage > 1) {
-		renderPage(currentPage - 1);
-	} else if (e.key === 'ArrowRight' && currentPage < totalPages) {
-		renderPage(currentPage + 1);
-	} else if (e.key === 'Escape') {
-		closeBtn.click();
+		rendering = false;
 	}
-});
-
-// Handle window resize
-let resizeTimeout;
-window.addEventListener('resize', () => {
-	clearTimeout(resizeTimeout);
-	resizeTimeout = setTimeout(() => {
-		if (pdfDoc) renderPage(currentPage);
-	}, 250);
-});
-
-// 30 second timeout for receiving PDF data
-const dataTimeout = setTimeout(() => {
-	showError('Timed out waiting for PDF data.');
-}, 30000);
-
-// Listen for PDF data from parent
-window.addEventListener('message', async (e) => {
-	if (!e.data || e.data.type !== 'pdf-data') return;
-	clearTimeout(dataTimeout);
-
-	const { pdf, isPremium } = e.data;
-	if (!isPremium) {
-		premiumBanner.style.display = 'block';
+
+	function showError(msg) {
+		loadingEl.style.display = 'none';
+		canvas.style.display = 'none';
+		errorEl.style.display = 'flex';
+		errorEl.textContent = msg;
 	}
 
+	// Navigation buttons
+	prevBtn.addEventListener('click', () => {
+		if (currentPage > 1) renderPage(currentPage - 1);
+	});
+
+	nextBtn.addEventListener('click', () => {
+		if (currentPage < totalPages) renderPage(currentPage + 1);
+	});
+
+	// Keyboard navigation
+	function onNavKeydown(e) {
+		if (e.key === 'ArrowLeft' && currentPage > 1) {
+			renderPage(currentPage - 1);
+		} else if (e.key === 'ArrowRight' && currentPage < totalPages) {
+			renderPage(currentPage + 1);
+		}
+	}
+	document.addEventListener('keydown', onNavKeydown);
+
+	// Handle window resize
+	let resizeTimeout;
+	function onResize() {
+		clearTimeout(resizeTimeout);
+		resizeTimeout = setTimeout(() => {
+			if (pdfDoc) renderPage(currentPage);
+		}, 250);
+	}
+	window.addEventListener('resize', onResize);
+
+	// Load PDF
 	try {
-		const data = new Uint8Array(pdf);
+		const data = new Uint8Array(pdfArrayBuffer);
 		pdfDoc = await getDocument({ data }).promise;
 		totalPages = pdfDoc.numPages;
 		loadingEl.style.display = 'none';
@@ -152,7 +125,12 @@ window.addEventListener('message', async (e) => {
 	} catch (err) {
 		showError('Failed to load PDF. Please try again.');
 	}
-});
 
-// Notify parent that viewer is ready (after listener is registered)
-window.parent.postMessage({ type: 'pdf-viewer-ready' }, '*');
+	// Return cleanup function
+	return function cleanup() {
+		document.removeEventListener('keydown', onSecurityKeydown);
+		document.removeEventListener('keydown', onNavKeydown);
+		window.removeEventListener('resize', onResize);
+		if (pdfDoc) pdfDoc.destroy();
+	};
+}

package/static/style.less

@@ -25,18 +25,162 @@
 	justify-content: center;
 }
 
-.pdf-secure-iframe {
+.pdf-secure-viewer {
 	width: 95%;
 	height: 95%;
 	border: none;
 	border-radius: 8px;
 	background: #2b2b2b;
+	overflow: hidden;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	user-select: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+
+	&, & *, & *::before, & *::after {
+		box-sizing: border-box;
+		margin: 0;
+		padding: 0;
+	}
+
+	#pdf-toolbar {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 12px;
+		padding: 8px 16px;
+		background: #333;
+		color: #fff;
+		flex-shrink: 0;
+		z-index: 10;
+	}
+
+	#pdf-toolbar button {
+		background: #555;
+		color: #fff;
+		border: none;
+		padding: 6px 14px;
+		border-radius: 4px;
+		cursor: pointer;
+		font-size: 14px;
+	}
+
+	#pdf-toolbar button:hover {
+		background: #666;
+	}
+
+	#pdf-toolbar button:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	#pdf-page-info {
+		font-size: 14px;
+		min-width: 100px;
+		text-align: center;
+	}
+
+	#pdf-close-btn {
+		position: absolute;
+		right: 16px;
+		top: 8px;
+		background: #c0392b !important;
+		font-size: 16px !important;
+		padding: 6px 12px !important;
+		z-index: 20;
+	}
+
+	#pdf-close-btn:hover {
+		background: #e74c3c !important;
+	}
+
+	#pdf-canvas-wrapper {
+		flex: 1;
+		overflow: auto;
+		display: flex;
+		justify-content: center;
+		align-items: flex-start;
+		padding: 20px;
+		background: #2b2b2b;
+	}
+
+	#pdf-canvas {
+		pointer-events: none;
+		display: none;
+		max-width: 100%;
+		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+	}
+
+	#pdf-loading {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		color: #aaa;
+		font-size: 18px;
+	}
+
+	#pdf-error-msg {
+		display: none;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		color: #e74c3c;
+		font-size: 18px;
+		text-align: center;
+		padding: 20px;
+	}
+
+	#pdf-premium-banner {
+		display: none;
+		background: linear-gradient(135deg, #f39c12, #e67e22);
+		color: #fff;
+		text-align: center;
+		padding: 10px 16px;
+		font-size: 14px;
+		font-weight: 600;
+		flex-shrink: 0;
+	}
+}
+
+/* Anti-print: hide overlay when printing */
+@media print {
+	.pdf-secure-overlay {
+		display: none !important;
+	}
 }
 
 @media (max-width: 768px) {
-	.pdf-secure-iframe {
+	.pdf-secure-viewer {
 		width: 100%;
 		height: 100%;
 		border-radius: 0;
 	}
 }
+
+@media (max-width: 600px) {
+	.pdf-secure-viewer {
+		#pdf-toolbar {
+			gap: 6px;
+			padding: 6px 8px;
+		}
+
+		#pdf-toolbar button {
+			padding: 4px 8px;
+			font-size: 12px;
+		}
+
+		#pdf-page-info {
+			font-size: 12px;
+			min-width: 70px;
+		}
+
+		#pdf-canvas-wrapper {
+			padding: 10px;
+		}
+	}
+}

package/static/lib/viewer.css

@@ -1,158 +0,0 @@
-/* PDF Secure Viewer Styles */
-* {
-	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
-}
-
-html, body {
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-	background: #2b2b2b;
-	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-	user-select: none;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-}
-
-#viewer-container {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	width: 100%;
-}
-
-#toolbar {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 12px;
-	padding: 8px 16px;
-	background: #333;
-	color: #fff;
-	flex-shrink: 0;
-	z-index: 10;
-}
-
-#toolbar button {
-	background: #555;
-	color: #fff;
-	border: none;
-	padding: 6px 14px;
-	border-radius: 4px;
-	cursor: pointer;
-	font-size: 14px;
-}
-
-#toolbar button:hover {
-	background: #666;
-}
-
-#toolbar button:disabled {
-	opacity: 0.4;
-	cursor: not-allowed;
-}
-
-#page-info {
-	font-size: 14px;
-	min-width: 100px;
-	text-align: center;
-}
-
-#close-btn {
-	position: absolute;
-	right: 16px;
-	top: 8px;
-	background: #c0392b !important;
-	font-size: 16px !important;
-	padding: 6px 12px !important;
-	z-index: 20;
-}
-
-#close-btn:hover {
-	background: #e74c3c !important;
-}
-
-#canvas-wrapper {
-	flex: 1;
-	overflow: auto;
-	display: flex;
-	justify-content: center;
-	align-items: flex-start;
-	padding: 20px;
-	background: #2b2b2b;
-}
-
-#pdf-canvas {
-	pointer-events: none;
-	display: block;
-	max-width: 100%;
-	box-shadow: 0 4px 20px rgba(0,0,0,0.5);
-}
-
-#loading {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 100%;
-	color: #aaa;
-	font-size: 18px;
-}
-
-#error-msg {
-	display: none;
-	align-items: center;
-	justify-content: center;
-	height: 100%;
-	color: #e74c3c;
-	font-size: 18px;
-	text-align: center;
-	padding: 20px;
-}
-
-#premium-banner {
-	display: none;
-	background: linear-gradient(135deg, #f39c12, #e67e22);
-	color: #fff;
-	text-align: center;
-	padding: 10px 16px;
-	font-size: 14px;
-	font-weight: 600;
-	flex-shrink: 0;
-}
-
-/* Anti-print */
-@media print {
-	html, body {
-		visibility: hidden !important;
-	}
-	body::after {
-		content: 'Printing is not allowed.';
-		visibility: visible;
-		display: block;
-		text-align: center;
-		padding: 50px;
-		font-size: 24px;
-	}
-}
-
-/* Responsive */
-@media (max-width: 600px) {
-	#toolbar {
-		gap: 6px;
-		padding: 6px 8px;
-	}
-	#toolbar button {
-		padding: 4px 8px;
-		font-size: 12px;
-	}
-	#page-info {
-		font-size: 12px;
-		min-width: 70px;
-	}
-	#canvas-wrapper {
-		padding: 10px;
-	}
-}

package/static/lib/viewer.html

@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>PDF Viewer</title>
-	<link rel="stylesheet" href="viewer.css">
-</head>
-<body>
-	<div id="viewer-container">
-		<div id="toolbar">
-			<button id="prev-btn" disabled>&laquo; Prev</button>
-			<span id="page-info">Loading...</span>
-			<button id="next-btn" disabled>Next &raquo;</button>
-			<button id="close-btn">&times; Close</button>
-		</div>
-		<div id="premium-banner">
-			This is a preview (page 1 only). Upgrade to Premium to view the full document.
-		</div>
-		<div id="canvas-wrapper">
-			<div id="loading">Loading PDF...</div>
-			<div id="error-msg"></div>
-			<canvas id="pdf-canvas"></canvas>
-		</div>
-	</div>
-
-	<script type="module" src="viewer.js"></script>
-</body>
-</html>