Vue extract styles + CSP enforce

This commit is contained in:
Jérémy Munsch 2022-06-10 10:14:40 +02:00
parent d885ee2f3d
commit b759a04fdb
No known key found for this signature in database
GPG key ID: 18361AF3BFEC0FEC
5 changed files with 85 additions and 5 deletions

View file

@ -43,15 +43,18 @@ class SecureHeaders
$response->headers->set('X-Frame-Options', 'SAMEORIGIN');
$response->headers->set('Strict-Transport-Security', 'max-age=31536000; includeSubDomains;');
$cspPolicies = [
"default-src 'none';",
// * CKEDITOR Specific https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/csp.html
"connect-src 'self';",
"img-src * data:;",
"frame-src *;",
"font-src 'self' https://fonts.gstatic.com;",
// ! reverted since https://github.com/vuejs/vue-style-loader/issues/33
// ! Using CKEditor wiill must have unsafe-inline style
// phpcs:ignore Generic.Files.LineLength.TooLong
"style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;",
// ! If you dont use ckeditor use this
// "style-src 'self' 'nonce-$nonce' https://fonts.googleapis.com;",
// phpcs:ignore Generic.Files.LineLength.TooLong
"script-src 'self' https: $jsDev https://cdnjs.cloudflare.com;"
];

72
package-lock.json generated
View file

@ -15,6 +15,7 @@
"bootstrap": "^5.1.3",
"clean-webpack-plugin": "^4.0.0",
"cross-env": "^7.0",
"css-loader": "^6.7.1",
"del-cli": "^4.0.1",
"glightbox": "^3.2.0",
"laravel-mix": "^6.0.16",
@ -24,12 +25,13 @@
"moment": "^2.29.3",
"resolve-url-loader": "^3.1.0",
"sass": "^1.15.2",
"sass-loader": "^8.0.0",
"sass-loader": "^8.0.2",
"sweetalert2": "^11.4.16",
"toastify-js": "^1.11.2",
"vue": "^2.6.14",
"vue-loader": "^15.9.7",
"vue-select": "^3.13.0",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.6.12"
}
},
@ -3809,6 +3811,47 @@
"postcss": "^8.0.9"
}
},
"node_modules/css-loader": {
"version": "6.7.1",
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz",
"integrity": "sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==",
"dev": true,
"dependencies": {
"icss-utils": "^5.1.0",
"postcss": "^8.4.7",
"postcss-modules-extract-imports": "^3.0.0",
"postcss-modules-local-by-default": "^4.0.0",
"postcss-modules-scope": "^3.0.0",
"postcss-modules-values": "^4.0.0",
"postcss-value-parser": "^4.2.0",
"semver": "^7.3.5"
},
"engines": {
"node": ">= 12.13.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
},
"peerDependencies": {
"webpack": "^5.0.0"
}
},
"node_modules/css-loader/node_modules/semver": {
"version": "7.3.7",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
"integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
"dev": true,
"dependencies": {
"lru-cache": "^6.0.0"
},
"bin": {
"semver": "bin/semver.js"
},
"engines": {
"node": ">=10"
}
},
"node_modules/css-select": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
@ -13591,6 +13634,33 @@
"dev": true,
"requires": {}
},
"css-loader": {
"version": "6.7.1",
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz",
"integrity": "sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==",
"dev": true,
"requires": {
"icss-utils": "^5.1.0",
"postcss": "^8.4.7",
"postcss-modules-extract-imports": "^3.0.0",
"postcss-modules-local-by-default": "^4.0.0",
"postcss-modules-scope": "^3.0.0",
"postcss-modules-values": "^4.0.0",
"postcss-value-parser": "^4.2.0",
"semver": "^7.3.5"
},
"dependencies": {
"semver": {
"version": "7.3.7",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
"integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
"dev": true,
"requires": {
"lru-cache": "^6.0.0"
}
}
}
},
"css-select": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",

View file

@ -21,6 +21,7 @@
"bootstrap": "^5.1.3",
"clean-webpack-plugin": "^4.0.0",
"cross-env": "^7.0",
"css-loader": "^6.7.1",
"del-cli": "^4.0.1",
"glightbox": "^3.2.0",
"laravel-mix": "^6.0.16",
@ -30,12 +31,13 @@
"moment": "^2.29.3",
"resolve-url-loader": "^3.1.0",
"sass": "^1.15.2",
"sass-loader": "^8.0.0",
"sass-loader": "^8.0.2",
"sweetalert2": "^11.4.16",
"toastify-js": "^1.11.2",
"vue": "^2.6.14",
"vue-loader": "^15.9.7",
"vue-select": "^3.13.0",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.6.12"
}
}

View file

@ -631,7 +631,7 @@ export default {
};
</script>
<style lang="scss">
<style lang="scss" scoped>
@import "vue-select/src/scss/vue-select.scss";
.actions_col {

7
webpack.mix.js vendored
View file

@ -50,10 +50,15 @@ mix.clean({
// mix Backend
mix.js('resources/js/app.js', 'public/js')
.vue({
runtimeOnly: true,
extractStyles: true,
globalStyles: false
})
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/bootstrap.scss', 'public/css')
.vue({ runtimeOnly: true })
.polyfill(polyfill)
.sourceMaps(false)
// Copy Blade Images Assets
mix.copyDirectory('resources/assets', 'public/assets')