How to make tauri use http://tauri.localhost/ instead of https://tauri.localhost/ ? The page was blocked since the page was loaded over HTTPS.

[xuchaoqian]

---

Updated @2023-09-17: If anyone has encountered this problem, please pay attention to this PR: Allow http origin on Windows

---

Is your feature request related to a problem? Please describe.
WebView console shows the following errors when we connect to endpoint 'ws:/':
Mixed Content: The page at '<URL>' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws:<URL>/'. This request has been blocked; this endpoint must be available over WSS.

Describe the solution you'd like
We should allow to set an option in tauri.conf.json to use http://tauri.localhost/ instead of https://tauri.localhost/.

Describe alternatives you've considered
None.

Additional context

1. We can NOT use WSS for historical reasons. 2) WS works fine on macOS, but does NOT works on Windows.

[lity]

I met the same problem too.

[mzy2240]

Me too. Electron supports this mode, and it is extremely useful for development and testing, even in some rare production env.

[amrbashir]

Can you post tauri info please ? and whether you added ws: to your csp configuration ?

Also please explain your feature request a bit further and how the api for it should look like, as I am having some trouble understanding your request.

[mzy2240]

I don't want to hijack the thread but here is mine:

Operating System - Windows, version 10.0.19044 X64
Webview2 - 96.0.1054.41

Node.js environment
  Node.js - 14.17.6
  @tauri-apps/cli - 1.0.0-beta.10
  @tauri-apps/api - Not installed

Global packages
  npm - 6.14.15
  yarn - Not installed

Rust environment
  rustc - 1.56.1
  cargo - 1.56.0

App directory structure
/.git
/dist
/dist_electron
/node_modules
/public
/py
/pydist
/src
/src-tauri

App
  tauri.rs - 1.0.0-beta.8
  build-type - bundle
  CSP - default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self' img-src: 'self'
  distDir - Set automatically by Vue CLI plugin
  devPath - Set automatically by Vue CLI plugin
  framework - Vue.js (Vue CLI)
  bundler - Webpack

When running socketio client and connecting to a bundled python-based socketio server, I am facing exact same errors. Due to some reasons, only ws/http are accepted unfortunately. It seems to me that the only solution is somehow to support hosting over http. Please advise if you have any questions or comments.

Update: this is not a problem when just connecting to localhost, but becomes an issue when connecting from other ip.

[xuchaoqian]

Thank you for your participation.

I don't want to hijack the thread but here is mine:

Operating System - Windows, version 10.0.19044 X64
Webview2 - 96.0.1054.41

Node.js environment
  Node.js - 14.17.6
  @tauri-apps/cli - 1.0.0-beta.10
  @tauri-apps/api - Not installed

Global packages
  npm - 6.14.15
  yarn - Not installed

Rust environment
  rustc - 1.56.1
  cargo - 1.56.0

App directory structure
/.git
/dist
/dist_electron
/node_modules
/public
/py
/pydist
/src
/src-tauri

App
  tauri.rs - 1.0.0-beta.8
  build-type - bundle
  CSP - default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self' img-src: 'self'
  distDir - Set automatically by Vue CLI plugin
  devPath - Set automatically by Vue CLI plugin
  framework - Vue.js (Vue CLI)
  bundler - Webpack

When running socketio client and connecting to a bundled python-based socketio server, I am facing exact same errors. Due to some reasons, only ws/http are accepted unfortunately. It seems to me that the only solution is somehow to support hosting over http. Please advise if you have any questions or comments.

Update: this is not a problem when just connecting to localhost, but becomes an issue when connecting from other ip.

[xuchaoqian]

Can you post tauri info please ? and whether you added ws: to your csp configuration ?

Also please explain your feature request a bit further and how the api for it should look like, as I am having some trouble understanding your request.

cargo tauri info:

Operating System - Windows, version 10.0.19042 X64
Webview2 - 96.0.1054.41

Node.js environment
  Node.js - 14.15.0
  @tauri-apps/cli - 1.0.0-beta.10
  @tauri-apps/api - 1.0.0-beta.8

Global packages
  npm - 6.14.8
  yarn - 1.22.17

Rust environment
  rustc - 1.56.1
  cargo - 1.56.0

