feat: add content security policy

.env

@@ -3,3 +3,4 @@ APP_CONTEXT='/'
 APP_META_TITLE='Random Name Picker for Lucky Draw'
 APP_META_DESCRIPTION='Simple HTML5 random name picker for picking lucky draw winner using Web Animations and AudioContext API.'
 APP_META_KEYWORDS='lucky draw, lucky draw online, lucky draw app, random name picker, name picker'
+APP_GOOGLE_TAG_MANAGER_ID='GTM-54B6D4G'

package.json

@@ -48,6 +48,7 @@
     "style-loader": "^3.3.4",
     "ts-loader": "^9.5.1",
     "typescript": "^5.3.3",
+    "uuid": "^9.0.1",
     "webpack": "^5.90.0",
     "webpack-bundle-analyzer": "^4.10.1",
     "webpack-cli": "^5.1.4",

src/index.pug

@@ -9,6 +9,9 @@ html(xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en")
     meta(name="format-detection" content="telephone=no, date=no, address=no, email=no")
     meta(name="msapplication-tap-highlight" content="no")
 
+    //- Content Security Policy
+    include ./partials/csp.pug
+
     //- SEO
     include ./partials/seo.pug
 

src/partials/csp.pug

@@ -0,0 +1,248 @@
+-
+  var googleDomains = [
+    "*.google.com",
+    "*.google.ad",
+    "*.google.ae",
+    "*.google.com.af",
+    "*.google.com.ag",
+    "*.google.com.ai",
+    "*.google.al",
+    "*.google.am",
+    "*.google.co.ao",
+    "*.google.com.ar",
+    "*.google.as",
+    "*.google.at",
+    "*.google.com.au",
+    "*.google.az",
+    "*.google.ba",
+    "*.google.com.bd",
+    "*.google.be",
+    "*.google.bf",
+    "*.google.bg",
+    "*.google.com.bh",
+    "*.google.bi",
+    "*.google.bj",
+    "*.google.com.bn",
+    "*.google.com.bo",
+    "*.google.com.br",
+    "*.google.bs",
+    "*.google.bt",
+    "*.google.co.bw",
+    "*.google.by",
+    "*.google.com.bz",
+    "*.google.ca",
+    "*.google.cd",
+    "*.google.cf",
+    "*.google.cg",
+    "*.google.ch",
+    "*.google.ci",
+    "*.google.co.ck",
+    "*.google.cl",
+    "*.google.cm",
+    "*.google.cn",
+    "*.google.com.co",
+    "*.google.co.cr",
+    "*.google.com.cu",
+    "*.google.cv",
+    "*.google.com.cy",
+    "*.google.cz",
+    "*.google.de",
+    "*.google.dj",
+    "*.google.dk",
+    "*.google.dm",
+    "*.google.com.do",
+    "*.google.dz",
+    "*.google.com.ec",
+    "*.google.ee",
+    "*.google.com.eg",
+    "*.google.es",
+    "*.google.com.et",
+    "*.google.fi",
+    "*.google.com.fj",
+    "*.google.fm",
+    "*.google.fr",
+    "*.google.ga",
+    "*.google.ge",
+    "*.google.gg",
+    "*.google.com.gh",
+    "*.google.com.gi",
+    "*.google.gl",
+    "*.google.gm",
+    "*.google.gr",
+    "*.google.com.gt",
+    "*.google.gy",
+    "*.google.com.hk",
+    "*.google.hn",
+    "*.google.hr",
+    "*.google.ht",
+    "*.google.hu",
+    "*.google.co.id",
+    "*.google.ie",
+    "*.google.co.il",
+    "*.google.im",
+    "*.google.co.in",
+    "*.google.iq",
+    "*.google.is",
+    "*.google.it",
+    "*.google.je",
+    "*.google.com.jm",
+    "*.google.jo",
+    "*.google.co.jp",
+    "*.google.co.ke",
+    "*.google.com.kh",
+    "*.google.ki",
+    "*.google.kg",
+    "*.google.co.kr",
+    "*.google.com.kw",
+    "*.google.kz",
+    "*.google.la",
+    "*.google.com.lb",
+    "*.google.li",
+    "*.google.lk",
+    "*.google.co.ls",
+    "*.google.lt",
+    "*.google.lu",
+    "*.google.lv",
+    "*.google.com.ly",
+    "*.google.co.ma",
+    "*.google.md",
+    "*.google.me",
+    "*.google.mg",
+    "*.google.mk",
+    "*.google.ml",
+    "*.google.com.mm",
+    "*.google.mn",
+    "*.google.ms",
+    "*.google.com.mt",
+    "*.google.mu",
+    "*.google.mv",
+    "*.google.mw",
+    "*.google.com.mx",
+    "*.google.com.my",
+    "*.google.co.mz",
+    "*.google.com.na",
+    "*.google.com.ng",
+    "*.google.com.ni",
+    "*.google.ne",
+    "*.google.nl",
+    "*.google.no",
+    "*.google.com.np",
+    "*.google.nr",
+    "*.google.nu",
+    "*.google.co.nz",
+    "*.google.com.om",
+    "*.google.com.pa",
+    "*.google.com.pe",
+    "*.google.com.pg",
+    "*.google.com.ph",
+    "*.google.com.pk",
+    "*.google.pl",
+    "*.google.pn",
+    "*.google.com.pr",
+    "*.google.ps",
+    "*.google.pt",
+    "*.google.com.py",
+    "*.google.com.qa",
+    "*.google.ro",
+    "*.google.ru",
+    "*.google.rw",
+    "*.google.com.sa",
+    "*.google.com.sb",
+    "*.google.sc",
+    "*.google.se",
+    "*.google.com.sg",
+    "*.google.sh",
+    "*.google.si",
+    "*.google.sk",
+    "*.google.com.sl",
+    "*.google.sn",
+    "*.google.so",
+    "*.google.sm",
+    "*.google.sr",
+    "*.google.st",
+    "*.google.com.sv",
+    "*.google.td",
+    "*.google.tg",
+    "*.google.co.th",
+    "*.google.com.tj",
+    "*.google.tl",
+    "*.google.tm",
+    "*.google.tn",
+    "*.google.to",
+    "*.google.com.tr",
+    "*.google.tt",
+    "*.google.com.tw",
+    "*.google.co.tz",
+    "*.google.com.ua",
+    "*.google.co.ug",
+    "*.google.co.uk",
+    "*.google.com.uy",
+    "*.google.co.uz",
+    "*.google.com.vc",
+    "*.google.co.ve",
+    "*.google.vg",
+    "*.google.co.vi",
+    "*.google.com.vn",
+    "*.google.vu",
+    "*.google.ws",
+    "*.google.rs",
+    "*.google.co.za",
+    "*.google.co.zm",
+    "*.google.co.zw",
+    "*.google.cat"
+  ].join(" ");
+
+-
+  var defaultSrc = [
+    "'self'",
+  ].join(" ");
+
+-
+  var scriptSrc = [
+    "'self'",
+    "blob:",
+    "'nonce-%APP_NONCE%'",
+    "www.googletagmanager.com",
+    "*.googletagmanager.com",
+    "www.google-analytics.com",
+    "analytics.google.com"
+  ].join(" ");
+
+-
+  var styleSrc = [
+    "'self'",
+    "'unsafe-inline'",
+    "fonts.googleapis.com"
+  ].join(" ");
+
+-
+  var imgSrc = [
+    "'self'",
+    "data:",
+    "www.googletagmanager.com",
+    "*.google-analytics.com",
+    "*.analytics.google.com",
+    "*.googletagmanager.com",
+    "*.g.doubleclick.net"
+  ].join(" ") + " " + googleDomains;
+
+-
+  var fontSrc = [
+    "'self'",
+    "fonts.gstatic.com"
+  ].join(" ");
+
+-
+  var connectSrc = [
+    "'self'",
+    "*.google-analytics.com",
+    "*.analytics.google.com",
+    "*.googletagmanager.com",
+    "*.g.doubleclick.net",
+  ].join(" ") + " " + googleDomains;
+
+-
+  var frameSrc = [
+  ].join(" ");
+
+meta(http-equiv="Content-Security-Policy" content="default-src " + defaultSrc + "; script-src " + scriptSrc + "; style-src " + styleSrc + "; img-src " + imgSrc + "; font-src " + fontSrc + "; connect-src " + connectSrc + "; frame-src " + frameSrc + ";")

src/partials/gtm-noscript.html

@@ -1,4 +1,4 @@
 <!-- Google Tag Manager (noscript) -->
-<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-54B6D4G"
+<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=%APP_GOOGLE_TAG_MANAGER_ID%"
 height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 <!-- End Google Tag Manager (noscript) -->

src/partials/gtm-script.html

@@ -1,7 +1,7 @@
 <!-- Google Tag Manager -->
-<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+<script nonce="%APP_NONCE%">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-})(window,document,'script','dataLayer','GTM-54B6D4G');</script>
+})(window,document,'script','dataLayer','%APP_GOOGLE_TAG_MANAGER_ID%');</script>
 <!-- End Google Tag Manager -->

