帝云CMS v4.3.9升级公告

费开源可商用PHP万能建站程序

增加平板排除为移动端的识别开关[6-3]

增加网站表单和模块表单[未通过]状态的设置[6-4]

关联内容和关联用户字段增加最大数量选择设置值[6-8]

增加自动获取[单文件、多文件、图片字段]的首图作为缩略图开关[6-9]

增加模板标签modules支持多个模块组合查询[6-15]

增加开发者工具栏views选项，用于查看当前页面的模板路径、加载时间、模板变量[6-15]

增加后台界面右侧导航：快速菜单链接、访问历史菜单记录[6-18]

增加html实体字符转换函数：dr_html_code[6-21]

增加域名准确性验证form类方法[6-23]

在开发者工具栏目views选项中加入模板引用提示信息[6-23]

系统体检时增加移动端的常规配置检测[6-23]

增加判断数据库名称的规范性语句[6-25]

增加文件上传后的钩子点（upload_file）[7-2]

增加访问网站首页的钩子点（cms_index）[7-3]

在删除用户账号时增加确认删除范围按钮，全部删除|部分删除[7-4]

内容发布前的基础类_content_post_before增加错误返回值写法[7-6]

增加一键初始化整站用户的权限设置[7-10]

手机域名绑定界面增加测试按钮，测试域名是否绑定成功[7-12]

关联用户字段Members增加设置只允许关联的用户组选项[7-13]

前端首页index.html模板中增加[滚动调用示例]，便于学习研究[7-13]

增加用户组有效时长单位（天/月/年）[7-14]

增加用户退出登录的钩子member_logout [7-15]

变更域名处增加测试新域名是否可用状态检测 [7-15]

修复每日登陆的exp经验值会重复累加问题[6-2]

栏目目录支持(空格 _ -)符号[6-2]

应用程序不存在时标记为404状态[6-2]

栏目管理界面提供检测未安装的模块栏目，并提示模块未安装[6-3]

后台生成菜单字符串允许开发者使用自定义函数来重组变更[6-3]

独立模块的栏目设置单页属性时自动创建content字段属性[6-5]

将模块评论功能从框架中移除[6-7]

修复内容统计分时间段数据无效的问题[6-7]

生成规则是加入对栏目目录的新规则识别[6-9]

模板标签支持对field自定义别名的匹配[6-11]

关联字段支持对主题名称显示值的修改[6-12]

后台会员资料修改界面仅超管账户可看到全部字段数据[6-14]

上传类字段浏览界面中删除未使用的附件时新增提示删除操作[6-15]

百度编辑器上传视频播放器由embed改成video[6-16]

将第三方登录程序转换为组件，需在应用市场下载该组件[6-17]

优化错误日志显示记录[6-18]

用户通知设置处改为按插件分组归类显示[6-19]

修复后台在编辑模板代码时出现的异常情况[6-20]

Clink和Cbottom支持加载自身模块的属性规则[6-22]

修复用户组等级管理单位值会显示错误的情况[6-22]

修复ftable在编辑删除选项后会引起存储异常的情况[6-23]

修复CNVD-C-2020-131664代码执行漏洞[6-23]

单页栏目seo标签中剔除“共享”文字[6-23]

修复后台发布内容是选择更新时间存储无效的问题[6-29]

修复移除内容推荐位时报错问题[6-30]

Textarea和Ueditor字段的默认存储值输入框改成多行输入框[7-3]

后台系统回收充值金额处增加回收次数限制判断[7-7]

修复本地磁盘存储策略无法获取图片尺寸信息问题[7-9]

在栏目管理处增加用户权限设置功能[7-10]

模块推荐位数量改为无限添加[7-10]

文件上传字段File和Files进行优化JS代码[7-13]

特别升级提示：

1、使用过快捷登录（微信、QQ），需要在应用市场下载安装对应的登录插件（不影响升级数据）

2、使用过[评论功能]的，需要在应用市场下载安装[评论系统]插件（不影响升级数据）