App directory structure
/.git
/bin
/build
/change-logs
/dist
/node_modules
/public
/src
/src-tauri
/src-web
/webpack

App
  tauri.rs - 1.0.0-beta.8
  build-type - bundle
  CSP - default-src blob: data: filesystem: ws: wss: http: tauri: 'unsafe-eval' 'unsafe-inline' 'self' img-src: 'self'
  distDir - ../build
  devPath - http://localhost:9091
  framework - React
  bundler - Webpack

The WebView console shows the following errors:

Maybe the API looks like this:

"security": {
  "useHttp": true,  // Add an option here, default value is false
  "csp": "default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self' img-src: 'self'"
}

[amrbashir]

Switching to http would probably disable secure context in the webview and some apis won't work.

[mzy2240]

Thank you for the heads up. Currently I'm only using the sidecar api, so hopefully it won't get affected, but I do hope we could have this option. Sometimes people turn to Tauri just because it could generate smaller and more performant app, instead of more native api supports.

[moxun33]

same problem to me.

[amrbashir]

Thank you for the heads up. Currently I'm only using the sidecar api, so hopefully it won't get affected.

yeah it doesn't affect sidecar afaik.

Here is a list on MDN of features/apis that won't work if window.isSecureContext is false

I have a vague memory about http disabling secure context but I could be wrong so cc @lucasfernog

[mzy2240]

Does that mean this feature is already supported? If so, do you mind to explain how to enable it? If not, do you have plan to add the feature? Thanks

[lucasfernog]

I'll check this.

[lucasfernog]

Unfortunately we need the https://tauri.localhost URL to have a secure context enabled. Maybe this is a case where using a localhost is better. https://github.com/tauri-apps/tauri-plugin-localhost/

[mzy2240]

Thanks! Could we choose to disable the secure content? I'm trying to query a socketio server and due to some reasons it has to be either http or ws.

[spirityy]

I met the same problem.Because of historical reasons can not support wss,in this case windows compiler software becomes unusable, which should be a common situation.

Unfortunately we need the https://tauri.localhost URL to have a secure context enabled. Maybe this is a case where using a localhost is better. https://github.com/tauri-apps/tauri-plugin-localhost/

hi, @lucasfernog

This plugin needs my local yarn start the app and keep it running? I found that the source code can only run localhost, and I can't use other particular ip as a parameter?

[kmod-midori]

Based on the following sources:

Chrome:
https://chromestatus.com/feature/6269417340010496
https://bugs.chromium.org/p/chromium/issues/detail?id=589141
MDN:
https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts
W3C:
https://w3c.github.io/webappsec-secure-contexts/#localhost

Both https://tauri.localhost and http://tauri.localhost should have window.isSecureContext === true if we are doing it correctly. Though this does not solve the mixed content error we are encountering there.

[lucasfernog]

I met the same problem.Because of historical reasons can not support wss,in this case windows compiler software becomes unusable, which should be a common situation.

Unfortunately we need the https://tauri.localhost URL to have a secure context enabled. Maybe this is a case where using a localhost is better. tauri-apps/tauri-plugin-localhost

hi, @lucasfernog

This plugin needs my local yarn start the app and keep it running? I found that the source code can only run localhost, and I can't use other particular ip as a parameter?

The plugin only applies to a production build. Why would you need a particular IP? Sorry for the lack of documentation, we're focusing on releasing tauri v1.0.0-rc.0 for now.

[lucasfernog]

Based on the following sources:

Chrome: chromestatus.com/feature/6269417340010496 bugs.chromium.org/p/chromium/issues/detail?id=589141 MDN: developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts W3C: w3c.github.io/webappsec-secure-contexts/#localhost

Both https://tauri.localhost and http://tauri.localhost should have window.isSecureContext === true if we are doing it correctly. Though this does not solve the mixed content error we are encountering there.

Yeah but that's not the case on Windows using Webview2.

[lucasfernog]

Maybe Webview2 is changing this soon? MicrosoftEdge/WebView2Feedback#2102 (comment)

[xiaowang-web]

@lucasfernog Can the Tauri plugin localhost program support WS and HTTP protocols after cargo Tauri build
https://github.com/tauri-apps/tauri-plugin-localhost

