大家應該很多時都會用到 QR CODE 有些網頁要付費才能用，有些免費但有些廣告彈出，今次我就介紹如何用開源軟件製作自 QR 產生器。

我們使用 chillerlan/php-qrcode 庫, Apache, php 軟件

Apache 用 2.4

PHP 用 8.4+ 以上 , 這是 chillerlan/php-qrcode 的要求 , 我們看看 php 要安裝什麼 modules 才能符合要求

• PHP 8.4+
  • ext-mbstring
  • optional:
    • ext-gd for QRGdImage based output
    • ext-imagick with ImageMagick installed
    • ext-fileinfo required by QRImagick output
    • setasign/fpdf for the PDF output module
    • intervention/image for alternative GD/ImageMagick output

For the QR Code reader, either ext-gd or ext-imagick is required!

chillerlan/php-qrcode 用 composer 安裝

開工

先安裝好 linux 系統我用 ubutu 作演示 , 如果你沒有獨立的 linux server , 可以在 windows 裝 vritualbox , 作測試之用 又或者買 raspberry pi, orange pi 等等做一做 mini server .

# 先安裝 apache web server
apt install apache2

# 再安裝 composer 
apt install composer 

php 要求8.4+ , ubuntu 官方 php package 是 8.3 , 所以用另一方法安裝其他版本的 php

# 先 update package source
sudo apt update

# 再 Add PHP Repository 
sudo apt install software-properties-common gnupg2  apt-transport-https lsb-release ca-certificates

sudo add-apt-repository ppa:ondrej/php

# 安裝 php8.4 
sudo apt install php8.4 php8.4-cli php8.4-gd php8.4-imagick php8.4-zip php8.4-xml php8.4-common php8.4-mbstring

# apache2 啟用 php8.4
a2enmod php8.4

安裝 chillerlan/php-qrcode

# 在你的 home 建立新 folder 把 php-qrcode 下載到該 folder 

cd ~
mkdir temp 
cd temp
composer require chillerlan/php-qrcode

這時 temp folder 內應該有 “vendor” folder 把這個 folder copy 到 “/var/www/html” 裏面 , 再把 index.php 製作出來, 就用 AI 生成吧 !

我用 deepseek 生成 index.php , 這個 file 包含 logo 拼合

<?php
require_once 'vendor/autoload.php';

use chillerlan\QRCode\QRCode;
use chillerlan\QRCode\QROptions;
use chillerlan\QRCode\Common\EccLevel;
use chillerlan\QRCode\Output\QRGdImagePNG;

