एक Remix app को obfuscate करें

Install

Remix का अपना plugin आपकी vite.config.ts के अंदर चलता है, इसलिए @afterpack/vite उसी plugins array में, उसके बाद आता है:

$ npm install -D @afterpack/vite

// vite.config.ts
import { defineConfig } from "vite";
import { vitePlugin as remix } from "@remix-run/dev";
import { afterpackVite } from "@afterpack/vite";

export default defineConfig({
  plugins: [remix(), afterpackVite()],
});

या package को छोड़ दें और उसकी जगह build output पर CLI चलाएँ।

Build

Plugin generateBundle पर चलता है और Vite के bundle लिखने से पहले उसके हर JavaScript chunk को obfuscate करता है। Remix client और server legs को अलग-अलग Vite builds के रूप में build करता है, इसलिए plugin हर leg के लिए एक बार चलता है, केवल उस leg के bundle पर। अगर दोनों legs साथ ship होते हैं और आप चाहते हैं कि वे एक ही seed से build हों, तो एक seed pin करें (seed: "git" सबसे आसान है)। Builds और CI इस trade-off को कवर करता है।

CLI से build करना भी इसी तरह काम करता है: पहले build करें, फिर AfterPack को हर output directory पर point करें। Remix की Vite build आमतौर पर build/client और build/server लिखती है:

$ npx afterpack@latest build/client --seed=git

Directory का नाम path argument के रूप में दें: न दें, तो CLI dist/, build/, out/, .output/ और .next/ में से सबसे नई चुनता है, जो आप नहीं चाहते जब client और server builds अलग-अलग obfuscate किए जाते हैं। यह traverse करने के लिए एक directory लेता है, या एक अकेली .js/.mjs/.cjs फ़ाइल। हर उस directory के लिए इसे एक बार चलाएँ जिसे आप obfuscate करना चाहते हैं, और जब दोनों साथ ship हों तो दोनों पर एक ही --seed रखें। दोनों रास्ते एक ही shared pass को call करते हैं, इसलिए बाकी सब कुछ (preset ladder, fail-closed व्यवहार, artifacts) एक जैसा है।

Verify

Protection Map डिफ़ॉल्ट रूप से तब लिखा जाता है जब Vite source map emit करे और build CI (CI=true या CI=1) में न चल रही हो; build mode इसे बंद नहीं करता। जब तक build.sourcemap सेट न हो, Vite कोई source map emit नहीं करता, इसलिए जिस build को आप जाँचना चाहते हैं, उसे source maps चालू करके build करें, फिर gitignored .afterpack/protectionMap.html खोलें। इसमें आपका पूरा source होता है। इसे कभी commit या serve न करें।

Options

हर configuration key इस plugin के ज़रिए वैसे ही काम करती है जैसे Vite पेज पर, directive capture सहित; हर key के लिए Configuration देखें।

Directives

Directives को plugin आपके source से पढ़ता है। CLI उन्हें तब पढ़ता है जब उसके input के साथ source map हो। देखें Directives।

Edge cases

• Fail-closed, कोई override नहीं। एक error/critical diagnostic, एक खाली result, या ऐसी फ़ाइल जिसे engine obfuscate नहीं कर सका, build को fail कर देती है।
• Server output बस JavaScript है। AfterPack उस directory में मिलने वाली हर .js को obfuscate करता है जिस पर आप उसे point करते हैं।

आगे

• Frameworks: पूरी matrix।
• Vite: वह plugin जिसकी यह पेज सिफ़ारिश करता है।
• CLI reference: flags की पूरी सूची।
• Configuration: हर विकल्प, और कौन-सी surface उसे सेट कर सकती है।
• Presets: वह ladder जिसके विरुद्ध preset resolve होता है।
• Builds और CI: seeds, dev बनाम prod, वही bytes promote करना।
• Protection Map: रिपोर्ट पढ़ना।