From b759a04fdbdabc518383f93f886450f9cbbc6273 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= Date: Fri, 10 Jun 2022 10:14:40 +0200 Subject: [PATCH] Vue extract styles + CSP enforce --- app/Http/Middleware/SecureHeaders.php | 5 +- package-lock.json | 72 ++++++++++++++++++- package.json | 4 +- resources/js/components/ScheduleComponent.vue | 2 +- webpack.mix.js | 7 +- 5 files changed, 85 insertions(+), 5 deletions(-) diff --git a/app/Http/Middleware/SecureHeaders.php b/app/Http/Middleware/SecureHeaders.php index c0c4d7f..32f0ab1 100644 --- a/app/Http/Middleware/SecureHeaders.php +++ b/app/Http/Middleware/SecureHeaders.php @@ -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;" ]; diff --git a/package-lock.json b/package-lock.json index 531b56b..3025b67 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 4ae3361..91e4db2 100644 --- a/package.json +++ b/package.json @@ -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" } } diff --git a/resources/js/components/ScheduleComponent.vue b/resources/js/components/ScheduleComponent.vue index ac63247..c32d2b2 100644 --- a/resources/js/components/ScheduleComponent.vue +++ b/resources/js/components/ScheduleComponent.vue @@ -631,7 +631,7 @@ export default { }; -