feat: support inject .js file

Author: magicdawn

package.json

@@ -39,13 +39,15 @@
     "cheerio": "^1.0.0-rc.12",
     "clipanion": "^3.2.1",
     "consola": "^3.2.3",
+    "csp-dev": "^1.0.2",
     "debug": "^4.3.5",
     "dl-vampire": "^2.1.1",
     "env-paths": "3",
     "esm-utils": "^4.3.0",
     "fs-extra": "^11.2.0",
     "inquirer": "^9.3.3",
     "less": "^4.2.0",
+    "log-symbols": "^6.0.0",
     "promise.map": "^0.5.0",
     "proxy-agent": "^6.4.0",
     "sass": "^1.77.6",
@@ -56,6 +58,7 @@
     "@magicdawn/prettier-config": "^0.0.4",
     "@swc/core": "^1.6.7",
     "@swc/helpers": "^0.5.11",
+    "@types/csp-dev": "^1.0.3",
     "@types/debug": "^4.1.12",
     "@types/fs-extra": "^11.0.4",
     "@types/inquirer": "^9.0.7",

pnpm-lock.yaml

@@ -1,5 +1,6 @@
-import cheerio, { CheerioAPI } from 'cheerio'
+import { CheerioAPI, load as cheerioLoad } from 'cheerio'
 import consola from 'consola'
+import ContentSecurityPolicy, { type DirectiveDescriptor } from 'csp-dev'
 import debugFactory from 'debug'
 import fse from 'fs-extra'
 import path from 'path'
@@ -24,7 +25,7 @@ export async function prepare() {
   }
 
   const htmlContent = fse.readFileSync(HTML_FILE, 'utf-8')
-  const $ = cheerio.load(htmlContent, { decodeEntities: false })
+  const $ = cheerioLoad(htmlContent, { decodeEntities: false })
   return $
 }
 
@@ -40,6 +41,33 @@ export function save($: CheerioAPI) {
 export async function applyData() {
   const $ = await prepare()
 
+  // <meta http-equiv="Content-Security-Policy" content="
+  {
+    const cspMeta = $(`meta[http-equiv="Content-Security-Policy"]`)
+    const cspContent = cspMeta.attr('content')
+
+    // csp-dev 没有 trim, 包含很多 `\t\t`
+    const fixJson = (json: DirectiveDescriptor) => {
+      Object.keys(json).forEach((key) => {
+        const value = json[key] as string[]
+        json[key] = value.map((x) => x.trim())
+      })
+      return json
+    }
+
+    debugger
+    const cspModel = new ContentSecurityPolicy(cspContent)
+    const parsed = fixJson(cspModel.share('json'))
+
+    if (!parsed['script-src']?.includes(`'unsafe-inline'`)) {
+      parsed['script-src'] = [...(parsed['script-src'] || []), `'unsafe-inline'`]
+      const newModel = new ContentSecurityPolicy()
+      newModel.load(parsed)
+      const cspContentNew = newModel.share('string')
+      cspMeta.attr('content', cspContentNew)
+    }
+  }
+
   // remove all existing tags
   $(`[${DATA_ATTR_NAME}]`).remove()
 
@@ -50,17 +78,17 @@ export async function applyData() {
       const content = await getContent(file)
       return { file, content }
     },
-    5
+    5,
   )
 
   debug(
     'after filter out disabled: %O',
-    listData.map((x) => x.file)
+    listData.map((x) => x.file),
   )
 
   // create new tags
   for (let { file, content } of listData) {
-    const ext = path.extname(file)
+    const ext = path.extname(file).slice(1)
     const tagName = ext === 'js' ? 'script' : 'style'
     const tag = `\n<${tagName} ${DATA_ATTR_NAME}='${file}'>\n${content}\n</${tagName}>\n`
     $('html').append(tag)

src/commands/common.ts

@@ -1,4 +1,4 @@
-import { Command, Usage } from 'clipanion'
+import { Command, Option, Usage } from 'clipanion'
 import inquirer from 'inquirer'
 import { AddedAsset, CURRENT_ASSETS, write } from '../data'
 import { applyData } from './common'
@@ -11,7 +11,19 @@ export class ListCommand extends Command {
     description: 'manage added files',
   }
 
+  interactive = Option.Boolean('-i,--interactive', false, {
+    description: 'list & slect with an interactive prompt',
+  })
+
   async execute() {
+    if (this.interactive) {
+      return this.interactiveSelect()
+    } else {
+      return this.normalList()
+    }
+  }
+
+  interactiveSelect = async () => {
     const { selectedIndex } = await inquirer.prompt([
       {
         type: 'checkbox',
@@ -30,4 +42,17 @@ export class ListCommand extends Command {
 
     await applyData()
   }
+
+  normalList = async () => {
+    console.log('')
+    console.log('Current added files: (✅ enabled, 🟩 disabled)')
+    console.log('')
+
+    const msgs = CURRENT_ASSETS.map((item) => {
+      // const symbol = item.disabled ? logSymbols.success : logSymbols.error
+      const symbol = item.disabled ? '✅' : '🟩'
+      return `${symbol} ${item.file}`
+    })
+    console.log(msgs.join('\n'))
+  }
 }