后台截图

在开篇

什么是表单呢？当前端想要提交数据给后端，怎么搞？那么在前端开发中，表单是常用的手段，比如常见的场景有：登录框、账号注册页、主机信息录入CMDB等等场景都是需要表单。那么在本篇中，笔者除了讲一些基本的知识点，还会再结合后端的方式来演示如何接收表单提交的数据。希望这些小小的演示可以起到抛砖引玉的效果。

盘点HTML表单基础

1. from元素

构建表单，主要是通过from元素，我们先来一个最简单的小栗子，看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息录入CMDB</h3>
        <form>
            <label for="hostname">主机名：</label><br>
            <input type="text" id="hostname" name="hostname"><br>
            <label for="ipaddr">IP地址：</label><br>
            <input type="text" id="ipaddr" name="ipaddr"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下图：

通上面的小栗子可以知道，form表单的主要通途是用于收集用户的输入。在from表单里面，还包含着各种不同类型的input元素，比如我们上面小栗子中用到的文本（text）、提交按钮（submit）。

input元素是表单里最重要的元素，它有很多type属性，下面我们来总结下：

类型描述text文本输入radio单选按钮checkbox提交按钮submit提交按钮button可单击按钮

在上面小栗子中，除了input元素之外，不知道大家注意label元素没有。label元素的主要用途是为input元素定义标签，且用for属性和input元素的id属性进行绑定呢。

2. 单选按钮

什么是单选按钮？就是在多个选项中，你只能选其中1个，不能多选。下面我们看个小栗子，看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>问答题1（单选）：某站长，工作经验不足1年，仅从互联网收集学习资料制定学习路线售卖盈利，从道德层面角度分析是否有问题？</h3>
        <form>
            <input type="radio" id="i1" name="problem" value="yes">
            <label for="i1">有</label>
            <input type="radio" id="i2" name="problem" value="no">
            <label for="i2">没有</label>
            <input type="radio" id="i3" name="problem" value="not_clear">
            <label for="i3">不清楚</label>
        </form>
        <h3>问答题2（单选）：实际工作经验不足1年的人员折腾的学习资料您觉得是否对你有帮助？</h3>
        <form>
            <input type="radio" id="w1" name="problem" value="yes">
            <label for="w1">有</label>
            <input type="radio" id="w2" name="problem" value="no">
            <label for="w2">没有</label>
            <input type="radio" id="w3" name="problem" value="not_clear">
            <label for="w3">不清楚</label>
        </form>
    </body>
</html>

效果如下图：

上面的小栗子中，出了两道问答题，均为单选题。那么，类似的需求都是可以使用输入类型为radio来实现需要使用单选按钮的场景。

3. 复选框

什么是复选框？复选框就是可以选择多个选项，当需要多选的时候，使用复选框输入类型就对了。看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>问答题1（单选）：某站长，工作经验不足1年，仅从互联网收集学习资料制定学习路线售卖盈利，从道德层面角度分析是否有问题？</h3>
        <form>
            <input type="checkbox" id="i1" name="problem" value="yes">
            <label for="i1">有</label>
            <input type="checkbox" id="i2" name="problem" value="no">
            <label for="i2">没有</label>
            <input type="checkbox" id="i3" name="problem" value="not_clear">
            <label for="i3">不清楚</label><br>
            <input type="submit" value="提交">
        </form>
        <h3>问答题2（单选）：实际工作经验不足1年的人员折腾的学习资料您觉得是否对你有帮助？</h3>
        <form>
            <input type="checkbox" id="w1" name="problem" value="yes">
            <label for="w1">有</label>
            <input type="checkbox" id="w2" name="problem" value="no">
            <label for="w2">没有</label>
            <input type="checkbox" id="w3" name="problem" value="not_clear">
            <label for="w3">不清楚</label><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下图：

上面的小栗子中，实现复选框的输入类型是checkbox，这个是重点哦！

