[bug] An insecure WebSocket connection may not be initiated from a page loaded over HTTPS

[trookie2000]

Describe the bug

Mixed Content: The page at 'https://tauri.localhost/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://10.22.234.122:8080/conn/e6888a85d1b24d1f855e7ffbc67005ee'. This request has been blocked; this endpoint must be available over WSS.

Reproduction

No response

Expected behavior

No response

Platform and versions

Environment
› OS: Windows 10.0.19044 X64
› Webview2: 104.0.1293.63
› MSVC:
- Visual Studio ���ɹ��� 2022
› Node.js: 16.15.1
› npm: 8.15.1
› pnpm: Not installed!
› yarn: 1.22.19
› rustup: 1.25.1
› rustc: 1.62.1
› cargo: 1.62.1
› Rust toolchain: stable-x86_64-pc-windows-msvc

Packages
› @tauri-apps/cli [NPM]: 1.0.5
› @tauri-apps/api [NPM]: 1.0.2
› tauri [RUST]: 1.0.5,
› tauri-build [RUST]: 1.0.4,
› tao [RUST]: 0.12.2,
› wry [RUST]: 0.19.0,

App
› build-type: bundle
› CSP: default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self' img-src: 'self'
› distDir: ../dist
› devPath: http://localhost:5173
› framework: Vue.js

App directory structure
├─ .vscode
├─ dist
├─ node_modules
├─ public
├─ src
└─ src-tauri

Stack trace

Mixed Content: The page at 'https://tauri.localhost/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://10.22.234.122:8080/conn/e6888a85d1b24d1f855e7ffbc67005ee'. This request has been blocked; this endpoint must be available over WSS.

DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

Additional context

This is my websocket code, how should I change it?I'm pretty bad at this, so I need some guidance. If there's any additional information you need, please let me know

const initWebSocket = () => {
ws = new WebSocket(ws://10.22.234.122:8080/conn/${data.account.id});

ws.onopen = (e: Event) => {
setInterval(() => {
sendToServer({
msg_type: "heartbeat",
receiver: "",
sender: "",
msg: "",
});
}, 1000 * 60);
};

ws.onmessage = async (e: MessageEvent) => {
const msg: Record<string, any> = JSON.parse(e.data);
switch (msg.msg_type) {
case MessageType.VIDEO_OFFER: // Invitation and offer to chat
handleVideoOfferMsg(msg);
break;
case MessageType.VIDEO_ANSWER: // Callee has answered our offer
handleVideoAnswerMsg(msg);
break;
case MessageType.NEW_ICE_CANDIDATE: // A new ICE candidate has been received
handleNewICECandidateMsg(msg);
break;
case MessageType.REMOTE_DESKTOP:
handleRemoteDesktopRequest(msg);
break;
case MessageType.CLOSE_REMOTE_DESKTOP:
close();
break;
}
};

ws.onerror = (e: Event) => {
console.log("conn error");
};
};

[trookie2000]

I sent a similar problem before, but did not find a solution after # 3007 (install a plug-in).

[FabianLars]

Thanks for reaching out again. To be honest my answer in your last issue is still accurate #7651 (comment) - if you can't wait for 1.5 or make your connection use a secure protocol then either the websocket plugin or the localhost plugin are the only workarounds. So the only help i can provide is to help you make one of them work but for that i'd need to know what exactly you tried and the problems you were facing, thanks :)

Closing this issue so the team knows that it's not a bug they have to work on, but we can keep talking in here!

[trookie2000]

Thanks for reaching out again. To be honest my answer in your last issue is still accurate #7651 (comment) - if you can't wait for 1.5 or make your connection use a secure protocol then either the websocket plugin or the localhost plugin are the only workarounds. So the only help i can provide is to help you make one of them work but for that i'd need to know what exactly you tried and the problems you were facing, thanks :)

Closing this issue so the team knows that it's not a bug they have to work on, but we can keep talking in here!

According to the website (https://github.com/tauri-apps/plugins-workspace/tree/v1/plugins/localhost) method using localhost plugin, According to the sample will be tauri - plugin - localhost = {git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1"} Portpicker = "0.1"

used in the example to randomly select a freeport to add to cargo.toml and in main. The code in Rs has been changed, and the program crashes after executing cargo run。

Before this is my code：
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![
key_event,
mouse_event,
generate_account
])

    .run(tauri::generate_context!())
    .expect("error while running tauri application");

, including key_event, mouse_event. Generate_account is my own definition of the function.But according to the example code copy in the past after the program flash back, do not know what is the reason

[trookie2000]

Ok, thank you!