当前位置:首页 > 文章列表 > 文章 > 前端 > HTML表单实现数字签名及验证来源的方法如下:一、数字签名的实现前端生成签名在用户提交表单前,使用JavaScript对表单数据进行哈希处理,并用私钥进行加密,生成数字签名。例如:constdata={username:'user',password:'pass'};consthash=CryptoJS.SHA256(JSON.stringify(data)).toString();constsi

HTML表单实现数字签名及验证来源的方法如下:一、数字签名的实现前端生成签名在用户提交表单前,使用JavaScript对表单数据进行哈希处理,并用私钥进行加密,生成数字签名。例如:constdata={username:'user',password:'pass'};consthash=CryptoJS.SHA256(JSON.stringify(data)).toString();constsi

2025-08-21 12:14:59 0浏览 收藏

文章不知道大家是否熟悉?今天我将给大家介绍《HTML表单如何实现数字签名?怎样验证来源?》,这篇文章主要会讲到等等知识点,如果你在看完本篇文章后,有更好的建议或者发现哪里有问题,希望大家都能积极评论指出,谢谢!希望我们能一起加油进步!

答案:HTML表单通过前端JavaScript对数据哈希并用私钥签名,后端用公钥验证签名一致性,结合时间戳或nonce防重放;私钥应由HSM等安全机制存储,避免前端留存;用户权限撤销可通过CRL、密钥轮换或账户锁定实现;推荐SHA-256及以上哈希算法,RSA或ECDSA加密算法确保安全性。

HTML表单如何实现数字签名?怎样验证表单的来源?

HTML表单实现数字签名,核心在于对表单数据进行哈希,然后用私钥加密哈希值,最后将签名附加到表单提交。验证表单来源则需要公钥解密签名,再对接收到的表单数据进行同样的哈希并比对。

解决方案:

  1. 前端签名生成:

    • 使用JavaScript获取表单数据,将其序列化为字符串。
    • 使用SHA-256等哈希算法对字符串进行哈希。
    • 使用Web Crypto API或类似的库,用用户的私钥对哈希值进行签名。
    • 将原始表单数据和签名一起提交到服务器。
    async function signForm(privateKey, formData) {
        const dataString = JSON.stringify(formData); // 序列化表单数据
        const dataBuffer = new TextEncoder().encode(dataString);
        const hashBuffer = await crypto.subtle.digest('SHA-256', dataBuffer);
        const signatureBuffer = await crypto.subtle.sign(
            {
                name: 'RSASSA-PKCS1-v1_5',
                hash: {name: 'SHA-256'},
            },
            privateKey, // 私钥
            hashBuffer
        );
    
        const signature = btoa(String.fromCharCode(...new Uint8Array(signatureBuffer))); // Base64编码
        return { data: dataString, signature: signature };
    }
    
    // 示例:提交表单
    async function submitForm() {
        const formData = { name: document.getElementById('name').value, email: document.getElementById('email').value };
        const keyPair = await crypto.subtle.generateKey(
            {
                name: 'RSASSA-PKCS1-v1_5',
                modulusLength: 2048,
                publicExponent: new Uint8Array([0x01, 0x00, 0x01]),
                hash: {name: 'SHA-256'},
            },
            true,
            ['sign', 'verify']
        );
    
        const signedData = await signForm(keyPair.privateKey, formData);
        // 将signedData.data和signedData.signature添加到表单中,并提交
        document.getElementById('data').value = signedData.data;
        document.getElementById('signature').value = signedData.signature;
        document.getElementById('myForm').submit();
    
        // 导出公钥 (实际应用中,公钥应安全地传递给服务器)
        crypto.subtle.exportKey(
            "spki",
            keyPair.publicKey
        ).then(
            function(key){
                let exportedKeyString = btoa(String.fromCharCode(...new Uint8Array(key)));
                console.log("公钥(Base64):", exportedKeyString);
            }
        )
    }
    
  2. 后端签名验证:

    • 服务器接收到表单数据和签名。
    • 使用相同的哈希算法对接收到的表单数据进行哈希。
    • 使用用户的公钥解密签名。
    • 比较解密后的哈希值与服务器端计算的哈希值。如果匹配,则验证通过。
    import hashlib
    import base64
    from cryptography.hazmat.primitives import hashes
    from cryptography.hazmat.primitives.asymmetric import padding
    from cryptography.hazmat.primitives import serialization
    from cryptography.hazmat.backends import default_backend
    from cryptography.exceptions import InvalidSignature
    
    def verify_signature(public_key_pem, data, signature):
        """验证签名."""
        public_key = serialization.load_pem_public_key(
            public_key_pem.encode('utf-8'),
            backend=default_backend()
        )
    
        data_bytes = data.encode('utf-8')
        signature_bytes = base64.b64decode(signature)
    
        try:
            public_key.verify(
                signature_bytes,
                data_bytes,
                padding.PKCS1v15(),
                hashes.SHA256()
            )
            return True
        except InvalidSignature:
            return False
        except Exception as e:
            print(f"验证出错: {e}")
            return False
    
    # 示例用法
    public_key_pem = "-----BEGIN PUBLIC KEY-----\nMIICIjANBgkqhkiG9w0BAQEFAAOCAg8AMIICCgKCAgEArW9xNKjYXF+Y8x8v5X6p\n...\n-----END PUBLIC KEY-----" # 替换为实际的公钥
    data = '{"name": "John Doe", "email": "john.doe@example.com"}' # 接收到的表单数据
    signature = "签名的Base64字符串" # 接收到的签名
    
    is_valid = verify_signature(public_key_pem, data, signature)
    
    if is_valid:
        print("签名有效")
    else:
        print("签名无效")
    
  3. 防止重放攻击:

    • 在签名中加入时间戳,服务器验证签名时检查时间戳是否在有效期内。
    • 使用nonce(随机数),服务器记录已使用的nonce,防止重复使用。

