Update create-vite Vanilla and Vanilla TS to support CSP require-trusted-types-for

[Snugug]

Description

The Content Security Policy (CSP) require-trusted-types-for disallows direct innerHTML usage. Both the Vanilla JS and Vanilla TS starters use innerHTML to set up their app's initial HTML structure from main.(js|ts) and set the value of the counter when clicked from counter.(js|ts). Because of this, both of these starters throw errors and don't work with this CSP in place.

While likely not a general problem for most Vite users, this does become a problem using these starters to test out Isolated Web Apps, in-progress standards proposal. IWAs require this CSP as part of their runtime experience, so trying to spin up a quick sample app with either of these project bases causes immediate errors.

Suggested solution

• For coutner.(js|ts), replace the innerHTML with textContent. This works under that CSP and is the more appropriate property to be using
• For main.(js|ts), either implement a sample trustedTypes policy (as shown in the MDN page above), update the code to use createElement calls and append them as needed, or write the HTML directly to index.html instead of injecting it through JavaScript

Alternative

I'd considered suggesting adding an IWA starter, which may be useful down the line, but I don't think is needed right now, especially as these two changes will benefit everyone.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[ghiscoding]

I'm just guessing that it won't make a difference until PR #14653 is updated and merged. Current Dev mode doesn't support CSP

[Snugug]

(@ghiscoding for most users, probably, but you can run into this issue with IWAs today, which is my usecase. Instructions for trying that out are below)

If anyone would like to try this with an IWA, here are the steps to set up Vite to use as a dev server for an Isolated Web App:

tl;dr You need to set Vite up to run in HTTPS with verified (i.e. not self-signed) certificates, force the dev server and the HMR connection to use the same host and port, include a manifest.webmanifest at the root of your `public folder, and enable the relevant Chrome flags.

1. Generate a valid root certificate for the Vite project.

• I used mkcert to generate a root cert on my computer, but use whatever is most accessible for you. Take note of where the rootCA.pem file gets generated. If you're using mkcert, you can add export CAROOT=”$HOME/certs or your .bashrc file to direct where the file will be generated when running mkcert -install
• Install the cert by going to chrome://settings/certificates and under the Authorities tab, import rootCA.pem

2. In the root of your Vite project directory, create a certs folder, then generate certs for your project there. If using mkcert, you can run mkcert localhost
3. Set up your vite.config.js file to force the server and the HMR server to use the same port and host, and read your certificates to run in https. If you followd the above, first import fs from 'fs in your config, then add the following:

server: {
   port: 5193,
   strictPort: true,
   https: {
     key: fs.readFileSync('./certs/localhost-key.pem'),
     cert: fs.readFileSync('./certs/localhost.pem'),
   },
   hmr: {
     protocol: 'wss',
     host: 'localhost',
     clientPort: 5193,
   }
 },

4. Ensure you have a valid manifest.webmanifest file (named exactly that) available from the root of your url (so it'd be available at https://localhost:5193/manifest.webmanifest) and that it includes a version field set to a SEMVER string and at least one valid icon. Putting it directly into the root of your pubic folder should be good enough. An example one may look like this:

{
  "id": "/",
  "short_name": "Test IWA",
  "name": "Test IWA",
  "version": "0.0.1",
  "icons": [
    {
      "src": "images/icon.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "any maskable"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "scope": "/",
  "isolated_storage": true,
  "permissions_policy": {
    "cross-origin-isolated": ["self"]
  }
}

On the latest Chrome Beta, Dev, or Canary channel, enable the chrome://flags/#enable-isolated-web-apps and chrome://flags/#enable-isolated-web-app-dev-mode/ flags, then go to chrome://web-app-internals and install https://localhost:5193 via the Dev Mode Proxy. This will install an app to your device that runs as an IWA but uses your proxied Vite development server.

[patak-dev]

Thanks for the detailed explanation @Snugug! I think we should update the Vanilla starters. Are you planing to work on a PR too to do this? Or should we add that to our queue?

[Snugug]

Thanks for the detailed explanation @Snugug! I think we should update the Vanilla starters. Are you planing to work on a PR too to do this? Or should we add that to our queue?

I'm happy to make a PR for it. Do you have a preferred solution for generating the app scaffolding? If not, I'll go the create element route.

[ghiscoding]

@patak-dev can the PR #14653 also be added back to a higher queue? I thought it was going to be relooked into after v5 shipped, but there's no update since it was opened last October and CSP is more and more required by the business since security is a hot topic these days

[patak-dev]

I'm happy to make a PR for it. Do you have a preferred solution for generating the app scaffolding? If not, I'll go the create element route.

Awesome! Creating an element sounds good to me 👍🏼

[Snugug]

Done! PR open!

[patak-dev]

@patak-dev can the PR #14653 also be added back to a higher queue? I thought it was going to be relooked into after v5 shipped, but there's no update since it was opened last October and CSP is more and more required by the business since security is a hot topic these days

We have discussed it in some meetings, and sapphi made a lot of progress there. Let's use that PR to discuss. We all believe that it should be merged.

[chakAs3]

[patak-dev]

Closing as we decided in the last team meeting to keep the vanilla templates as minimal as possible. See comment here: #15689 (comment)
Sorry I made you do extra work here @Snugug