[lucasfernog]

Yes it'll work @wangyuxiangloveyou

[lucasfernog]

Closing as the localhost plugin can be used to achieve this and we shouldn't allow insecure content by default.

[ChenArno]

Can you post tauri info please ? and whether you added ws: to your csp configuration ?
Also please explain your feature request a bit further and how the api for it should look like, as I am having some trouble understanding your request.

cargo tauri info:

Operating System - Windows, version 10.0.19042 X64
Webview2 - 96.0.1054.41

Node.js environment
  Node.js - 14.15.0
  @tauri-apps/cli - 1.0.0-beta.10
  @tauri-apps/api - 1.0.0-beta.8

Global packages
  npm - 6.14.8
  yarn - 1.22.17

Rust environment
  rustc - 1.56.1
  cargo - 1.56.0

App directory structure
/.git
/bin
/build
/change-logs
/dist
/node_modules
/public
/src
/src-tauri
/src-web
/webpack

App
  tauri.rs - 1.0.0-beta.8
  build-type - bundle
  CSP - default-src blob: data: filesystem: ws: wss: http: tauri: 'unsafe-eval' 'unsafe-inline' 'self' img-src: 'self'
  distDir - ../build
  devPath - http://localhost:9091
  framework - React
  bundler - Webpack

The WebView console shows the following errors:

Maybe the API looks like this:

"security": {
  "useHttp": true,  // Add an option here, default value is false
  "csp": "default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self' img-src: 'self'"
}

Property useHttp is not allowed

[ChenArno]

是的，它可以工作@wangyuxiangloveyou

no,there http is not work

[spirityy]

Maybe Webview2 is changing this soon? MicrosoftEdge/WebView2Feedback#2102 (comment)

Any news update? we still need to use the plugin? cause the other platforms such as ubantu macos were not need it.

[FabianLars]

@spirityy Well, you posted the answer to your question. In the issues linked in that comment it says that they will release it sometime soon.
But this change most likely won't make it into tauri until v2.

[learncodingforweb]

Still facing same problem, is there any update. I am using websocket to connect to localhost, after release, it tried to connect https. How can i connect to http in release mode

[Fredolx]

Any fix for this yet? Or we have to use localhost plugin?

[learncodingforweb]

Hi,
Able to find solution for local server running on system and tauri app is running on same pc, where http server is installed. To make it work, need to change tauri.conf.json
"security": { "csp": "default-src 'self' http://localhost:8000 ws://localhost:8000; img-src 'self' *; object-src 'none'; base-uri 'self'" }
Note, I am running http server on 8000 port.
Tauri info as
Environment
› OS: Debian 11 X64
› Node.js: 16.13.2
› npm: 8.1.2
› pnpm: Not installed!
› yarn: 1.22.19
› rustup: 1.25.2
› rustc: 1.67.1
› cargo: 1.67.1
› Rust toolchain: stable-aarch64-unknown-linux-gnu

Packages
› @tauri-apps/cli [NPM]: 1.2.3
› @tauri-apps/api [NPM]: Not installed!
› tauri [RUST]: 1.2.4,
› tauri-build [RUST]: 1.2.1,
› tao [RUST]: 0.15.8,
› wry [RUST]: 0.23.4,

App
› build-type: bundle
› CSP: default-src 'self' http://localhost:8000 ws://localhost:8000; img-src 'self' *; object-src 'none'; base-uri 'self'
› distDir: ../dist
› devPath: http://localhost:4200/

App directory structure
├─ src-tauri
├─ ui
├─ dist
└─ node_modules
Done in 16.63s.

If any one able to find solution for tauri app running on different pc, for me, it is not working even after changing http://localhost:8000 with http://ip_address:8000 please update so that other can also able to find solution

[mon]

For anyone struggling with the localhost plugin not working for tauri dev, here's a modified example that only enables it for release builds (works for me with vite):

src-tauri/src/main.rs

use tauri::{utils::config::AppUrl, window::WindowBuilder, WindowUrl};

// Tauri by default uses HTTPS, so use the localhost plugin to downgrade back to
// HTTP. However, when running tauri dev, we already have a localhost server
// provided by vite, so don't enable it
#[cfg(debug_assertions)]
const USE_LOCALHOST_SERVER: bool = false;
#[cfg(not(debug_assertions))]
const USE_LOCALHOST_SERVER: bool = true;