如何生成和安全存储私钥?

  • 生成私钥: 使用Web Crypto API(前端)或OpenSSL(后端)等工具生成强随机的私钥。
  • 安全存储:
    • 前端: 永远不要在前端存储私钥!用户的私钥应该由专门的密钥管理系统(如硬件安全模块HSM或可信平台模块TPM)安全保管。如果必须在浏览器中使用,可以考虑使用浏览器扩展或安全存储API,但风险较高。
    • 后端: 使用硬件安全模块(HSM)、密钥管理系统(KMS)或加密的文件系统来存储私钥。 访问私钥需要严格的身份验证和授权。

如何处理用户撤销签名权限的情况?

  • 证书吊销列表(CRL): 如果使用基于证书的签名,可以使用CRL来吊销已泄露或不再有效的证书。
  • 密钥轮换: 定期轮换用户的密钥,旧密钥失效后,之前的签名也随之失效。
  • 账户锁定: 如果用户账户被盗或存在安全风险,可以锁定账户,使其无法进行签名。
  • 签名服务: 使用第三方签名服务,可以集中管理用户的密钥和签名策略,方便进行权限控制和撤销。

如何选择合适的哈希算法和加密算法?

  • 哈希算法: 推荐使用SHA-256或更强的哈希算法,如SHA-384或SHA-512。 MD5和SHA-1等算法已被证明存在安全漏洞,不应使用。
  • 加密算法: RSA和ECDSA是常用的数字签名算法。 RSA适用于密钥管理较为简单的场景,ECDSA在移动设备和资源受限的环境下更具优势。 选择合适的密钥长度也很重要,RSA建议使用2048位或更长,ECDSA建议使用至少256位的曲线。

今天关于《HTML表单实现数字签名及验证来源的方法如下:一、数字签名的实现前端生成签名在用户提交表单前,使用JavaScript对表单数据进行哈希处理,并用私钥进行加密,生成数字签名。例如:constdata={username:'user',password:'pass'};consthash=CryptoJS.SHA256(JSON.stringify(data)).toString();constsignature=signWithPrivateKey(hash);//使用私钥签名将签名附加到表单将生成的签名作为隐藏字段添加到表单中,随表单数据一起提交。后端验证签名后端接收到表单数据后,重新计算数据的哈希值,并使用公钥验证签名是否有效。#Python示例(使用cryptography库)fromcryptography.hazmat.primitivesimporthashesfromcryptography.hazmat.primitives.asymmetricimportpaddingdefverify_signature(data,signature,public_key):try:public_key.verify(signature,data.encode(),padding.PKCS1v15(),hashes.SHA256())returnTrueexceptExceptionas》的内容介绍就到此结束,如果有什么疑问或者建议,可以在golang学习网公众号下多多回复交流;文中若有不正之处,也希望回复留言以告知!

Symfony对象转数组的实用方法Symfony对象转数组的实用方法
上一篇
Symfony对象转数组的实用方法
HTML类选择器是什么?class和id区别详解
下一篇
HTML类选择器是什么?class和id区别详解
查看更多
最新文章
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
    542次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
    511次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
    498次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
    484次学习
查看更多
AI推荐
  • 千音漫语:智能声音创作助手,AI配音、音视频翻译一站搞定!
    千音漫语
    千音漫语,北京熠声科技倾力打造的智能声音创作助手,提供AI配音、音视频翻译、语音识别、声音克隆等强大功能,助力有声书制作、视频创作、教育培训等领域,官网:https://qianyin123.com
    224次使用
  • MiniWork:智能高效AI工具平台,一站式工作学习效率解决方案
    MiniWork
    MiniWork是一款智能高效的AI工具平台,专为提升工作与学习效率而设计。整合文本处理、图像生成、营销策划及运营管理等多元AI工具,提供精准智能解决方案,让复杂工作简单高效。
    221次使用
  • NoCode (nocode.cn):零代码构建应用、网站、管理系统,降低开发门槛
    NoCode
    NoCode (nocode.cn)是领先的无代码开发平台,通过拖放、AI对话等简单操作,助您快速创建各类应用、网站与管理系统。无需编程知识,轻松实现个人生活、商业经营、企业管理多场景需求,大幅降低开发门槛,高效低成本。
    219次使用
  • 达医智影:阿里巴巴达摩院医疗AI影像早筛平台,CT一扫多筛癌症急慢病
    达医智影
    达医智影,阿里巴巴达摩院医疗AI创新力作。全球率先利用平扫CT实现“一扫多筛”,仅一次CT扫描即可高效识别多种癌症、急症及慢病,为疾病早期发现提供智能、精准的AI影像早筛解决方案。
    224次使用
  • 智慧芽Eureka:更懂技术创新的AI Agent平台,助力研发效率飞跃
    智慧芽Eureka
    智慧芽Eureka,专为技术创新打造的AI Agent平台。深度理解专利、研发、生物医药、材料、科创等复杂场景,通过专家级AI Agent精准执行任务,智能化工作流解放70%生产力,让您专注核心创新。
    244次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码