From a4a2325d3d1effab4997a0ee3b38f15420285e8d Mon Sep 17 00:00:00 2001
From: Yuva <94527987+yuvashrikarunakaran@users.noreply.github.com>
Date: Fri, 20 Dec 2024 21:38:03 +0530
Subject: [PATCH] Update add_sri.js

This script is well-designed for processing HTML files to add Subresource Integrity (SRI) attributes and crossorigin attributes to CSS/JS imports
---
 frontend-bundler/add_sri.js | 68 +++++++++++++++++++++----------------
 1 file changed, 39 insertions(+), 29 deletions(-)

diff --git a/frontend-bundler/add_sri.js b/frontend-bundler/add_sri.js
index 1cbb85baff..ba44e4065d 100644
--- a/frontend-bundler/add_sri.js
+++ b/frontend-bundler/add_sri.js
@@ -1,37 +1,47 @@
-// Go through all the CSS/JS imports in an HTML file, and add SRI attributes. More info here:
-// https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity#examples
+ const path = require("path");
+const fs = require("fs/promises");
+const posthtml = require("posthtml");
+const posthtmlSri = require("posthtml-sri");
+const posthtmlCrossorigin = require("@plutojl/posthtml-crossorigin");
 
-// I really really tried to do this using a parcel plugin but it's "not possible". So right now this is just a separate script that you run with the html filenames as arguments.
-
-let path = require("path")
-let fs = require("fs/promises")
-let posthtml = require("posthtml")
-let posthtmlSri = require("posthtml-sri")
-let posthtmlCrossorigin = require("@plutojl/posthtml-crossorigin")
+// Main function to process HTML files
+const processHtmlFiles = async () => {
+    // Check if arguments are provided
+    if (process.argv.length < 3) {
+        console.error("❌ Please provide at least one HTML file as an argument.");
+        process.exit(1);
+    }
 
-let f = async () => {
-    // Read file given as command line arugment
     for (let i = 2; i < process.argv.length; i++) {
-        let file = process.argv[i]
-        let contents = await fs.readFile(file, "utf8")
+        const file = process.argv[i];
+
+        try {
+            console.log(`🔄 Processing: ${file}`);
+            // Read the HTML file
+            const contents = await fs.readFile(file, "utf8");
 
-        const plugins = [
-            posthtmlSri({
-                algorithms: ["sha384"],
-                basePath: path.dirname(file),
-            }),
-            posthtmlCrossorigin({
-                value: () => "anonymous",
-            }),
-        ]
+            // Configure plugins for SRI and crossorigin attributes
+            const plugins = [
+                posthtmlSri({
+                    algorithms: ["sha384"], // Recommended SRI algorithm
+                    basePath: path.dirname(file),
+                }),
+                posthtmlCrossorigin({
+                    value: () => "anonymous", // Set crossorigin="anonymous"
+                }),
+            ];
 
-        const result = await posthtml(plugins).process(contents)
-        // console.log(result)
+            // Process the file using PostHTML and plugins
+            const result = await posthtml(plugins).process(contents);
 
-        // Write to file
-        await fs.writeFile(file, result.html)
-        console.log("✅ SRI added to ", file)
+            // Write the modified HTML back to the file
+            await fs.writeFile(file, result.html, "utf8");
+            console.log(`✅ SRI and crossorigin added to: ${file}`);
+        } catch (error) {
+            console.error(`❌ Error processing ${file}:`, error.message);
+        }
     }
-}
+};
 
-f()
+// Execute the function
+processHtmlFiles();