Feature/strict csp

.gitignore

@@ -1,3 +1,7 @@
+# misc
+.DS_Store
+Thumbs.db
+
 # Logs
 *.log
 
@@ -16,3 +20,9 @@ temp/
 
 *.tgz
 tsconfig.tsbuildinfo
+
+# IntelliJ
+.idea
+
+# VSCode
+.vscode

CONTRIBUTING.md

@@ -101,7 +101,7 @@ npm pkg set pota="../../scripts/webpack/lib/index.js"
 > Example:
 
 ```bash
-npm init pota -- --template templates/vanilla
+npm init @pota -- --template templates/vanilla
 ```
 
 NOTE: [`@pota/create`](core/create-pota) currently does not support project creation with local scripts packages.
@@ -110,7 +110,7 @@ However, these can be easily installed after the project is created (see next se
 > Example:
 
 ```bash
-npm init pota -- --template templates/vanilla --no-scripts
+npm init @pota -- --template templates/vanilla --no-scripts
 ```
 
 ## Known Issues

scripts/react-vite/src/config.ts

@@ -30,7 +30,7 @@ export class ReactViteConfig extends ViteConfig {
       ...(await super.plugins()),
       ...viteReact({
         babel: this.babelConfig,
-      }),
+      })
     ];
   }
 

scripts/vite/package.json

@@ -55,5 +55,8 @@
   },
   "peerDependencies": {
     "@pota/cli": "~2.0.0"
+  },
+  "devDependencies": {
+    "vite-plugin-html": "^3.2.0"
   }
 }

scripts/vite/src/config.ts

@@ -4,6 +4,7 @@ import type { BuildOptions, DevOptions, CommonOptions, PreviewOptions } from './
 
 import { paths } from './paths.js';
 import { injectEntryTagPlugin } from './plugins/inject-entry-tag-plugin.js';
+import { createHtmlPlugin } from 'vite-plugin-html';
 
 export type ViteConfigOptions = CommonOptions &
   Partial<BuildOptions> &
@@ -26,7 +27,16 @@ export class ViteConfig<C extends ViteConfigOptions = ViteConfigOptions> {
   }
 
   public async plugins(): Promise<Array<PluginOption>> {
-    return [injectEntryTagPlugin(this.entry)];
+    return [
+      ...createHtmlPlugin({
+        inject: {
+          data: {
+            isDevelopment: this.isDev,
+          },
+        }
+      }),
+      injectEntryTagPlugin(this.entry),
+    ];
   }
 
   public async final(): Promise<UserConfig> {

templates/muban/README.md

@@ -32,6 +32,13 @@ When adding a new dependency that requires an installation script to run make su
 
 > Important: After running `npm install` or `npm ci` always run `npm run postinstall` afterwards before running other scripts.
 
+### Content Security Policy ([CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP))
+
+This application has been build with a [strict content security policy](https://csp.withgoogle.com/docs/strict-csp.html). To enforce this policy
+add the following CSP header to the request response.
+
+`Content-Security-Policy: script-src 'sha256-+OVgFCkyF2/rZ6qyfsNnIisCRI6dtMZw3w0Y4xiYagw=' 'strict-dynamic' https: 'unsafe-inline'; object-src 'none'; base-uri 'none';`
+
 ## Documentation 📄
 
 Documentation on the `muban-template` and [`muban-webpack-scripts`](../../scripts/muban-webpack) can

templates/muban/src/pages/public/index.html

@@ -13,7 +13,7 @@
 
   <meta name="app-script" content="{{publicPath}}static/chunks/main.js" />
 
-  <meta http-equiv="Content-Security-Policy" content="script-src 'sha256-+OVgFCkyF2/rZ6qyfsNnIisCRI6dtMZw3w0Y4xiYagw=' 'strict-dynamic' https: 'unsafe-inline'; object-src 'none'; base-uri 'none';">
+  <meta http-equiv="Content-Security-Policy" content="script-src 'sha256-yyNoIT+kJT1MVsxspvZSCNjvwqqNKH1g+O3BVXpWOvg=' 'strict-dynamic' https: 'unsafe-inline'; object-src 'none'; base-uri 'none';">
 
   <link rel="stylesheet" href="{{publicPath}}static/css/main.css" />
 </head>
@@ -24,7 +24,7 @@
 
     <!-- @formatter:off -->
     <!-- prettier-ignore -->
-    <script>!function(){for(var o=document.querySelectorAll('html > head > meta[name="app-script"]'),t=0;t<o.length;t++){var e=o[t].getAttribute("content"),n=document.createElement("script");n.src=e,n.src.substr(0,window.location.origin.length)!==window.location.origin?window.console&&console.error("[ScriptLoader] Cannot load "+e+"."):document.body.appendChild(n)}}()</script>
+    <script>!function(){for(var e=document.querySelectorAll('html > head > meta[name="app-script"]'),o=0;o<e.length;o++){var t=e[o].getAttribute("content"),n=document.createElement("script");n.src=t,n.src.substr(0,window.location.origin.length)!==window.location.origin?window.console&&console.error("[ScriptLoader] Cannot load "+t+"."):(document.body.appendChild(n),document.head.removeChild(e[o]))}}();</script>
     <!-- @formatter:on -->
   </body>
 </html>