AfterPack
Markdown में देखें

webpack build को obfuscate करें

@afterpack/webpack, compilation.hooks.processAssets पर tap करता है और webpack के लिखने से पहले आपके assets को obfuscate करता है।

@afterpack/webpack एक webpack 5 plugin है: apply(compiler) वाली एक class। यह minification से पहले आपके source से @afterpack directives पढ़ता है, फिर compilation.hooks.processAssets पर, webpack के content-hashed नाम तय करने के ठीक बाद और लिखने से पहले, engine चलाता है।

हर asset के bytes compilation से पढ़े जाते हैं और obfuscated replacement उसे वापस सौंप दिया जाता है, इसलिए webpack आपका unobfuscated bundle कभी नहीं लिखता। विफल obfuscation output directory को वैसा ही छोड़ देता है जैसी वह थी।

Install

$ npm install -D @afterpack/webpack
// webpack.config.js
import { AfterpackWebpackPlugin } from "@afterpack/webpack";

export default {
  mode: "production",
  output: { path: "dist" },
  plugins: [new AfterpackWebpackPlugin()],
};

Export AfterpackWebpackPlugin class है।

Build

Plugin webpack के content-hashing stage के ठीक बाद compilation.hooks.processAssets पर tap करता है। हर chunk का नाम उसके obfuscated bytes के साथ चलता है। केवल वे .js, .mjs और .cjs assets फिर से लिखे जाते हैं जिन पर compilation का कोई chunk दावा करता है; .hot-update. chunks छोड़ दिए जाते हैं। ऐसा asset जिसे compiler साथ रखता है पर जिसे उसने build नहीं किया, जैसे किसी दूसरे plugin द्वारा emit किया गया manifest या copy की गई फ़ाइल, अछूता छोड़ दिया जाता है।

Compression plugins बाद के stage पर चलते हैं, इसलिए वे obfuscated bytes को compress करते हैं।

processAssets हर compilation पर चलता है, watch mode के rebuilds समेत, और हर rebuild engine की लागत चुकाता है। Dev loop के लिए build.autorun: false (या AFTERPACK_build_autorun=false) सेट करें और production builds के लिए इसे चालू रखें।

Verify

Protection Map डिफ़ॉल्ट रूप से तब लिखा जाता है जब devtool source map बनाए और build CI (CI=true या CI=1) में न चल रही हो; production build mode इसे बंद नहीं करता। Production webpack build में डिफ़ॉल्ट रूप से कोई devtool नहीं होता, इसलिए map बंद रहता है। इसे स्पष्ट रूप से माँगें:

new AfterpackWebpackPlugin({ protectionMap: { enabled: true } });

Map का default bundler sourcemap की मौजूदगी से जुड़ा है, इसलिए अगर आप चाहते हैं कि यह आपका मूल source render करे, तो devtool: "source-map" सेट करें। उसके बिना, plugin चेतावनी देता है कि उसे कोई bundler source map नहीं मिला। लिखे जाने पर map gitignored .afterpack/protectionMap.html में जाता है, कभी dist/ में नहीं। इसमें आपका पूरा source होता है। इसे कभी commit या serve न करें।

entitlements.jslight · complexity 5Open full size
entitlements.js, 54 lines, built at the light preset with a directive around the signature check. Click any token to see what was applied to it.

Options

हर configuration key यहाँ options object के रूप में दी जा सकती है, उदाहरण के लिए new AfterpackWebpackPlugin({ preset: "hard", complexity: 40 })। Names @afterpack/vite और @afterpack/next से हूबहू मेल खाते हैं, इसलिए config packages के बीच portable है।

Directives

Directives एक Pro feature हैं। Free build में protection बढ़ाने वाला directive build को DIAG_PRO_DIRECTIVE_REQUIRES_KEY के साथ रोक देता है।

Plugin directives को आपके source से पढ़ता है।

/* @afterpack preset=hard */
function verifyLicense(token) {
  // ...
}
/* @afterpack end */

Directives केवल block comments होते हैं: // @afterpack … line comment scan नहीं होता और एक diagnostic के रूप में सामने आता है। पूरी grammar Directives पेज पर है।

Capture node_modules और non-JS/TS modules को छोड़ देता है। Scan को पूरी तरह छोड़ने के लिए directives.enabled: false सेट करें; हाथ से लिखे regions दोनों हालात में काम करते हैं।

Edge cases

  • Vendored code। webpack node_modules को आपके chunks में साथ bundle करता है, इसलिए कोई output-filename pattern नहीं है जो उन्हें अलग करे। AfterPack emit की गई फ़ाइलों पर समग्र रूप से काम करता है; ज़रूरत पड़ने पर paths.exclude फ़ाइल-स्तर पर अलग करने का तरीका है।
  • webpack-subresource-integrity अस्वीकार है। उसके integrity attributes obfuscated chunks से मेल नहीं खाएँगे। उसे हटाएँ, और build के बाद emit की गई फ़ाइलों से integrity compute करें।
  • Fail-closed, बिना किसी override के। विफल फ़ाइल या खाली result unobfuscated code ship करने के बजाय build को विफल कर देता है।

आगे

  • Frameworks: पूरी matrix।
  • Vite: reference integration और options का पूरा अर्थ।
  • Configuration: ऊपर का हर option, और कौन-सी surface उसे सेट कर सकती है।
  • Directives: पूरी marker grammar।
  • Presets: वह सीढ़ी जिसके विरुद्ध preset resolve होता है।
  • Builds और CI: seeds, dev-बनाम-prod, वही bytes promote करना।
  • Protection Map: रिपोर्ट को पढ़ना।