How to use CSP to allow access to http://localhost from a webview loaded with https

[cngarrison]

I'm unable to load http content in the app I'm developing. To isolate the problem I created a new Tauri app.

The new app is to test loading http content from a webview with content loaded via https. I can't find the right configuration.

This is a new Vanilla JS app. I created a test page to load via https at https://www.cngarrison.com/localhost-status.html.

That page is being loaded in a new webview using:

async function openStatusWindow() {
  const webview = new WebviewWindow('status-check', {
    url: 'https://www.cngarrison.com/localhost-status.html',
    title: 'API Status Check',
    width: 800,
    height: 600
  });

  // Handle window events
  webview.once('tauri://error', function(e) {
    console.error('Error opening status window:', e);
  });

  webview.once('tauri://created', function() {
    console.log('Status window created');
  });
}

tauri.conf.json has CSP rules:

    "security": {
      "csp": "default-src 'self' http:; connect-src 'self' http:;"
    }

I am expecting the http: directive to allow the webview to load a page served by http://localhost but I get an error in the console:

[blocked] The page at https://www.cngarrison.com/localhost-status.html was not allowed to display insecure content from http://localhost:3162/api/v1/status.

I have tried various csp rules, but I can't get the right config.

What am I doing wrong? What is the needed config to allow an https page to load content from http?

[FabianLars]

This is not CSP related (Also, the csp config is only applied to the files from your frontendDist).
Browsers strictly prevent mixed content (loading http in https origins). Only Windows has a way to disable this by adding iirc the --allow-running-insecure-content flag to the additionalBrowserArgs config.