I have a vue project that use CDN to getting it libs for running. Now I want to add a integrity property on the script label to verify the script it pull from CDN. And I want the code automatic generate the hash of script and insert is to the dist when i build the project.
I want a some sync function like this:
function integrityWapper ({ css, js }) {
const hash = require('crypto-js').SHA384
const icss = []; const ijs = []
for (const i in css) {
icss.push([css[i], hash(GettingScriptContentFromWeb(css[i]))])
}
for (const i in js) {
ijs.push([js[i], hash(GettingScriptContentFromWeb(js[i]))])
}
return { icss, ijs }
}
Obviously, this function cannot be async cause i am trying to generate config for vue.config.js, so the GettingScriptContentFromWeb function must also be sync.
Is there a way turn call async function(i mean axios.get) in sync function and wait it to finish?
Update:
No, i can't just rewrite the upstream cause i need export the result in vue.config.js, this is some code i currently use:
** vue.config.js **
module.exports = defineConfig({
integrity: true,
pages: {
index: {
entry: 'src/main.ts',
template: 'public/index.html',
filename: 'index.html',
CDN: cdnConfig.use ? cdnConfig.list : null
}
}
})
//cdnConfig.list is like this:
list: {
css: [
[
'https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.13/index.css',
'sha384-WdBufJjVUMBy2e6mTgtUbbYZvZg7vdYW3ijXdfg4jglZAehE17bPFaxNMhFXuH1Z'
]
],
js: [
[
'https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.prod.min.js',
'sha384-MB7auY3xTNj+3Hk53DrKFyXN7Djh50mLDesxCDPr4XENv8gK06a3RqhmkXBfcPFh'
]
]
}
Or can somebody tell me how can i rewrite the part that vue and webpack read these config?
Should i just write this script in a other file and i run it before vue-cli-service build in npm run build, or i try to use package like deasync or sync-kit?