Add support to generate QR code for paste link

This commit is contained in:
Joe Ma 2022-09-11 19:05:18 +08:00
parent f7273ceb79
commit fb3f8d1ef1
No known key found for this signature in database
GPG key ID: 7A0ECF5F5EDC587F
5 changed files with 187 additions and 123 deletions

View file

@ -1,4 +1,5 @@
# Paste
This is a pastebin-like, simple file sharing application targeted to run on Cloudflare Worker.
[pb.nekoul.com](http://pb.nekoul.com) is the current deployment of this project.
The maximum upload file size is limited to **10 MB** and the paste will be kept for **28 days** only by default.
@ -6,6 +7,7 @@ The maximum upload file size is limited to **10 MB** and the paste will be kept
Please **DO NOT** abuse this service.
## Supported features
- [x] Upload paste
- [x] Download paste
- [x] Delete paste
@ -15,8 +17,10 @@ Please **DO NOT** abuse this service.
- [x] View paste in browsers (only for text and media file)
- [ ] Expiring paste (*not support directly, see [this section](#expiring-paste)*)
- [ ] Render paste code with syntax highlighting
- [x] Generate QR code for paste link
## Service architecture
This project is designed to use a S3-compatible object storage (via [aws4fetch](https://github.com/mhart/aws4fetch)) as the backend storage
and [Cloudflare Worker KV](https://developers.cloudflare.com/workers/runtime-apis/kv) as index.
All requests are handled by [Cloudflare Worker](https://developers.cloudflare.com/workers) with the entry point `fetch()`.
@ -24,6 +28,7 @@ It is worth noting that Cloudflare Worker is run *before* the cache. Therefore,
[Cache API](https://developers.cloudflare.com/workers/runtime-apis/cache/) is used instead to interact with Cloudflare cache.
## Environment variable
|Name|Description|
|-|-|
|`SERVICE_URL`|The URL of the service|
@ -38,26 +43,36 @@ It is worth noting that Cloudflare Worker is run *before* the cache. Therefore,
**`AWS_ACCESS_KEY_ID`, `AWS_SECRET_ACCESS_KEY` and `ENDPOINT` should be kept secret, i.e., [put into the encrypted store](https://developers.cloudflare.com/workers/platform/environment-variables/#adding-secrets-via-wrangler).**
## API Specification
### GET /
Fetch the Web frontpage HTML for uploading text/file (used for browsers)
### GET /api
Fetch API specification
### GET /\<uuid\>
Fetch the paste by uuid. *If the password is set, this request requires additional `x-pass` header or to use [HTTP Basic authentication](https://en.wikipedia.org/wiki/Basic_access_authentication).*
Fetch the paste by uuid. *If the password is set, this request requires additional `x-pass` header or to
use [HTTP Basic authentication](https://en.wikipedia.org/wiki/Basic_access_authentication).*
### POST /
Create new paste. Currently, only `multipart/form-data` and raw request are supported.
Create new paste. Currently, only `multipart/form-data` and raw request are supported.
Add `?qr=1` to enable QR code generation for paste link.
#### For `multipart/form-data` request,
|Form Key|Description|
|Form Key|Description|
|-|-|
|`u`|Upload content|
|`pass`|Paste's password|
|`read-limit`|The maximum access count|
|`qrcode`|Toggle QR code generation|
#### For raw request,
|Header Key|Description|
|-|-|
|`content-type`|The media type (MIME) of the data and encoding|
@ -68,7 +83,9 @@ Create new paste. Currently, only `multipart/form-data` and raw request are supp
The request body contains the upload content.
### GET /\<uuid\>/\<option\> (Not implemented)
Fetch the paste (code) in rendered HTML with syntax highlighting
Add `?qr=1` to enable QR code generation for paste link.
Currently, only the following options is supported for `option`
|Option|Meaning|
|-|-|
@ -79,17 +96,21 @@ Currently, only the following options is supported for `option`
*The authentication requirement is as same as `GET /<uuid>`.*
### DELETE /\<uuid\>
Delete paste by uuid. *If the password is set, this request requires additional `x-pass` header*
### POST /\<uuid\>/settings (Not implemented)
Update paste setting. *If the password is set, this request requires additional `x-pass` header*
## Expiring paste
S3 object lifecycle rules and Cloudflare KV's expiring key can be used to implemented expiring paste.
Reference for Amazon S3 can be found in [here](https://docs.aws.amazon.com/AmazonS3/latest/userguide/object-lifecycle-mgmt.html)
, and Blackblaze B2 in [here](https://www.backblaze.com/b2/docs/lifecycle_rules.html).
## Remark
You are welcome to use my project and depoly your own service.
Due to the fact that the `SERVICE_URL` is hard-coded into the `paste.html`,
you may simply use `Ctrl`+`R` to replace `pb.nekoul.com` with your own service URL.

View file

@ -4,7 +4,8 @@
"dependencies": {
"aws4fetch": "^1.0.13",
"nanoid": "^3.3.4",
"js-sha256": "^0.9.0"
"js-sha256": "^0.9.0",
"dedent-js": "^1.0.1"
},
"devDependencies": {
"@cloudflare/workers-types": "^3.11.0",

View file

@ -19,115 +19,120 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Paste</title>
<meta charset="UTF-8">
<title>Paste</title>
</head>
<body>
<h2>Paste Service</h2>
<p>
<a href="https://pb.nekoul.com">pb.nekoul.com</a> is a pastebin-like service hosted on Cloudflare Worker.<br>
This service is primarily designed for own usage and interest only.<br>
All data may be deleted or expired without any notification and guarantee. Please <b>DO NOT</b> abuse this service.<br>
The limit for file upload is <b>10 MB</b> and the paste will be kept for <b>28 days</b> only by default.<br>
The source code is available in my GitHub repository <a href="https://github.com/rikkaneko/paste">[here]</a>.<br>
This webpage is designed for upload files only.
For other operations like changing paste settings and deleting paste, please make use of the
<a href="https://pb.nekoul.com/api">API call</a> with <a href="https://wiki.archlinux.org/title/CURL">curl</a>.
<a href="https://pb.nekoul.com">pb.nekoul.com</a> is a pastebin-like service hosted on Cloudflare Worker.<br>
This service is primarily designed for own usage and interest only.<br>
All data may be deleted or expired without any notification and guarantee. Please <b>DO NOT</b> abuse this
service.<br>
The limit for file upload is <b>10 MB</b> and the paste will be kept for <b>28 days</b> only by default.<br>
The source code is available in my GitHub repository <a href="https://github.com/rikkaneko/paste">[here]</a>.<br>
This webpage is designed for upload files only.
For other operations like changing paste settings and deleting paste, please make use of the
<a href="https://pb.nekoul.com/api">API call</a> with <a href="https://wiki.archlinux.org/title/CURL">curl</a>.
</p>
<form id="upload_file_form" action="https://pb.nekoul.com" method="POST" enctype=multipart/form-data>
<div>
<div>
<div>
<h4>Upload file</h4>
<input id="upload_file" type="file" name="u" >
</div>
<div>
<h4>Upload text</h4>
<textarea id="text_input" style="width: 30%; max-width: 100%; " rows ="5" cols="50"
name="u" placeholder="" spellcheck="false"></textarea>
</div>
<div>
<h4>Settings</h4>
<label for="pass_input">Password: </label>
<input id="pass_input" type="password" name="pass">
<input id="show_pass_button" type="checkbox">
<label for="show_pass_button">Show</label>
</div>
<div>
<label for="read_limit_input">Read limit: </label>
<input id="read_limit_input" type="number" name="read-limit" min="1" style="width: 3em">
</div>
<br>
<div>
<input id="reset_button" type="reset" value="Reset">
<input id="sumbit_form_button" type="submit" value="Sumbit"> (<span id="file_size">0 bytes</span>)
</div>
<h4>Upload file</h4>
<input id="upload_file" type="file" name="u">
</div>
<div>
<h4>Upload text</h4>
<textarea id="text_input" style="width: 30%; max-width: 100%; " rows="5" cols="50"
name="u" placeholder="" spellcheck="false"></textarea>
</div>
<div>
<h4>Settings</h4>
<label for="pass_input">Password: </label>
<input id="pass_input" type="password" name="pass">
<input id="show_pass_button" type="checkbox">
<label for="show_pass_button">Show</label>
</div>
<div>
<label for="read_limit_input">Read limit: </label>
<input id="read_limit_input" type="number" name="read-limit" min="1" style="width: 3em">
</div>
<div>
<input id="show_qr_checkbox" type="checkbox" name="qrcode">
<label for="show_qr_checkbox">Show QR code on sumbitted</label>
</div>
<br>
<div>
<input id="reset_button" type="reset" value="Reset">
<input id="sumbit_form_button" type="submit" value="Sumbit"> (<span id="file_size">0 bytes</span>)
</div>
</div>
</form>
<script>
function update_textarea() {
this.style.height = "auto"
this.style.height = this.scrollHeight + "px";
}
function update_textarea() {
this.style.height = 'auto';
this.style.height = this.scrollHeight + 'px';
}
function update_file_size() {
let bytes = this.files[0]?.size ?? 0;
let size = bytes + " bytes";
const units = ["KiB", "MiB", "GiB", "TiB"];
for (let i = 0, approx = bytes / 1024; approx > 1; approx /= 1024, i++) {
size = approx.toFixed(3) + " " + units[i];
}
document.getElementById("file_size").innerHTML = size;
}
function toggle_password() {
let input_field = document.getElementById("pass_input");
if (this.checked) {
input_field.type = "text";
} else {
input_field.type = "password";
}
}
function reset_form() {
// Re-enable all input elements
let elements = document.getElementById("upload_file_form").elements;
for (let i = 0; i < elements.length; i++) {
elements[i].disabled = false;
}
let size = document.getElementById("file_size");
size.innerHTML = "0 bytes";
}
function handle_submit_form(event) {
let elements = this.elements;
let select_file = elements.namedItem("upload_file");
let text = elements.namedItem("text_input");
if (!!select_file.value.length ^ !!text.value.length) {
// Check file size
const size = select_file.files[0]?.size ?? 0;
if (size > 10485760) {
alert("Upload file size must not excess 10 MB.");
event.preventDefault();
return false;
}
for (let i = 0; i < elements.length; i++) {
elements[i].disabled = elements[i].value.length === 0;
}
} else {
alert("You must either upload a file or upload text, but not bothor neither.");
// Prevent default submission
event.preventDefault();
}
function update_file_size() {
let bytes = this.files[0]?.size ?? 0;
let size = bytes + ' bytes';
const units = ['KiB', 'MiB', 'GiB', 'TiB'];
for (let i = 0, approx = bytes / 1024; approx > 1; approx /= 1024, i++) {
size = approx.toFixed(3) + ' ' + units[i];
}
document.getElementById('file_size').innerHTML = size;
}
document.getElementById("upload_file").addEventListener("input", update_file_size, false);
document.getElementById("text_input").addEventListener("input", update_textarea, false);
document.getElementById("show_pass_button").addEventListener("change", toggle_password, false);
document.getElementById("reset_button").addEventListener("click", reset_form, false);
document.getElementById("upload_file_form").addEventListener("submit", handle_submit_form, false)
function toggle_password() {
let input_field = document.getElementById('pass_input');
if (this.checked) {
input_field.type = 'text';
} else {
input_field.type = 'password';
}
}
function reset_form() {
// Re-enable all input elements
let elements = document.getElementById('upload_file_form').elements;
for (let i = 0; i < elements.length; i++) {
elements[i].disabled = false;
}
let size = document.getElementById('file_size');
size.innerHTML = '0 bytes';
}
function handle_submit_form(event) {
let elements = this.elements;
let select_file = elements.namedItem('upload_file');
let text = elements.namedItem('text_input');
if (!!select_file.value.length ^ !!text.value.length) {
// Check file size
const size = select_file.files[0]?.size ?? 0;
if (size > 10485760) {
alert('Upload file size must not excess 10 MB.');
event.preventDefault();
return false;
}
for (let i = 0; i < elements.length; i++) {
elements[i].disabled = elements[i].value.length === 0;
}
} else {
alert('You must either upload a file or upload text, but not bothor neither.');
// Prevent default submission
event.preventDefault();
}
}
document.getElementById('upload_file').addEventListener('input', update_file_size, false);
document.getElementById('text_input').addEventListener('input', update_textarea, false);
document.getElementById('show_pass_button').addEventListener('change', toggle_password, false);
document.getElementById('reset_button').addEventListener('click', reset_form, false);
document.getElementById('upload_file_form').addEventListener('submit', handle_submit_form, false);
</script>
<br>
<a href="https://nekoul.com">[Homepage]</a><a href="https://pb.nekoul.com/api">[API]</a>

View file

@ -19,6 +19,7 @@
import {AwsClient} from 'aws4fetch';
import {customAlphabet} from 'nanoid';
import {sha256} from 'js-sha256';
import dedent from 'dedent-js';
// Constants
const SERVICE_URL = 'pb.nekoul.com';
@ -27,6 +28,7 @@ const UUID_LENGTH = 4;
export interface Env {
PASTE_INDEX: KVNamespace;
QRCODE: ServiceWorkerGlobalScope;
AWS_ACCESS_KEY_ID: string;
AWS_SECRET_ACCESS_KEY: string;
ENDPOINT: string;
@ -43,18 +45,19 @@ GET /api Fetch API specification
GET /<uuid> Fetch the paste by uuid [x]
# Currently, only the following options is supported for <option>,
# "settings": Fetch the paste information
# "settings": Fetch the paste information, add \`?qr=1\` to enable QR code generation for paste link.
# "download": Download paste as attachment
# "raw": Display paste as plain text
GET /<uuid>/<option> Fetch the paste (code) in rendered HTML with syntax highlighting [ ]
# Only support multipart/form-data and raw request
# For form-data, u=<upload-data>, both title and content-type is deduced from the u
# The following key is supported for both HTTP form request and headers, prefix "x-" for header keys
# x-title: File title, i.e.,
# Add \`?qr=1\` or qrcode=(on|true) using form-data to enable QR code generation for paste link.
# The following key is supported for both HTTP form request and headers, add the prefix "x-" for header keys in raw request
# title: File title, i.e. main.py
# content-type: The media type (MIME) of the data and encoding, i.e., text/plain; charset=UTF-8;
# x-pass: Paste password
# x-read-limit: Limit access times to paste to <read-limit>
# pass: Paste password
# read-limit: Limit access times to paste to <read-limit>
POST / Create new paste [x]
DELETE /<uuid> Delete paste by uuid [x]
@ -64,17 +67,18 @@ POST /<uuid>/settings Update paste setting, i.e., passcode and valid time [ ]
* uuid: [A-z0-9]{${UUID_LENGTH}}
Features
* Password protection [x]
* Expiring paste [ ]
Supported Features
* Password protection
* Limit access times
* Generate QR code for paste link
[ ] indicated not implemented
Limitation
* Max. 10MB file size upload
* Paste will be kept for 180 days only
* Paste will be kept for 28 days only by default
Last update on 7 June.
Last update on 11 Sept.
`;
const gen_id = customAlphabet(
@ -87,7 +91,7 @@ export default {
ctx: ExecutionContext,
): Promise<Response> {
const {url, method, headers} = request;
const {pathname} = new URL(url);
const {pathname, searchParams} = new URL(url);
const path = pathname.replace(/\/+$/, '') || '/';
let cache = caches.default;
@ -138,6 +142,7 @@ export default {
let mime_type: string | undefined;
let password: string | undefined;
let read_limit: number | undefined;
let need_qrcode: boolean = false;
// Content-Type: multipart/form-data
if (content_type.includes('form')) {
const formdata = await request.formData();
@ -170,12 +175,18 @@ export default {
read_limit = Number(count) || undefined;
}
// Check if qrcode generation needed
const qr = formdata.get('qrcode');
if (typeof qr === 'string' && qr.toLowerCase() === 'true' || qr === 'on') {
need_qrcode = true;
}
// Raw body
} else {
if (headers.has('x-title')) {
title = headers.get('x-title') || '';
}
mime_type = headers.get('content-type') || mime_type;
mime_type = headers.get('x-content-type') || mime_type;
password = headers.get('x-pass') || undefined;
const count = headers.get('x-read-limit') || undefined;
if (count !== undefined && !isNaN(+count)) {
@ -184,6 +195,11 @@ export default {
buffer = await request.arrayBuffer();
}
// Check if qrcode generation needed
if (searchParams.get('qr') === '1') {
need_qrcode = true;
}
// Check password rules
if (password && !check_password_rules(password)) {
return new Response('Invalid password. ' +
@ -225,7 +241,7 @@ export default {
// Key will be expired after 28 day if unmodified
ctx.waitUntil(env.PASTE_INDEX.put(uuid, JSON.stringify(descriptor), {expirationTtl: 100800}));
return new Response(get_paste_info(uuid, descriptor));
return new Response(await get_paste_info(uuid, descriptor, env, need_qrcode));
} else {
return new Response('Unable to upload the paste.\n', {
status: 500,
@ -261,8 +277,10 @@ export default {
// Handling /<uuid>/settings
if (option === 'settings') {
switch (method) {
case 'GET':
return new Response(get_paste_info(uuid, descriptor));
case 'GET': {
const need_qrcode = searchParams.get('qr') === '1';
return new Response(await get_paste_info(uuid, descriptor, env, need_qrcode));
}
case 'POST': {
// TODO Implement paste setting update
@ -433,19 +451,35 @@ export default {
},
};
function get_paste_info(uuid: string, descriptor: PasteIndexEntry): string {
async function get_paste_info(uuid: string, descriptor: PasteIndexEntry, env: Env, need_qr: boolean = false): Promise<string> {
const date = new Date(descriptor.last_modified);
return `id: ${uuid}
link: https://${SERVICE_URL}/${uuid}
title: ${descriptor.title || '<empty>'}
mime-type: ${descriptor.mime_type ?? '-'}
size: ${descriptor.size} bytes (${to_human_readable_size(descriptor.size)})
password: ${(!!descriptor.password)}
editable: ${descriptor.editable ? descriptor.editable : true}
remaining read count: ${descriptor.read_count_remain !== undefined ?
let content = dedent`
id: ${uuid}
link: https://${SERVICE_URL}/${uuid}
title: ${descriptor.title || '<empty>'}
mime-type: ${descriptor.mime_type ?? '-'}
size: ${descriptor.size} bytes (${to_human_readable_size(descriptor.size)})
password: ${(!!descriptor.password)}
editable: ${descriptor.editable ? descriptor.editable : true}
remaining read count: ${descriptor.read_count_remain !== undefined ?
descriptor.read_count_remain ? descriptor.read_count_remain : `0 (expired)` : '-'}
created at ${date.toISOString()}
`;
created at ${date.toISOString()}
`;
if (need_qr) {
// Cloudflare currently does not support doing a subrequest to the same zone, use service binding instead
const res = await env.QRCODE.fetch('https://qrcode.nekoul.com?' + new URLSearchParams({
q: `https://${SERVICE_URL}/${uuid}`,
}));
if (res.ok) {
const qrcode = await res.text();
content += '\n';
content += qrcode;
content += '\n';
}
}
return content;
}
function check_password_rules(password: string): boolean {

View file

@ -6,6 +6,9 @@ workers_dev = false
kv_namespaces = [
{ binding = "PASTE_INDEX", id = "a578863da0564cd7beadd9ce4a2d53e8", preview_id = "66d9440e13124099a5e508fe1ff0a489" }
]
services = [
{ binding = "QRCODE", service = "qrcode-gen", environment = "production" }
]
# [secret]
# AWS_ACCESS_KEY_ID