webpack/webpack.base.conf.js

@@ -3,6 +3,9 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const HtmlVariablesPlugin = require('html-variables-plugin');
+const { v4: uuidv4 } = require('uuid');
+
+process.env.APP_NONCE = Buffer.from(uuidv4(), 'binary').toString('base64');
 
 module.exports = {
   entry: {

webpack/webpack.dev.conf.js

@@ -17,11 +17,11 @@ const dotenvFiles = [
   path.resolve(__dirname, '../.env')
 ].filter((dotenvFile) => fs.existsSync(dotenvFile));
 
-console.log(`${dotenvFiles[0]} will be used.\n`);
+console.log(`${dotenvFiles} will be used.\n`);
 
 // Load env variables
 dotenv.config({
-  path: dotenvFiles[0]
+  path: dotenvFiles
 });
 
 const clientEnv = getClientEnvironment('development');

webpack/webpack.prod.conf.js

@@ -18,11 +18,11 @@ const dotenvFiles = [
   path.resolve(__dirname, '../.env')
 ].filter((dotenvFile) => fs.existsSync(dotenvFile));
 
-console.log(`${dotenvFiles[0]} will be used.\n`);
+console.log(`${dotenvFiles} will be used.\n`);
 
 // Load env variables
 dotenv.config({
-  path: dotenvFiles[0]
+  path: dotenvFiles
 });
 
 const clientEnv = getClientEnvironment('production');

yarn.lock

@@ -9468,6 +9468,11 @@ uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+uuid@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
+  integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
+
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"