Skip to content

feat: qr code generator #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hmbanan666 merged 2 commits into from
Jul 29, 2025
Merged

feat: qr code generator #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4fe8d87
feat: qr code generator
hmbanan666 Jul 29, 2025
85303fe
chore: guard
hmbanan666 Jul 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion apps/web-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
"nuxt-tiptap-editor": "catalog:",
"openai": "catalog:",
"pinia": "catalog:",
"sharp": "catalog:"
"sharp": "catalog:",
"uqr": "catalog:"
},
"devDependencies": {
"@types/node": "catalog:",
Expand Down
26 changes: 26 additions & 0 deletions apps/web-app/server/api/qr/[text].get.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { renderSVG } from 'uqr'
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Jul 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Verify the uqr package legitimacy and security.

Please ensure the uqr package is from a trusted source and has been security-reviewed, as QR code generation libraries can sometimes have vulnerabilities.

🌐 Web query:

What is the uqr npm package and who maintains it? Are there any known security issues?

💡 Result:

The uqr npm package is a JavaScript library designed to generate QR codes across various environments, including ANSI, Unicode, and SVG formats. It is an ES module with zero dependencies, ensuring tree-shakable functionality. (npmjs.com)

Key Features:

  • Encoding: Transforms plain text or binary data into a QR code represented as a 2D array.
  • Rendering:
    • ANSI: Generates QR codes as ANSI-colored strings suitable for terminal displays.
    • Unicode: Creates QR codes using Unicode characters, with customizable black and white symbols.
    • Unicode Compact: Produces compact QR codes using specific Unicode characters, ideal for terminals with limited height.
    • SVG: Outputs QR codes in SVG format for scalable vector graphics.

Installation:

To install uqr, you can use npm, yarn, or pnpm:

# Using npm
npm install uqr

# Using yarn
yarn add uqr

# Using pnpm
pnpm add uqr

Usage Example:

import { renderSVG, renderANSI } from 'uqr';

const svg = renderSVG('Hello, World!');
console.log(svg);

const ansi = renderANSI('https://192.168.1.100:3000', {
  ecc: 'L', // Error correction level
  border: 2, // Border width
});
console.log(ansi);

Maintenance and Security:

The uqr package was last updated on August 16, 2023, and is maintained by the organization UnJS. (github.com) As of now, there are no known security vulnerabilities associated with this package. To ensure the security of your project, it's advisable to regularly audit your dependencies using tools like npm audit. (docs.npmjs.com)

For more information, you can visit the official GitHub repository: (github.com)

Citations:

QR endpoint security: uqr verified, enhance input validation

  • The uqr package is maintained by UnJS, has zero dependencies, and currently has no known vulnerabilities—so it’s safe to use for rendering SVG QR codes.
  • Wrap decodeURIComponent(text) in a try/catch to guard against malformed URI sequences.
  • Enforce a reasonable maximum length on the text parameter to prevent oversized or malicious payloads.
  • Consider adding rate limiting or request throttling on /api/qr/[text] to mitigate potential abuse.
🤖 Prompt for AI Agents 
In apps/web-app/server/api/qr/[text].get.ts at line 1, enhance security by
wrapping the decodeURIComponent(text) call in a try/catch block to handle
malformed URI sequences gracefully. Add validation to enforce a maximum length
limit on the text parameter to prevent oversized or malicious inputs.
Additionally, consider implementing rate limiting or request throttling on this
endpoint to reduce the risk of abuse.


export default defineEventHandler(async (event) => {
try {
const text = getRouterParam(event, 'text')
if (!text) {
throw createError({
statusCode: 400,
message: 'Text is required',
})
}

if (text.length > 1000) {
throw createError({
statusCode: 400,
message: 'Text too long',
})
}

setHeader(event, 'Content-Type', 'image/svg+xml')

return renderSVG(decodeURIComponent(text))
} catch (error) {
throw errorResolver(error)
}
})
6 changes: 6 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions pnpm-workspace.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ catalog:
tailwindcss-motion: ^1.1.1
typescript: ^5.8.3
unbuild: ^3.6.0
uqr: ^0.1.2
vite: ^7.0.6
vite-tsconfig-paths: ^5.1.4
vitest: ^3.2.4
Expand Down