Angular 4借助Node.js API生成PDF的安全传参等技术疑问

Hey there! Great job getting the html-pdf package working with your Angular 4 UI content—sounds like you've got the core PDF generation flow sorted. Let's dive into your first question about securely passing that full UI content (HTML, custom styles, Bootstrap CSS) to your Node.js API.

1. Base64-Encoded JSON Payload (Great for Most Cases) #

Since raw HTML/CSS can have special characters (like quotes, line breaks, or special symbols) that might break JSON parsing or get mangled in transit, encoding the content as Base64 is a reliable, safe approach. It turns your text content into a plain ASCII string that's easy to transmit in a JSON body.

Frontend (Angular) Example:

// Assume you have your full UI content (HTML + inline styles + Bootstrap CSS) as a string
const uiContent = `
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
  <style>/* Your custom styles here */</style>
</head>
<body>/* Your UI HTML here */</body>
</html>
`;

// Encode to Base64
const encodedContent = btoa(unescape(encodeURIComponent(uiContent)));

// Send to API via POST
this.http.post('/api/generate-pdf', { content: encodedContent }).subscribe(...);

Backend (Node.js/Express) Example:

const express = require('express');
const app = express();
app.use(express.json());

app.post('/api/generate-pdf', (req, res) => {
  const encodedContent = req.body.content;
  // Decode Base64 back to HTML/CSS
  const decodedContent = decodeURIComponent(escape(atob(encodedContent)));
  
  // Use html-pdf to generate PDF with decodedContent
  // ... your existing pdf generation code here ...
});

2. Multipart Form Data (Ideal for Large Content or Attached Resources) #

If your UI content is large, or if you need to include additional assets (like images referenced in the HTML), using multipart form data is a better fit. It lets you send the HTML/CSS as a separate field (or even a text file) alongside other data.

Frontend (Angular) Example:

const formData = new FormData();
formData.append('uiContent', uiContent); // Your full HTML/CSS string
// If you have images, you can append them too: formData.append('logo', logoFile);

this.http.post('/api/generate-pdf', formData).subscribe(...);

Backend (Node.js/Express) Example (using multer):

const multer = require('multer');
const upload = multer(); // No disk storage needed, keep in memory

app.post('/api/generate-pdf', upload.none(), (req, res) => {
  const uiContent = req.body.uiContent;
  // Proceed with pdf generation using uiContent
  // ...
});

3. Encrypted Payloads (For Sensitive UI Content) #

If your UI content includes sensitive data (like user-specific information, financial details), you should add an extra layer of encryption on top of HTTPS. Use a symmetric encryption algorithm like AES to encrypt the content on the frontend, then decrypt it on the backend.

Frontend (Angular) Example (using crypto-js):

import CryptoJS from 'crypto-js';

const secretKey = 'your-strong-secret-key-store-securely-not-in-code'; // Use environment variables!
const encryptedContent = CryptoJS.AES.encrypt(uiContent, secretKey).toString();

this.http.post('/api/generate-pdf', { encryptedContent }).subscribe(...);

Backend (Node.js) Example:

const CryptoJS = require('crypto-js');

app.post('/api/generate-pdf', (req, res) => {
  const encryptedContent = req.body.encryptedContent;
  const secretKey = 'your-strong-secret-key-same-as-frontend'; // Store in env vars!
  const bytes = CryptoJS.AES.decrypt(encryptedContent, secretKey);
  const uiContent = bytes.toString(CryptoJS.enc.Utf8);
  
  // Generate PDF...
});

Critical Best Practices to Add #

• Always Use HTTPS: This is non-negotiable—all data in transit should be encrypted to prevent man-in-the-middle attacks.
• Validate and Sanitize Input: Use a library like DOMPurify on the backend to sanitize the incoming HTML/CSS. This prevents XSS attacks that could execute malicious code during PDF generation.

  const DOMPurify = require('dompurify');
  const { JSDOM } = require('jsdom');
  const window = new JSDOM('').window;
  const purify = DOMPurify(window);
  const sanitizedContent = purify.sanitize(decodedContent);
  

• Limit Payload Size: Add middleware to your Node.js API to restrict the maximum size of incoming requests, preventing abuse or DoS attacks.
• Store Secrets Securely: Never hardcode encryption keys or API secrets—use environment variables (like dotenv in Node.js) to keep them safe.

Since your second question wasn't fully included, feel free to share more details about what you're looking to tackle next, and I can help out with that too!

内容的提问来源于stack exchange，提问作者Satheesh