4. 提交按钮

当有数据要提交给后端的时候怎么搞？如果后端是API服务，可以给它提交json。如果是前端页面，就需要通过构建表单来获取用户的输入。基于表单提交数据给后端，怎么提交？需要一个可以点击的提交按钮，那这个按钮怎么来？先看下面代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form>
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

效果如下图：

输入类型为submit，说明它就是提交按钮，注意上面代码type="submit"了吗？

HTML表单重要属性

1. Action属性

在之前的例子中，前端表单需要将数据提交给后端，除了需要一个提交按钮外，还需要action属性。当点击提交按钮后，表单的数据该发到后端的哪个url进行处理，就是定义在action属性中。接下来，我们结合前端和后端直接来个小实战，后端代码用Python的Flask框架。

前端代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代码：

from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=["GET", "POST"])
def ttropsstack():
    args = request.args
    print 'ip addr is: %s' % args.get('ip')
    return 'ok'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

前端和后端的代码写完后，我们接下来看看效果

输入IP地址后，点击提交

这个ok是后端返回的

后端接收到数据后，啥也没做，只是做了简单打印

这个小栗子很简单，通过这个小栗子，是不是对action属性的用法有了进一步的理解呢？

2. Method属性

method属性的用途是指定提交数据的http方法，通常有2个，get和post。接下来我们在上个小栗子的基础上做个小改造，看下面代码

前端代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="get">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代码：

from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=["POST"])
def ttropsstack():
    args = request.args
    print 'ip addr is: %s' % args.get('ip')
    return 'ok'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

当前端输入数据后，提交表单时，直接告诉你这是不允许的方法

在这个例子中，是因为前端的表单了指定了method为get请求，而后端接收数据的method规定了需要post请求，故所以出现这个问题。

下面我们改造一下后端代码：

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        print request.get_data(as_text=True)
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

前端表单中的method还是保持get请求，再次提交，后端的返回如下：

看到了吗？后端判断前端过来的请求是get还是post，很显然，前端过来的请求是get，并且返回了非常友好的提示。

接下来我们继续改造一下前端的代码，将请求修改为post，代码如下：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <h3>主机信息</h3>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="ipaddr">IP地址</label>
            <input type="text" id="ipaddr" name="ip"><br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端代码也稍微改造一下，改变接收前端数据的方法

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        a = request.form
        print a.get('ip')
        print type(a)
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

输入IP地址，并点击提交

提交后，后端给前端返回了ok

接下来看下后端，后端啥也没做，就获取到表单的数据，然后打印了数据，并且打印了下数据类型

好了，关于前端的action属性和Method属性就讲到这里了。为了讲解action和method，还结合了后端的一丢丢知识，前端和后端的知识点以后都会慢慢讲到哈！

HTML表单常用元素

1. 下拉列表

先来个前端代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist">运维开发应掌握的技能：</label>
            <select id="opslist" name="opslist">
                <option value="python">Python语言</option>
                <option value="go">Go语言</option>
                <option value="shell">Shell语言</option>
                <option value="database">数据库</option>
                <option value="frontend">前端</option>
                <option value="linux">Linux</option>
                <option value="network">网络</option>
                <option value="storage">存储</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

后端代码：

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        a = request.form
        print a.get('opslist')
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

在下拉框中选择“Go语言”，并提交

后端啥也没干，就只做了打印

2. 允许多选

前端代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>彩虹运维技术栈社区主页</title>
    </head>
    <body>
        <h2>彩虹运维技术栈社区，公众号ID：TtrOpsStack</h2>
        <form action="http://192.168.11.10:8088/ttropsstack" target="_blank" method="post">
            <label for="opslist">运维开发应掌握的技能：</label>
            <select id="opslist" name="opslist" size="6" multiple>
                <option value="python">Python语言</option>
                <option value="go">Go语言</option>
                <option value="shell">Shell语言</option>
                <option value="database">数据库</option>
                <option value="frontend">前端</option>
                <option value="linux">Linux</option>
                <option value="network">网络</option>
                <option value="storage">存储</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

