demo code

Author: cyfung1031

src/app/service/service_worker/script.ts

@@ -47,6 +47,7 @@ import { getSimilarityScore, ScriptUpdateCheck } from "./script_update_check";
 import { LocalStorageDAO } from "@App/app/repo/localStorage";
 import { CompiledResourceDAO } from "@App/app/repo/resource";
 import { initRegularUpdateCheck } from "./regular_updatecheck";
+import { createNoCSPRules } from "@App/pkg/utils/dnr";
 
 export type TCheckScriptUpdateOption = Partial<
   { checkType: "user"; noUpdateCheck?: number } | ({ checkType: "system" } & Record<string, any>)
@@ -316,32 +317,7 @@ export class ScriptService {
 
     {
       type Config = Record<string, any>;
-      const REMOVE_HEADERS = [
-        `content-security-policy`,
-        `content-security-policy-report-only`,
-        `x-webkit-csp`,
-        `x-content-security-policy`,
-        `x-frame-options`,
-      ];
-
-      const { RuleActionType, HeaderOperation, ResourceType } = chrome.declarativeNetRequest;
-
-      const rules: chrome.declarativeNetRequest.Rule[] = [
-        {
-          id: 2001,
-          action: {
-            type: RuleActionType.MODIFY_HEADERS,
-            responseHeaders: REMOVE_HEADERS.map((header) => ({
-              operation: HeaderOperation.REMOVE,
-              header,
-            })),
-          },
-          condition: {
-            urlFilter: `|http*`,
-            resourceTypes: [ResourceType.MAIN_FRAME, ResourceType.SUB_FRAME],
-          },
-        },
-      ];
+      const rules = createNoCSPRules([`|http*`]);
 
       const updateRules = (newConfig: Config, oldConfig?: Config) => {
         if (oldConfig && newConfig.csp_http_disabled === oldConfig?.csp_http_disabled) {

src/pkg/utils/dnr.ts

@@ -44,3 +44,34 @@ export const convertDomainToDNRUrlFilter = (text: string) => {
   }
   return ret;
 };
+
+export const createNoCSPRules = (urlFilters: string[]) => {
+  const REMOVE_HEADERS = [
+    `content-security-policy`,
+    `content-security-policy-report-only`,
+    `x-webkit-csp`,
+    `x-content-security-policy`,
+    `x-frame-options`,
+  ];
+  const { RuleActionType, HeaderOperation, ResourceType } = chrome.declarativeNetRequest;
+  if (urlFilters.length > 512) {
+    throw new Error(`Too many URL patterns (${urlFilters.length}). Max is 512.`);
+  }
+  const rules: chrome.declarativeNetRequest.Rule[] = urlFilters.map((urlFilter, index) => {
+    return {
+      id: 2001 + index,
+      action: {
+        type: RuleActionType.MODIFY_HEADERS,
+        responseHeaders: REMOVE_HEADERS.map((header) => ({
+          operation: HeaderOperation.REMOVE,
+          header,
+        })),
+      },
+      condition: {
+        urlFilter: urlFilter,
+        resourceTypes: [ResourceType.MAIN_FRAME, ResourceType.SUB_FRAME],
+      },
+    } satisfies chrome.declarativeNetRequest.Rule;
+  });
+  return rules;
+};