mirror of
https://github.com/ading2210/libcurl.js.git
synced 2025-05-10 21:10:02 -04:00
add code for main project website
This commit is contained in:
ading2210
parent
94aaca8f22
commit
5ab6ed30a2
5 changed files with 298 additions and 0 deletions
|
|
@ -1,5 +1,12 @@
|
|||
# Libcurl.js Changelog:
|
||||
|
||||
## v0.7.0 (1/24/25):
|
||||
- Switch to Mbed TLS for the TLS backend
|
||||
- This fixes some TLS certificate errors that were occurring on some sites with WolfSSL
|
||||
- Fix a null pointer dereference bug with websockets
|
||||
- Store the CA certificates bundle more efficiently
|
||||
- The WASM size has decreased from 1.4MB to 1.2MB
|
||||
|
||||
## v0.6.22 (1/10/25):
|
||||
- Remove Emscripten's maximum socket limit of 64
|
||||
- Fix handling of sub-protocols in Websockets
|
||||
|
|
|
|||
BIN
website/favicon.ico
Normal file
BIN
website/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
88
website/index.html
Normal file
88
website/index.html
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>libcurl.js - A port of libcurl to WASM for the web.</title>
|
||||
|
||||
<link rel="stylesheet" href="./main.css">
|
||||
<script src="./main.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/libcurl.js@latest/libcurl_full.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="center">
|
||||
<h1 id="title">libcurl.js</h1>
|
||||
</div>
|
||||
<p>libcurl.js is a port of the popular <a href="https://curl.se/libcurl/">libcurl</a> C library to WASM for use on the web. It allows you send encrypted HTTPS requests from the browser, without the proxy server being able to read the contents.</p>
|
||||
<p>See the <a href="https://github.com/ading2210/libcurl.js">Github repository</a> for more information.</p>
|
||||
|
||||
|
||||
<h2>Features:</h2>
|
||||
<ul style="margin-top: 4px;">
|
||||
<li>Provides an API compatible with the browser's native Fetch API</li>
|
||||
<li>End to end encryption between the browser and the destination server</li>
|
||||
<li>Support for up to TLS 1.3</li>
|
||||
<li>Support for tunneling HTTP/2 connections</li>
|
||||
<li>Support for proxying encrypted WebSockets</li>
|
||||
<li>Bypass CORS restrictions without compromising on privacy</li>
|
||||
<li>High performance and low latency via multiplexing and reusing open connections</li>
|
||||
<li>Works in all major browsers (Chromium >= 64, Firefox >= 65, Safari >= 14)</li>
|
||||
<li>Small footprint size (552KB after compression) and low runtime memory usage</li>
|
||||
<li>Support for Brotli and gzip compressed responses</li>
|
||||
</ul>
|
||||
|
||||
<h2>Live Demo:</h2>
|
||||
<form action="javascript:start_request();" id="request_form">
|
||||
<label for="url">URL:</label>
|
||||
<input type="text" id="url" name="url" value="https://httpbin.org/anything">
|
||||
<input class="button" type="submit" value="Submit">
|
||||
</form>
|
||||
<p id="status_text"><br><i>Waiting for libcurl.js to load...</i></p>
|
||||
<table id="main_table">
|
||||
<tr>
|
||||
<th>Request Content:</th>
|
||||
<th>Network Traffic:</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="list_cell">
|
||||
<pre id="request_info"></pre>
|
||||
</td>
|
||||
<td class="list_cell">
|
||||
<table id="network_data"></table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2">Libcurl Output:</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="list_cell" colspan="2">
|
||||
<pre id="libcurl_output"></pre>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2 style="margin-top: 0px;">Explanation:</h2>
|
||||
<p>libcurl.js works by proxying TCP sockets, rather than HTTP requests. The <a href="https://github.com/MercuryWorkshop/wisp-protocol">Wisp protocol</a> is used to multiplex the TCP connections over a single websocket for minimal latency. The <a href="https://curl.se/libcurl/">libcurl</a> C library is used as an HTTP client, and <a href="https://github.com/Mbed-TLS/mbedtls">Mbed TLS</a> is used to facilitate encryption.</p>
|
||||
<p>If the destination server supports HTTPS, the connection will be end-to-end encrypted using TLS. Only the encrypted TLS traffic is carried over the websocket, so the proxy server knows nothing about your requests except for the hostname.</p>
|
||||
<p>This avoids the privacy issues of a traditional CORS proxy which can steal your credentials and private information. With libcurl.js and Wisp, you don't need to trust the proxy server to keep your requests secure.</p>
|
||||
|
||||
<h2>Javascript API:</h2>
|
||||
<p>Including libcurl.js in your web pages is as simple as loading the JS bundle using a script tag.</p>
|
||||
<pre><script src="https://cdn.jsdelivr.net/npm/libcurl.js@latest/libcurl_full.js" defer></script></pre>
|
||||
<p>Then, after setting the Websocket proxy URL, you can use the API to its full potential.</p>
|
||||
<pre>document.addEventListener("libcurl_load", ()=>{
|
||||
libcurl.set_websocket(`wss://wisp.mercurywork.shop/`);
|
||||
console.log("libcurl.js ready!");
|
||||
});</pre>
|
||||
<p>More documentation and examples are available on the <a href="https://github.com/ading2210/libcurl.js">project README</a>.</p>
|
||||
|
||||
<h2>License:</h2>
|
||||
<p>This project was written by <a href="https://github.com/ading2210">ading2210</a> and it is licensed under the <a href="https://www.gnu.org/licenses/lgpl-3.0.html">GNU LGPL v3.</a></p>
|
||||
<blockquote>
|
||||
This license is mainly applied to libraries. You may copy, distribute and modify the software provided that modifications are described and licensed for free under LGPL. Derivatives works (including modifications or anything statically linked to the library) can only be redistributed under LGPL, but applications that use the library don't have to be.
|
||||
<br><br>
|
||||
- From <a href="https://www.tldrlegal.com/license/gnu-lesser-general-public-license-v3-lgpl-3">tldrlegal.com</a>
|
||||
</blockquote>
|
||||
</body>
|
||||
</html>
|
||||
112
website/main.css
Normal file
112
website/main.css
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
:root {
|
||||
--background-1: #0C0C0D;
|
||||
--background-2: #18181A;
|
||||
--background-3: #232327;
|
||||
--button-color: #38383D;
|
||||
--border-1: #3a344e;
|
||||
--text-color: #cccccc;
|
||||
--link-color: #3584E4;
|
||||
--link-color-alt: #a64ede;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: sans-serif;
|
||||
color: var(--text-color);
|
||||
border-color: var(--text-color);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
}
|
||||
a:hover {
|
||||
color: var(--link-color-alt);
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: var(--background-1);
|
||||
height: 100%;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-2);
|
||||
max-width: 800px;
|
||||
min-height: 90%;
|
||||
margin-top: 16px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
font-family: monospace;
|
||||
background-color: var(--background-1);
|
||||
padding: 8px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
table, th, td {
|
||||
border: 1px solid;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.button {
|
||||
background-color: var(--button-color);
|
||||
}
|
||||
|
||||
#title {
|
||||
margin-top: 0px;
|
||||
}
|
||||
#request_form {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
#url {
|
||||
width: 100%;
|
||||
background-color: var(--button-color);
|
||||
}
|
||||
#main_table {
|
||||
visibility: hidden;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#network_data {
|
||||
width: 100%;
|
||||
}
|
||||
#status_text {
|
||||
height: 0px;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
.list_cell {
|
||||
height: 200px;
|
||||
overflow-y: auto;
|
||||
background-color: var(--background-3);
|
||||
}
|
||||
.list_cell pre {
|
||||
height: 100%;
|
||||
white-space: pre-wrap;
|
||||
line-break: anywhere;
|
||||
margin: 0px;
|
||||
padding: 4px;
|
||||
background-color: var(--background-3);
|
||||
}
|
||||
91
website/main.js
Normal file
91
website/main.js
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
const decoder = new TextDecoder();
|
||||
|
||||
function from_id(id) {
|
||||
return document.getElementById(id);
|
||||
}
|
||||
|
||||
async function start_request() {
|
||||
let request_output = from_id("request_info");
|
||||
let libcurl_output = from_id("libcurl_output");
|
||||
let network_data = from_id("network_data");
|
||||
let url_box = from_id("url");
|
||||
|
||||
request_output.innerText = "";
|
||||
libcurl_output.innerText = "";
|
||||
network_data.innerText = "";
|
||||
|
||||
let url = url_box.value;
|
||||
if (!url.startsWith("http://") && !url.startsWith("https://"))
|
||||
url = "https://" + url;
|
||||
request_output.innerText += `GET ${url}\n\n`;
|
||||
|
||||
try {
|
||||
let r = await libcurl.fetch(url, {_libcurl_verbose: 1});
|
||||
request_output.innerText += await r.text();
|
||||
}
|
||||
catch (e) {
|
||||
request_output.innerText += e;
|
||||
}
|
||||
}
|
||||
|
||||
function handle_output(text) {
|
||||
let output_element = from_id("libcurl_output");
|
||||
output_element.innerText += text + "\n";
|
||||
output_element.scrollTop = output_element.scrollHeight;
|
||||
}
|
||||
|
||||
function handle_ws_traffic(data, direction) {
|
||||
let network_data = from_id("network_data");
|
||||
let table_row = document.createElement("tr");
|
||||
let direction_cell = document.createElement("td");
|
||||
let data_cell = document.createElement("td");
|
||||
let data_pre = document.createElement("pre");
|
||||
|
||||
if (direction === "send")
|
||||
direction_cell.style.backgroundColor = "rgba(255, 0, 0, 0.3)";
|
||||
else if (direction === "recv")
|
||||
direction_cell.style.backgroundColor = "rgba(0, 255, 0, 0.3)";
|
||||
direction_cell.style.fontFamily = "monospace";
|
||||
direction_cell.style.width = "36px";
|
||||
data_pre.style.fontSize = "10px";
|
||||
network_data.parentNode.style.display = "block";
|
||||
network_data.parentNode.style.marginBottom = "-2px";
|
||||
|
||||
data_cell.append(data_pre);
|
||||
table_row.append(direction_cell, data_cell);
|
||||
|
||||
direction_cell.innerText = direction;
|
||||
data_pre.innerText = String.fromCodePoint(...new Uint8Array(data));
|
||||
network_data.append(table_row);
|
||||
}
|
||||
|
||||
function proxy_websocket() {
|
||||
WebSocket.prototype.send = new Proxy(WebSocket.prototype.send, {
|
||||
apply(a, b, c) {
|
||||
handle_ws_traffic(c[0], "send");
|
||||
Reflect.apply(a, b, c);
|
||||
}}
|
||||
);
|
||||
WebSocket = new Proxy(WebSocket, {
|
||||
construct(target, args) {
|
||||
let ws = new target(...args);
|
||||
ws.addEventListener("message", (event) => {
|
||||
handle_ws_traffic(event.data, "recv");
|
||||
});
|
||||
return ws;
|
||||
}}
|
||||
);
|
||||
}
|
||||
|
||||
document.addEventListener("libcurl_load", () => {
|
||||
console.log(`loaded libcurl.js ${libcurl.version.lib}`);
|
||||
|
||||
libcurl.set_websocket("wss://wisp.mercurywork.shop/");
|
||||
libcurl.stdout = handle_output;
|
||||
libcurl.stderr = handle_output;
|
||||
proxy_websocket();
|
||||
|
||||
from_id("status_text").style.display = "none";
|
||||
from_id("main_table").style.visibility = "visible";
|
||||
start_request();
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue