CSP Violation
sheremet-va opened this issue · 9 comments
This package is inlining css, which violates my CSP rules (default-src 'self'). I know I can enable unsafe-inline but this is unsafe and kinda defeats the purpose.
Is it possible to bundle this package in some other way?
Sorry for the late reply.
I have released v1.2.2, which may fix this issue.
I extract css to dist/external-css/vue-easy-lightbox.css. And .js in this directory(dist/external-css/*.js) do not contain inlining css.
// in this path vue-easy-lightbox/dist/external-css/*.js
import VueEasyLightbox from 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.es5.esm.min.js'
// you need to import css yourself
import 'vue-easy-lightbox/external-css/vue-easy-lightbox.css' Hey! Thank you very much for the clean fix!
Importing in typescript works, but typechecking gives me this error:
(importing css doesn't give me any errors)
For now I fixed it locally with:
declare module 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.es5.common.min.js';
But I think vue-easy-lightbox should support it - since the package has types/index.d.ts , TypeScript support is expected.
I did a search. But haven't found how to add d.ts for named module path dist/*.js yet.
As you mentioned, add d.ts locally is one way:
declare module 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.es5.common.min' {
import VueEasyLightbox from 'vue-easy-lightbox'
export default VueEasyLightbox
}The other way, if you're using webpack:
https://webpack.js.org/configuration/resolve/#resolvealias
// wepback.config.js
module.exports = {
//...
resolve: {
alias: {
'vue-easy-lightbox$': 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.es5.common.min.js',
},
},
};
// in your component
import VueEasyLightbox from 'vue-easy-lightbox' // workThank you for your advice with aliasing. Will do that.
I think it can be added to the docs.
Yes, docs updated.
https://onycat.com/vue-easy-lightbox/guide/#external-css-build-1-2-3
Thank you! Closing the issue now
Hi @XiongAmao are external-css builds available for vue2 component or only vue3? thanks
@ekrausso
Hi, it is released in v0.19.0.
@XiongAmao great!! thanks :)