3 |
5 |
6 |
7 |
16 |
--------------------------------------------------------------------------------
/playground/src/main.js:
--------------------------------------------------------------------------------
1 | import { createPinia } from 'pinia'
2 |
3 | import { createApp } from 'vue'
4 | import App from './App.vue'
5 |
6 | import router from './router'
7 | import './assets/main.css'
8 |
9 | const app = createApp(App)
10 |
11 | app.use(createPinia())
12 | app.use(router)
13 |
14 | app.mount('#app')
15 |
--------------------------------------------------------------------------------
/playground/src/components/icons/IconSupport.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2017",
4 | "lib": ["esnext", "DOM"],
5 | "module": "esnext",
6 | "moduleResolution": "node",
7 | "resolveJsonModule": true,
8 | "strict": true,
9 | "strictNullChecks": true,
10 | "esModuleInterop": true
11 | },
12 | "exclude": ["dist", "eslint.config.js"]
13 | }
14 |
--------------------------------------------------------------------------------
/src/astro.ts:
--------------------------------------------------------------------------------
1 | import type { Options } from './types'
2 |
3 | import unplugin from '.'
4 |
5 | export default (options: Options): any => ({
6 | name: 'unplugin-sri',
7 | hooks: {
8 | 'astro:config:setup': async (astro: any) => {
9 | astro.config.vite.plugins ||= []
10 | astro.config.vite.plugins.push(unplugin.vite(options))
11 | },
12 | },
13 | })
14 |
--------------------------------------------------------------------------------
/playground/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | This is an about page
4 |
12 |
21 |
22 |
23 |
47 |
--------------------------------------------------------------------------------
/playground/src/components/icons/IconTooling.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
19 |
20 |
--------------------------------------------------------------------------------
/playground/src/components/icons/IconCommunity.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Anthony Fu 13 | {{ msg }} 14 |
15 |16 | You’ve successfully created a project with 17 | Vite + 18 | Vue 3. 19 |
20 |
3 |
4 |
13 |
14 |
15 |
87 |
--------------------------------------------------------------------------------
/playground/src/App.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
7 |
8 |
10 |
12 |
8 |
10 | 
9 |
10 |
11 |
22 | 48 | 49 | More instructions are available in 50 |
README.md.
51 |
26 |
42 |
43 | Vite
27 | 28 | ```js 29 | import SRI from 'unplugin-sri/vite' 30 | // vite.config.js 31 | import { defineConfig } from 'vite' 32 | 33 | export default defineConfig({ 34 | plugins: [ 35 | SRI({ 36 | // options 37 | }), 38 | ], 39 | }) 40 | ``` 41 |
44 |
57 |
58 | Webpack
45 | 46 | ```js 47 | // webpack.config.js 48 | module.exports = { 49 | plugins: [ 50 | require('unplugin-sri/webpack')({ 51 | // options 52 | }), 53 | ], 54 | } 55 | ``` 56 |
59 |
74 |
75 | Rollup
60 | 61 | ```js 62 | // rollup.config.js 63 | import SRI from 'unplugin-sri/rollup' 64 | 65 | export default { 66 | plugins: [ 67 | SRI({ 68 | // options 69 | }), 70 | ], 71 | } 72 | ``` 73 |
76 |
92 |
93 | esbuild
77 | 78 | ```js 79 | // esbuild.config.js 80 | import { build } from 'esbuild' 81 | import SRI from 'unplugin-sri/esbuild' 82 | 83 | build({ 84 | plugins: [ 85 | SRI({ 86 | // options 87 | }), 88 | ], 89 | }) 90 | ``` 91 |
94 |
107 |
108 | Nuxt
95 | 96 | ```js 97 | // nuxt.config.js 98 | export default { 99 | buildModules: [ 100 | ['unplugin-sri/nuxt', { 101 | // options 102 | }], 103 | ], 104 | } 105 | ``` 106 |
109 |
124 |
125 | ## Options
126 | ```typescript
127 | interface Options {
128 | /**
129 | * Hash algorithm to use for SRI
130 | * @default 'sha384'
131 | */
132 | algorithm?: string
133 |
134 | /**
135 | * File extensions to process
136 | * @default ['.js', '.css']
137 | */
138 | extensions?: string[]
139 |
140 | /**
141 | * Whether to include image files
142 | * @default false
143 | */
144 | includeImages?: boolean
145 |
146 | /**
147 | * Callback function to execute when processing is complete
148 | */
149 | onComplete?: () => void
150 | }
151 | ```
152 | ## How It Works
153 |
154 | The plugin works by:
155 |
156 | 1. Waiting for the build process to complete
157 | 2. Finding all HTML files in the output directory (defaults to `dist`)
158 | 3. Processing each HTML file to:
159 | - Find all `
179 | ```
180 |
181 | After:
182 | ```html
183 |
184 |
185 | ```
186 |
187 | ## License
188 |
189 | [MIT](./LICENSE)
190 |
--------------------------------------------------------------------------------
/src/test.js:
--------------------------------------------------------------------------------
1 | import { createHash } from 'node:crypto'
2 | import fs from 'node:fs'
3 | import path from 'node:path'
4 |
5 | // createHash('sha384').update('filecontent').digest('base64')
6 | /**
7 | * 生成子资源完整性验证的 Vite 插件
8 | * @param {object} options 插件配置选项
9 | * @param {string[]} options.algorithms 哈希算法，默认为 ['sha384']
10 | * @param {string[]} options.extensions 需要处理的文件扩展名，默认为 ['.js', '.css']
11 | * @param {boolean} options.includeImages 是否包含图片文件，默认为 false
12 | * @returns {import('vite').Plugin}
13 | */
14 | export default function vitePluginSRI(options = {}) {
15 | const {
16 | algorithms = ['sha384'],
17 | extensions = ['.js', '.css'],
18 | includeImages = false,
19 | } = options
20 |
21 | // 图片扩展名
22 | const imageExtensions = includeImages ? ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'] : []
23 | const allExtensions = [...extensions, ...imageExtensions]
24 |
25 | return {
26 | name: 'vite-plugin-sri',
27 | apply: 'build',
28 | enforce: 'post',
29 |
30 | // 在构建完成后执行
31 | closeBundle: async () => {
32 | const outDir = path.resolve(process.cwd(), 'dist')
33 |
34 | // 查找所有 HTML 文件
35 | const htmlFiles = findFiles(outDir, ['.html'])
36 |
37 | for (const htmlFile of htmlFiles) {
38 | let htmlContent = fs.readFileSync(htmlFile, 'utf-8')
39 |
40 | // 处理 script 标签
41 | htmlContent = processScriptTags(htmlContent, outDir, algorithms, allExtensions)
42 |
43 | // 处理 link 标签 (CSS)
44 | htmlContent = processLinkTags(htmlContent, outDir, algorithms, allExtensions)
45 |
46 | // 写回文件
47 | fs.writeFileSync(htmlFile, htmlContent, 'utf-8')
48 |
49 | console.log(`${htmlFile} 处理完成, 生成 integrity 值: ${generateIntegrity(htmlFile, algorithms)}`)
50 | // html文件存数据库，每分钟获取一次官网的html文件，计算integrity和数据库对比
51 | // 不一致直接群里发通知or邮件预警
52 | // 用本地文件模拟数据库
53 | fs.writeFileSync('./sri', generateIntegrity(htmlFile, algorithms), 'utf-8')
54 | }
55 | },
56 | }
57 | }
58 |
59 | /**
60 | * 查找指定目录下的所有符合扩展名的文件
61 | * @param {string} dir 目录路径
62 | * @param {string[]} extensions 文件扩展名
63 | * @returns {string[]} 文件路径列表
64 | */
65 | function findFiles(dir, extensions) {
66 | let results = []
67 | const list = fs.readdirSync(dir)
68 |
69 | for (const file of list) {
70 | const filePath = path.join(dir, file)
71 | const stat = fs.statSync(filePath)
72 |
73 | if (stat.isDirectory()) {
74 | results = results.concat(findFiles(filePath, extensions))
75 | }
76 | else {
77 | const ext = path.extname(file).toLowerCase()
78 | if (extensions.includes(ext)) {
79 | results.push(filePath)
80 | }
81 | }
82 | }
83 |
84 | return results
85 | }
86 |
87 | /**
88 | * 处理 HTML 中的 script 标签
89 | * @param {string} htmlContent HTML 内容
90 | * @param {string} outDir 输出目录
91 | * @param {string[]} algorithms 哈希算法
92 | * @param {string[]} extensions 文件扩展名
93 | * @returns {string} 处理后的 HTML 内容
94 | */
95 | function processScriptTags(htmlContent, outDir, algorithms, extensions) {
96 | const scriptRegex = /