fn main() {
    let port = portpicker::pick_unused_port().expect("failed to find unused port");

    let window_url = if USE_LOCALHOST_SERVER {
        WindowUrl::External(format!("http://localhost:{}", port).parse().unwrap())
    } else {
        WindowUrl::App("index.html".into())
    };

    let mut context = tauri::generate_context!();
    let mut builder = tauri::Builder::default();

    if USE_LOCALHOST_SERVER {
        // rewrite the config so the IPC is enabled on this URL
        context.config_mut().build.dist_dir = AppUrl::Url(window_url.clone());
        context.config_mut().build.dev_path = AppUrl::Url(window_url.clone());
        builder = builder.plugin(tauri_plugin_localhost::Builder::new(port).build());
    }

    builder
        .setup(move |app| {
            WindowBuilder::new(app, "main".to_string(), window_url)
                .title("Localhost Example")
                .build()?;
            Ok(())
        })
        .run(context)
        .expect("error while running tauri application");
}

[prayag17]

I am still getting this error when I try to request a http address. How do I fix it?

[pot-code]

any updates? my app can send http request normally on windows, but immediately fail on macOS

[FabianLars]

@pot-code I am 99% sure your problem is unrelated to this issue. This one is windows-only and its fix won't touch the MacOS and Linux implementations at all.

My first idea would be that it may be related to the exceptionDomain, see the last point here: https://tauri.app/v1/guides/building/macos/#application-bundle-customization.
If this doesn't fix it please open a separate issue with a reproduction example.

[pot-code]

@FabianLars Thank you for your help! It is because I had set the HTTP_PROXY env variable that cause the request to fail, no clue why this would happen.

[icefee]

when i use tauri-plugin-localhost , my application is Flash back ,cant open

https://github.com/tauri-apps/plugins-workspace/issues/148

[trookie2000]

当我使用 tauri-plugin-localhost 时，我的应用程序闪退，无法打开

https://github.com/tauri-apps/plugins-workspace/issues/148

Maybe we could talk about it? I had a similar problem

[xuchaoqian]

If anyone has encountered this problem, please pay attention to this PR: Allow http origin on Windows

[AceyKubbo]

Any fix for this yet? Or we have to use localhost plugin?

i change the tauri.conf.json > tauri > security > dangerousUseHttpScheme = true,then it work

[junior-slv]

Any fix for this yet? Or we have to use localhost plugin?

i change the tauri.conf.json > tauri > security > dangerousUseHttpScheme = true,then it work

you are an angel, thank you...

[lvcj-1]

有解决这个问题的办法吗？还是我们必须使用 localhost 插件？

我改变了tauri.conf.json > tauri > security > dangerousUseHttpScheme = true，然后它工作了

你是天使，谢谢你……

为啥我的还是不行啊，我要碎了，不清楚我的配置是不是还需要修改什么
{
"$schema": "../node_modules/@tauri-apps/cli/schema.json",
"build": {
"beforeBuildCommand": "npm run build:prod",
"beforeDevCommand": "npm run dev",
"devPath": "http://localhost:80",
"distDir": "../dist",
"withGlobalTauri": true
},
...
"tauri": {
...
"security": {
"csp": null,
"dangerousUseHttpScheme" : true
},
...
}

[AceyKubbo]

有解决这个问题的办法吗？还是我们必须使用 localhost 插件？

我改变了tauri.conf.json > tauri > security > dangerousUseHttpScheme = true，然后它工作了

你是天使，谢谢你……

为啥我的还是不行啊，我要碎了，不清楚我的配置是不是还需要修改什么 { "$schema": "../node_modules/@tauri-apps/cli/schema.json", "build": { "beforeBuildCommand": "npm run build:prod", "beforeDevCommand": "npm run dev", "devPath": "http://localhost:80", "distDir": "../dist", "withGlobalTauri": true }, ... "tauri": { ... "security": { "csp": null, "dangerousUseHttpScheme" : true }, ... }

你可以看看allowlist有没有放行

[huaidanatu]

dangerousUseHttpScheme = true

you're an Angel! mua ,mua ,mua