上述前端代码中，是使用multiple属性来实现选择多个值。

后端代码的打印方式稍微做了些许调整：

# coding: utf8
from flask import Flask, request

webapp = Flask(__name__)

@webapp.route('/ttropsstack', methods=['GET','POST'])
def ttropsstack():
    if request.method == 'POST':
        data = request.get_data()
        print data
        return 'ok'
    else:
        return '提交数据需要post请求'

if __name__ == '__main__':

    webapp.run(host="0.0.0.0", port=8088, debug=True)

按住ctrl或者shift键可进行多选

后端打印的效果图下图：

写在最后

关于表单基础知识点的讲解就这么愉快的结束了，关于更多表单的元素、输入属性、输入类型可自行查阅和实战，笔者因时间有限就不一一演示。感谢您的阅读，望多多关注我们、点赞、转发！

本文转载于（喜欢的盆友关注我们）：https://mp.weixin.qq.com/s/L-Msv39JrF7AzRx4K1OLjA

景

最近小编接到一个获取网站请求数据的需求，要求抓取网站某个页面请求的数据。我使用Google Chrome浏览器查看了一下请求链接的传入参数，发现需要传入一个Token值才能获取数据。于是我在Chrome中登录后，通过Postman请求成功，并将Token存储到了Cookie中。然而问题又来了，在代码层面如何获取这个Token呢？

解决方案

小编在网上查了一圈，发现Chrome浏览器的Cookie存储在本地的sqlite数据库中。在Chrome的安装目录中找到了sqlite的文件，通过读取sqlite数据库即可获得了Cookie值。如下图：

其中name是cookie的名称, encrypted_value字段是加密的cookie值，host_key就是站点域名了。但是这个Cookie值是加密的。

存储cookie目录：

C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\Network\Cookies

各个版本的目录可能不同，有的在Local State文件夹下。

小编继续搜索，发现Chrome浏览器是开源的，算法是公开的，用到的加密算法是aes加密算法。我们不需要知道这个算法，只需要知道此算法需要一个秘钥，通过这个秘钥就可以进行加密和解密，代码如下。

实现代码