$qrCodeBase64 = '';
$error = '';
$outputPath = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['text'])) {
    $text = trim($_POST['text']);
    
    if (empty($text)) {
        $error = '请输入要编码的文本或 URL。';
    } else {
        try {
            // 配置二维码选项 - 使用 QRGdImagePNG 输出类
            $options = new QROptions([
                'outputInterface'  => QRGdImagePNG::class,  // PNG 输出
                'eccLevel'         => EccLevel::H,          // 高纠错级别（加 Logo 必需）
                'version'          => 7,
                'scale'            => 10,
                'outputBase64'     => false,
                'imageTransparent' => true,
            ]);
            
            // 生成二维码
            $qrcode = new QRCode($options);
            $qrPngData = $qrcode->render($text);
            
            // 从二进制数据创建 GD 图像资源
            $qrImage = imagecreatefromstring($qrPngData);
            
            if (!$qrImage) {
                throw new Exception('无法创建二维码图像');
            }
            
            // 处理 Logo 上传
            if (isset($_FILES['logo']) && $_FILES['logo']['error'] === UPLOAD_ERR_OK) {
                $logoFile = $_FILES['logo']['tmp_name'];
                $logoInfo = getimagesize($logoFile);
                
                if ($logoInfo && in_array($logoInfo[2], [IMAGETYPE_PNG, IMAGETYPE_JPEG, IMAGETYPE_WEBP])) {
                    switch ($logoInfo[2]) {
                        case IMAGETYPE_PNG:
                            $logoImage = imagecreatefrompng($logoFile);
                            break;
                        case IMAGETYPE_JPEG:
                            $logoImage = imagecreatefromjpeg($logoFile);
                            break;
                        case IMAGETYPE_WEBP:
                            $logoImage = imagecreatefromwebp($logoFile);
                            break;
                        default:
                            $logoImage = null;
                    }
                    
                    if ($logoImage) {
                        $qrWidth = imagesx($qrImage);
                        $qrHeight = imagesy($qrImage);
                        $logoWidth = imagesx($logoImage);
                        $logoHeight = imagesy($logoImage);
                        
                        // Logo 占二维码的 20%
                        $logoMaxWidth = (int)($qrWidth / 5);
                        $logoMaxHeight = (int)($qrHeight / 5);
                        
                        $scale = min($logoMaxWidth / $logoWidth, $logoMaxHeight / $logoHeight, 1);
                        $newLogoWidth = max(1, (int)($logoWidth * $scale));
                        $newLogoHeight = max(1, (int)($logoHeight * $scale));
                        
                        $dstX = (int)(($qrWidth - $newLogoWidth) / 2);
                        $dstY = (int)(($qrHeight - $newLogoHeight) / 2);
                        
                        $resizedLogo = imagecreatetruecolor($newLogoWidth, $newLogoHeight);
                        imagealphablending($resizedLogo, false);
                        imagesavealpha($resizedLogo, true);
                        $transparent = imagecolorallocatealpha($resizedLogo, 0, 0, 0, 127);
                        imagefilledrectangle($resizedLogo, 0, 0, $newLogoWidth, $newLogoHeight, $transparent);
                        
                        imagecopyresampled($resizedLogo, $logoImage, 0, 0, 0, 0, 
                                          $newLogoWidth, $newLogoHeight, $logoWidth, $logoHeight);
                        
                        imagealphablending($qrImage, true);
                        imagecopy($qrImage, $resizedLogo, $dstX, $dstY, 0, 0, 
                                 $newLogoWidth, $newLogoHeight);
                        
                        imagedestroy($logoImage);
                        imagedestroy($resizedLogo);
                    }
                }
            }
            
            // 转为 Base64 显示
            ob_start();
            imagepng($qrImage);
            $qrPngData = ob_get_clean();
            $qrCodeBase64 = 'data:image/png;base64,' . base64_encode($qrPngData);
            
            // 保存文件
            if (!is_dir('qrcodes')) {
                mkdir('qrcodes', 0777, true);
            }
            $outputPath = 'qrcodes/qr_' . time() . '.png';
            imagepng($qrImage, $outputPath);
            
            imagedestroy($qrImage);
            
        } catch (Exception $e) {
            $error = '生成二维码失败：' . $e->getMessage();
        }
    }
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>带 Logo 的二维码生成器</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        .container {
            max-width: 700px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            padding: 40px;
        }
        h1 { text-align: center; margin-bottom: 30px; color: #333; }
        .form-group { margin-bottom: 20px; }
        label { display: block; margin-bottom: 8px; font-weight: 500; color: #555; }
        textarea, input[type="file"] {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 14px;
        }
        textarea:focus, input:focus { outline: none; border-color: #667eea; }
        button {
            width: 100%;
            padding: 12px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
        }
        button:hover { transform: translateY(-2px); }
        .result { text-align: center; margin-top: 30px; }
        .qr-container { margin: 20px 0; }
        .qr-container img { max-width: 100%; border-radius: 10px; }
        .download-link {
            display: inline-block;
            padding: 10px 20px;
            background: #4CAF50;
            color: white;
            text-decoration: none;
            border-radius: 8px;
        }
        .error { background: #fee; color: #c33; padding: 10px; border-radius: 8px; margin-top: 20px; }
        .tip { background: #e8f0fe; padding: 10px; border-radius: 8px; margin-top: 15px; font-size: 13px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>📱 带 Logo 的二维码生成器</h1>
        
        <form method="POST" enctype="multipart/form-data">
            <div class="form-group">
                <label>文本或 URL：</label>
                <textarea name="text" rows="3" placeholder="https://github.com"></textarea>
            </div>
            <div class="form-group">
                <label>Logo 图片（可选）：</label>
                <input type="file" name="logo" accept="image/png,image/jpeg,image/webp">
            </div>
            <button type="submit">✨ 生成二维码</button>
        </form>
        
        <?php if ($error): ?>
            <div class="error">⚠️ <?php echo htmlspecialchars($error); ?></div>
        <?php endif; ?>
        
        <?php if ($qrCodeBase64): ?>
            <div class="result">
                <div class="qr-container">
                    <img src="<?php echo $qrCodeBase64; ?>" alt="QR Code">
                </div>
                <?php if ($outputPath): ?>
                    <a href="<?php echo $outputPath; ?>" download class="download-link">💾 下载 PNG</a>
                <?php endif; ?>
            </div>
        <?php endif; ?>
        
        <div class="tip">
            💡 提示：需要 PHP 8.2+ 和 GD 扩展。Logo 会自动居中缩放，建议使用透明背景 PNG。
        </div>
    </div>
</body>
</html>

如果順利的話 , 你開瀏覽器輸入你的 server ip

這是最基本應用 , 你還可以叫 deepseek 加上不同的內容 , 例如 : QR CODE 底色等等 …….

Demo 測試演示

login name & password = demo

事源近日同同事閒談時，她說女兒學校比黑客入侵，全校系統停擺對外對內都是。

所以我又重新審視 kenng.hk 現有系統的安全性，雖然我的網站內的資料沒有什麼價值，但都希望學習加強保安的知識。

什麼是 XSS 呢?

以下內容轉載自 維基百科

跨網站指令碼（英語：Cross-site scripting，通常簡稱為：XSS）是一種網站應用程式的安全漏洞攻擊，是代碼注入的一種。它允許惡意使用者將程式碼注入到網頁上，其他使用者在觀看網頁時就會受到影響。這類攻擊通常包含了HTML以及使用者端手稿語言。

XSS攻擊通常指的是通過利用網頁開發時留下的漏洞，通過巧妙的方法注入惡意指令代碼到網頁，使使用者載入並執行攻擊者惡意製造的網頁程式。這些惡意網頁程式通常是JavaScript，但實際上也可以包括Java，VBScript，ActiveX，Flash或者甚至是普通的HTML。攻擊成功後，攻擊者可能得到更高的權限（如執行一些操作）、私密網頁內容、對談和cookie等各種內容。

更多詳情可以參考以下網站:

https://www.cloudflare.com/zh-tw/learning/security/threats/cross-site-scripting

https://baike.baidu.com/item/XSS%E6%94%BB%E5%87%BB/954065

如何防範 XSS 攻擊可以詳閱以上的連結 !

我自己就使用 CSP 來做一些保障措施 , 那麼什麼是 CSP 呢?

以下內容轉載自 Mozilla.org

内容安全策略（CSP）

内容安全策略（CSP）是一个额外的安全层，用于检测并削弱某些特定类型的攻击，包括跨站脚本（XSS）和数据注入攻击等。无论是数据盗取、网站内容污染还是恶意软件分发，这些攻击都是主要的手段。

CSP 被设计成完全向后兼容（除 CSP2 在向后兼容有明确提及的不一致; 更多细节查看这里 章节 1.1）。不支持 CSP 的浏览器也能与实现了 CSP 的服务器正常工作，反之亦然：不支持 CSP 的浏览器只会忽略它，如常运行，默认为网页内容使用标准的同源策略。如果网站不提供 CSP 标头，浏览器也使用标准的同源策略。

为使 CSP 可用，你需要配置你的网络服务器返回 Content-Security-Policy HTTP 标头（有时你会看到 X-Content-Security-Policy 标头，但那是旧版本，并且你无须再如此指定它）。

除此之外，<meta> 元素也可以被用来配置该策略，例如

htmlCopy

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; img-src https://*; child-src 'none';" />

备注：某些功能（例如发送 CSP 违规报告）仅在使用 HTTP 标头时可用。

威胁

缓解跨站脚本攻击

CSP 的主要目标是减少和报告 XSS 攻击。XSS 攻击利用了浏览器对于从服务器所获取的内容的信任。恶意脚本在受害者的浏览器中得以运行，因为浏览器信任其内容来源，即使有的时候这些脚本并非来自于它本该来的地方。

CSP 通过指定有效域——即浏览器认可的可执行脚本的有效来源——使服务器管理者有能力减少或消除 XSS 攻击所依赖的载体。一个 CSP 兼容的浏览器将会仅执行从白名单域获取到的脚本文件，忽略所有的其他脚本（包括内联脚本和 HTML 的事件处理属性）。

作为一种终极防护形式，始终不允许执行脚本的站点可以选择全面禁止脚本执行。

缓解数据包嗅探攻击

除限制可以加载内容的域，服务器还可指明哪种协议允许使用；比如（从理想化的安全角度来说），服务器可指定所有内容必须通过 HTTPS 加载。一个完整的数据安全传输策略不仅强制使用 HTTPS 进行数据传输，也为所有的 cookie 标记 secure 标识，并且提供自动的重定向使得 HTTP 页面导向 HTTPS 版本。网站也可以使用 Strict-Transport-Security HTTP 标头确保连接它的浏览器只使用加密通道。

使用 CSP

配置内容安全策略涉及到添加 Content-Security-Policy HTTP 标头到一个页面，并配置相应的值，以控制用户代理（浏览器等）可以为该页面获取哪些资源。比如一个可以上传文件和显示图片页面，应该允许图片来自任何地方，但限制表单的 action 属性只可以赋值为指定的端点。一个经过恰当设计的内容安全策略应该可以有效的保护页面免受跨站脚本攻击。本文阐述如何恰当的构造这样的标头，并提供了一些例子。

詳情可以參考以下網址:

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Guides/CSP

https://www.cnblogs.com/wuguanglin/p/XSS.html

https://aszx87410.github.io/beyond-xss/ch2/xss-defense-csp

完成後可以用以下網站測試你的 SERVER 的 CSP 策略

https://csper.io/evaluator

https://csp-evaluator.withgoogle.com