关键代码如下：

  using (SqliteConnection connection = new SqliteConnection())
            {
                //1、获取google Chrome浏览器目录
                var userprofilePath = Environment.GetEnvironmentVariable("USERPROFILE");
                 var sourceFile= $@"{userprofilePath}\AppData\Local\Google\Chrome\User Data\Default\Network\Cookies"; 
                //var sourceFile = $@"{userprofilePath}\Desktop\11111111.txt";
                var targetFile = $@"{Directory.GetCurrentDirectory()}\GoogleFile\Cookies";

                //2、拷贝文件到本地目录，防止文件被占用
                FileInfo file = new FileInfo(sourceFile);
                if(!Directory.Exists($@"{Directory.GetCurrentDirectory()}\GoogleFile"))
                    Directory.CreateDirectory($@"{Directory.GetCurrentDirectory()}\GoogleFile");
                if (file.Exists)
                {
                    file.CopyTo(targetFile, true);
                }

                //3、链接sqlite数据库
                connection.ConnectionString = $@"DataSource="+ targetFile;
                 connection.Open();
                //4、通过select查询相关的语句
                SqliteCommand command = new SqliteCommand("select host_key,name,encrypted_value from cookies where name='public-token' and host_key='.cponline.cnipa.gov.cn'", connection);
                SqliteDataReader dataReader = command.ExecuteReader();
                dataReader.Read();
                byte[] encryptedValue = (byte[])dataReader["encrypted_value"];

                //5、解密数据
                int keyLength = 256 / 8;
                int nonceLength = 96 / 8;
                String kEncryptionVersionPrefix = "v10";
                int GCM_TAG_LENGTH = 16;
                //字符串内容取自C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Local State文件的encrypted_key
                byte[] encryptedKeyBytes = Convert.FromBase64String("RFBBUEkBAAAA0Iyd3wEV0RGMegDAT8KX6wEAAACVAmSA/y7+TLs+3WWdDv1ZAAAAAAIAAAAAABBmAAAAAQAAIAAAABV7dDMB8p+vKnLEjnrhnWB4DAbB/k5XAtjWGFnci/3qAAAAAA6AAAAAAgAAIAAAAH/pnc+fF6dhG8Fpw6yQezIXtMw48xNvuyRub/cZ62XaMAAAAP1pl5QqRJmd1J4V++dhE63MEA9F4NzCHb1aOMgTnFCo1+xSHYovSTzCoYFvoDfIFUAAAAAZzDzWwwpUm6yZG9tpYu/ioRSO8V16MetQy2s7L9HHO03Q6bO8Nr05Erl1QbjCVoSgSOU4krcerUsngMwIYFyb");
                encryptedKeyBytes = encryptedKeyBytes.Skip("DPAPI".Length).Take(encryptedKeyBytes.Length - "DPAPI".Length).ToArray();
                var keyBytes = System.Security.Cryptography.ProtectedData.Unprotect(encryptedKeyBytes, null, System.Security.Cryptography.DataProtectionScope.CurrentUser);
                var nonce = encryptedValue.Skip(kEncryptionVersionPrefix.Length).Take(nonceLength).ToArray();
                encryptedValue = encryptedValue.Skip(kEncryptionVersionPrefix.Length + nonceLength).Take(encryptedValue.Length - (kEncryptionVersionPrefix.Length + nonceLength)).ToArray();
                var str = System.Web.HttpUtility.UrlDecode(AesGcmDecrypt(keyBytes, nonce, encryptedValue));

                //6、获得值
                Console.WriteLine($"{dataReader["host_key"]}-{dataReader["name"]}-{str}");
                //7、关闭数据
                connection.Close();
            }

以上代码列出了解密步骤，大家可以根据自己的项目情况调整。

AesGcmDecrypt解密的方法：

        public static string AesGcmDecrypt(byte[] keyBytes, byte[] nonce, byte[] encryptedValue)
        {
            GcmBlockCipher gcmBlockCipher = new GcmBlockCipher(new AesEngine());
            AeadParameters aeadParameters = new AeadParameters(
                new KeyParameter(keyBytes),
                128,
                nonce);
            gcmBlockCipher.Init(false, aeadParameters);
            byte[] plaintext = new byte[gcmBlockCipher.GetOutputSize(encryptedValue.Length)];
            int length = gcmBlockCipher.ProcessBytes(encryptedValue, 0, encryptedValue.Length, plaintext, 0);
            gcmBlockCipher.DoFinal(plaintext, length);
            return Encoding.UTF8.GetString(plaintext);
        }

注：本案例.NET项目使用的是.NET6,Chrome浏览器版本是v110。

Chrome开源地址：chromium.googlesource.com/chromium/src

解密加密地址：

https://cs.chromium.org/chromium/src/components/os_crypt/os_crypt_win.cc?q=OSCrypt&dr=CSs

输出str效果：

结语

本文介绍了用C#读取Chrome浏览器cookie值的方法，并用代码实现了功能，大家可以根据自己项目的情况使用。本案例涉及到隐私问题，建议不要用本案例做违规的操作。希望本文对你有所帮助，同时欢迎留言或吐槽。

在线咨询

上一篇：用HTML写出绽放的烟花
下一篇：新手建站无需购买服务器10分钟快速部署你的静态网页

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

帝云CMS v4.3.9升级公告

在开篇

盘点HTML表单基础

1. from元素

2. 单选按钮

3. 复选框

4. 提交按钮

HTML表单重要属性

1. Action属性

2. Method属性

HTML表单常用元素

1. 下拉列表

2. 允许多选

写在最后

您的项目需求