收录了一些个人觉得不错的网页开发插件。

由于插件更新频繁，本页如有错误请指正，也欢迎告知更多功能强大、使用方便的插件。

插件	简介	备注
框架
jQuery	最流行的 JS 框架	下载、中文文档、英文整合文档、中文整合文档，浏览器支持、来自 css88 的文档官方建议 IE 6-8 使用 1.12.4
Angular、中文版 AngularJS (version 1.x)	一套框架，多种平台同时适用手机与桌面	MVC 架构，使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易
Vue.js	是一套用于构建用户界面的渐进式框架。
Bootstrap、中文版	简洁、直观、强悍的前端开发框架	英文文档、v3中文文档、v2中文文档、视频教程，主题和模板
jQuery UI	为 jQuery 提供更丰富的功能	示例：Datepicker、Color Animation、Shake Effect
功能
jQuery File Upload	jQuery 文件上传	英文文档
jQuery Cookie	读取、写入和删除 cookie	浏览器支持，文档
json2.js	json 操作库	已弃用，旧 IE 用 jQuery 的 parseJSON，HTML 5 用 JSON.parse
Lightbox	老牌图片浏览插件推荐使用更强大的 Viewer.js
Swiper、中文版	最现代的移动触摸滑块（Most Modern Mobile Touch Slider）	英文文档，中文文档，旧浏览器支持版本：2.x.x，Swiper 2 英文文档，中文文档
jquery-cropper	图片裁剪
FastClick	用于消除手机浏览器上触摸事件触发之间的 300 毫秒延迟	用法，不应用的场景
PACE	页面加载进度条	文档，IE8+
toastr	jQuery 通知	文档
Autosize	一款小巧的，可自动调整 textarea 高度的独立脚本	IE9+
X-editable	允许您在页面上创建可编辑元素	文档，Demo
select2	一款提供搜索过滤、自定义样式的下拉框插件
jQuery Tags Input	标签输入框	用法
Viewer.js	图片浏览插件	GitHub（viewerjs）、GitHub（jquery-viewer） jquery-viewer 是 viewerjs 的 jQuery 插件，即在 jQuery 环境中要同时引用这两个脚本。
PDF.js	A general-purpose, web standards-based platform for parsing and rendering PDFs.
*编辑器*
UEditor	百度在线编辑器	GitHub 下载、文档、ASP.NET 部署教程
*日期时间*
bootstrap-datepicker	Bootstrap 日期选择器	Online Demo
DateTimePicker	日期时间选择
MultiDatesPicker	多日期选择
FullCalendar	日历日程事件工作表	IE 9+, jQuery 2.0.0+
TimeTo	计时、倒计时
图表
D3.js	D3.js 是基于数据驱动文档工作方式的一款 JavaScript 函数库，主要用于网页作图、生成互动图形，是最流行的可视化库之一。
Highcharts、中文版	兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库	文档
ECharts	百度图表控件
AntV	来自蚂蚁金服的专业、简单、无限可能的可视化解决方案 G2 - 专业易用的可视化类库 G2-mobile - 移动端高性能可视化类库 G6 - 关系图可视化类库	流程图, 关系图, 可视化规范, 地图, 河流图, 力导图, 网络图, UML图, 业务流程图, 时序图
SyntaxHighlighter	功能齐全的代码语法高亮插件（JS）
动态排名数据可视化	将历史数据排名转化为动态柱状图图表开源代码，非插件，修改使用	GitHub、视频教程、EV录屏、网页示例、视频效果
图标
Font Awesome	完美的图标字体	IE 8+，v3.2.1 支持 IE 7，进阶用法（定宽/边框/动画/旋转/叠加）
Glyphicons	图标字体	作为 Bootstrap 组件
Iconfont	阿里巴巴矢量图标库	用户可以自定义下载多种格式的 icon，也可将图标转换为字体，便于前端工程师自由调整与调用
UI 框架
WeUI	同微信原生视觉体验一致的基础样式库	Demo、Wiki
Apple UI Design Resources	苹果用户界面设计资源

xoyozo 8 年前

9,833

2017 年苹果 iOS App 强制使用 https，站长要做什么？

各位站长好：

根据苹果相关通知，从2017年1月1日起，所有上架AppStore的应用必须支持https协议。

仍然采用HTTP传输的站点APP，将无法在AppStore被用户下载使用，也无法进行升级更新等工作。

官方视频

https://developer.apple.com/videos/play/wwdc2016/706/

知其然，才能使其安——王震

常见的攻击手法

SQL 注入

文件上传

弱口令

Nday 攻击

XSS

社会工程学

等等……

被黑原因总结

不知道	不及时	不在意
不知道自用系统安全动态	不及时更新系统安全补丁	不在意个人信息安全
不知道常见黑客攻击手段	不及时修复漏洞	不在意用户数据安全
不知道该如何修复	不及时排查被黑系统	不在意各种安全软件提示、提醒
不知道今后该如何防御		不在意细节

那些年，醉人的“三字经”

网站渗透娱乐版

针对企业的实战版

进谷歌找注入

没注入就旁注

没旁注用0day

没0day 猜目录

没目录就嗅探

爆账户找后台

传小马放大马

拿权限挂页面

放暗链清数据

搞企业先扫描

默认密都知道

社工库找一找

邮箱号先列好

九头蛇跑一跑

搞不定放大招

发邮件凭伪造

没邮箱搞网站

二级域皆可爆

老漏洞没修好

新漏洞刷一票

干研发 Git 找

原代码全都要

CDN 可以跳

防火墙可以撬

堡垒机可以绕

云防护可以秒

是企业没有哪家搞不了

攻击手法统计

Nday攻击：45%

漏洞攻击：35%

其他攻击：15%

0day攻击：5%

一些箴言

80%的安全问题都是已知的安全问题，但是能抵御已知安全问题的网站只有20%

弱口令虽然看起来很弱，但是忽视弱口令只会让你的网站变得更弱

没有百分之百的安全，你所做的一切不是为了让自己无坚不摧，只是让自己不再弱不禁风

80%的系统安全问题都是可以通过升级补丁来解决，但是能做到这点的人只有20%

SQL注入存在十几年了，依然是主流攻击手段，可见安全比的不是谁更先进，而是谁更细心

不要得罪你的开发人员，这就跟你吃饭不要得罪服务员一样，你不知道他下一秒会不会在你的菜里吐口水

还有一句

永远不要觉得你安装的安全防护软件真的可以保护你的安全

服务器安全注意事项

不安装不必要的软件

排查所有系统弱口令

关闭不常用的端口

控制目录权限

不在服务器上下载、打开非官方提供软件

不在服务器上打开他人发来的网页链接

如何排查暗链？

利用查看网站的源代码来检查黑链

使用站长工具“网站死链检测”功能来检查黑链

用 FTP 查看网站文件的修改时间来检查黑链

接入 webscan.360.cn 检测

后门排查

Windows 下，D 盾、安全狗、主机卫士

Linux 下，Seay 一句话扫描脚本、主机卫士 Linux 版

用 FTP 查看网站文件的修改时间来排查恶意后门

接入 webscan.360.cn 等在线检测

安全类书籍推荐

《Web 安全深度剖析》——张炳帅著

《白帽子讲 Web 安全》——吴瀚清著

《Web 前端黑客技术揭秘》——钟晨呜（余弦）著

《黑客攻防技术宝典 Web 实战篇》——国外某黑客著

联系方式

官网：www.flsec.com

xoyozo 8 年前

4,147

百度 UEditor 富文本在线编辑器在 ASP.NET 环境下的部署记录（文件上传及权限判断）

在 ASP.NET Core 或 ASP.NET 5 中部署百度编辑器请跳转此文。

本文记录百度编辑器 ASP.NET 版的部署过程，对其它语言版本也有一定的参考价值。

【2020.02.21 重新整理】

下载

从 GitHub 下载最新发布版本：https://github.com/fex-team/ueditor/releases

按编码分有 gbk 和 utf8 两种版本，按服务端编程语言分有 asp、jsp、net、php 四种版本，按需下载。

目录介绍

以 v1.4.3.3 utf8-net 为例，

ueditor 目录结构.png

客户端部署

本例将上述所有目录和文件拷贝到网站目录 /libs/ueditor/ 下。

当然也可以引用 CDN 静态资源，但会遇到诸多跨域问题，不建议。

在内容编辑页面引入：

<script src="/libs/ueditor/ueditor.config.js"></script>
<script src="/libs/ueditor/ueditor.all.min.js"></script>

在内容显示页面引入：

<script src="/libs/ueditor/ueditor.parse.min.js"></script>

如需修改编辑器资源文件根路径，参 ueditor.config.js 文件内顶部文件。（一般不需要单独设置）

如果使用 CDN，那么在初始化 UE 实例的时候应配置 serverUrl 值（即 controller.ashx 所在路径）。

客户端配置

初始化 UE 实例：

var ue = UE.getEditor('tb_content', {
    // serverUrl: '/libs/ueditor/net/controller.ashx', // 指定服务端接收文件路径
    initialFrameWidth: '100%'
});

其它参数见官方文档，或 ueditor.config.js 文件。

服务端部署

net 目录是 ASP.NET 版的服务端程序，用来实现接收上传的文件等功能。

本例中在网站中的位置是 /libs/ueditor/net/。如果改动了位置，那么在初始化 UE 的时候也应该配置 serverUrl 值。

这是一个完整的 VS 项目，可以单独部署为一个网站。其中：

net/config.json 服务端配置文件
net/controller.ashx 文件上传入口
net/App_Code/CrawlerHandler.cs 远程抓图动作
net/App_Code/ListFileManager.cs 文件管理动作
net/App_Code/UploadHandler.cs 上传动作

该目录不需要转换为应用程序。

服务端配置

根据 config.json 中 *PathFormat 的默认配置，一般地，上传的图片会保存在 controller.ashx 文件所在目录（即本例中的 /libs/ueditor/）的 upload 目录中：
/libs/ueditor/upload/image/
原因是 UploadHandler.cs 中 Server.MapPath 的参数是由 *PathFormat 决定的。

以修改 config.json 中的 imagePathFormat 为例：

原值："imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"

改为："imagePathFormat": "/upload/ueditor/{yyyy}{mm}{dd}/{time}{rand:6}"

以“/”开始的路径在 Server.MapPath 时会定位到网站根目录。

此处不能以“~/”开始，因为最终在客户端显示的图片路径是 imageUrlPrefix + imagePathFormat，若其中包含符号“~”就无法正确显示。

在该配置文件中查找所有 PathFormat，按相同的规则修改。

说到客户端的图片路径，我们只要将

原值："imageUrlPrefix": "/ueditor/net/"

改为："imageUrlPrefix": ""

即可返回客户端正确的 URL。

当然也要同步修改 scrawlUrlPrefix、snapscreenUrlPrefix、catcherUrlPrefix、videoUrlPrefix、fileUrlPrefix。

特殊情况，在复制包含图片的网页内容的操作中，若图片地址带“?”等符号，会出现无法保存到磁盘的情况，需要修改以下代码：

打开 CrawlerHandler.cs 文件，找到

ServerUrl = PathFormatter.Format(Path.GetFileName(this.SourceUrl), Config.GetString("catcherPathFormat"));

替换成：

ServerUrl = PathFormatter.Format(Path.GetFileName(SourceUrl.Contains("?") ? SourceUrl.Substring(0, SourceUrl.IndexOf("?")) : SourceUrl), Config.GetString("catcherPathFormat"));

如果你将图片保存到第三方图库，那么 imageUrlPrefix 值设为相应的域名即可，如：

改为："imageUrlPrefix": "//cdn.***.com"

然后在 UploadHandler.cs 文件（用于文件上传）中找到

File.WriteAllBytes(localPath, uploadFileBytes);

在其下方插入上传到第三方图库的代码，以阿里云 OSS 为例：

// 上传到 OSS
client.PutObject(bucketName, savePath.Substring(1), localPath);

在 CrawlerHandler.cs 文件（无程抓图上传）中找到

File.WriteAllBytes(savePath, bytes);

在其下方插入上传到第三方图库的代码，以阿里云 OSS 为例：

// 上传到 OSS
client.PutObject(bucketName, ServerUrl.Substring(1), savePath);

最后有还有两个以 UrlPrefix 结尾的参数名 imageManagerUrlPrefix 和 fileManagerUrlPrefix 分别是用来列出上传目录中的图片和文件的，

对应的操作是在编辑器上的“多图上传”功能的“在线管理”，和“附件”功能的“在线附件”。

最终列出的图片路径是由 imageManagerUrlPrefix + imageManagerListPath + 图片 URL 组成的，那么：

"imageManagerListPath": "/upload/ueditor/image",

"imageManagerUrlPrefix": "",

以及：

"fileManagerListPath": "/upload/ueditor/file",

"fileManagerUrlPrefix": "",

即可。

如果是上传到第三方图库的，且图库上的文件与本地副本是一致的，那么将 imageManagerUrlPrefix 和 fileManagerUrlPrefix 设置为图库域名，

服务端仍然以 imageManagerListPath 指定的路径来查找本地文件（非图库），但客户端显示图库的文件 URL。

因此，如果文件仅存放在图库上，本地没有副本的情况就无法使用该功能了。

综上，所有的 *UrlPrefix 应该设为一致。

另外记得配置不希望被远程抓图的域名，参数 catcherLocalDomain。

服务端授权

现在来判断一下只有登录用户才允许上传。

首先打开服务端的统一入口文件 controller.ashx，

继承类“IHttpHandler”改为“IHttpHandler, System.Web.SessionState.IRequiresSessionState”，即同时继承两个类，以便可使用 Session，
找到“switch”，其上插入：

if (用户未登录) { throw new System.Exception("请登录后再试"); }

即用户已登录或 action 为获取 config 才进入 switch。然后，

else
{
    action = new NotAllowedHandler(context);
}

这里的 NotAllowedHandler 是参照 NotSupportedHandler 创建的，提示语 state 可以是“登录后才能进行此操作。”

上传目录权限设置

上传目录（即本例中的 /upload/ueditor/ 目录）应设置允许写入和禁止执行。

基本用法

设置内容：

ue.setContent("Hello world.");

获取内容：

var a = ue.getContent();

更多用法见官方文档：http://fex.baidu.com/ueditor/#api-common

其它事宜

配置上传附件的文件格式

找到文件：config.json，更改“上传文件配置”的 fileAllowFiles 项，

同时在 Web 服务器上允许这些格式的文件可访问权限。以 IIS 为例，在“MIME 类型”模块中添加扩展名。

遇到从客户端(......)中检测到有潜在危险的 Request.Form 值。请参考此文

另外，对于不支持上传 .webp 类型的图片的问题，可以作以下修改：
config.json 中搜索“".bmp"”，替换为“".bmp", ".webp"”
IIS 中选中对应网站或直接选中服务器名，打开“MIME 类型”，添加，文件扩展名为“.webp”，MIME 类型为“image/webp”

最后，为了在内容展示页面看到跟编辑器中相同的效果，请参照官方文档引用 uParse

若有插入代码，再引用：
<link href="/lib/ueditor/utf8-net/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" />
<script src="/lib/ueditor/utf8-net/third-party/SyntaxHighlighter/shCore.js"></script>

其它插件雷同。

若对编辑器的尺寸有要求，在初始化时设置即可：

var ue = UE.getEditor('tb_content', {

initialFrameWidth: '100%',
initialFrameHeight: 320
});

图片等附件上传到阿里云 OSS 参考此文

xoyozo 9 年前

6,450

在线生成条形码的解决方案（39码、EAN-13）

公司有个项目是使用实体刷卡的会员管理系统，并为其它系统如餐饮系统、美发厅管理系统等提供统一的会员注册与信息管理。暂定使用一维条形码卡。

一般来说，商品最常用的编码是EAN-13，而非商品（如图书馆会员卡，驾驶证条码等）一般使用39码。

39码在线测试地址：http://xoyozo.net/Tools/Code39

EAN-13 在线测试地址：http://xoyozo.net/Tools/EAN-13

39码

39码比较简单，条码以“*”为起始符和终止符，见下图：

它所能表示的字符包括：0~9 的数字，大写 A~Z 的英文字母，「+」，「-」，「*」，「/」，「%」，「$」，「.」，以及空格符(Space)等，共44组编码。

39码表：“0”对应白色空位，“1”对应黑色线条。

字元	逻辑型态	字元	逻辑型态
A	110101001011	N	101011010011
B	101101001011	O	110101101001
C	110110100101	P	101101101001
D	101011001011	Q	101010110011
E	110101100101	R	110101011001
F	101101100101	S	101101011001
G	101010011011	T	101011011001
H	110101001101	U	110010101011
I	101101001101	V	100110101011
J	101011001101	W	110011010101
K	110101010011	X	100101101011
L	101101010011	Y	110010110101
M	110110101001	Z	100110110101

字元	逻辑型态	字元	逻辑型态
0	101001101101	+	100101001001
1	110100101011	-	100101011011
2	101100101011	*	100101101101
3	110110010101	/	100100101001
4	101001101011	%	101001001001
5	110100110101	$	100100100101
6	101100110101	.	110010101101
7	101001011011	空白	100110101101
8	110100101101
9	101100101101

值得注意的是，39码生成的条形中，每个码之间有一个空位，经扫描枪测试，该空位与一个单位的线条宽度相等时，能确保被正确扫描。

代码见附件

EAN-13码

EAN-13码是由13位数字构成，其中最后一位为校验码：

左侧空白区	起始符	左侧数据符	中间分隔符	右侧数据符	校验符	终止符	右测空白区
9个模块	3个模块	42个模块	5个模块	35个模块	7个模块	3个模块	9个模块

校验码计算的步骤如下：以 234235654652 为例：

	数据码												校验码
代码位置序号	13	12	11	10	9	8	7	6	5	4	3	2	1
数字码	2	3	4	2	3	5	6	5	4	6	5	2	?
偶数位		3	+	2	+	5	+	5	+	6	+	2
奇数位	2	+	4	+	3	+	6	+	4	+	5

① 从序号2开始，将所有偶数位的数字代码求和，得出S1; S1=3+2+5+5+6+2=23

② 从序号3开始，将所有奇数位的数字求和，得出S2; S2=2+4+3+6+4+5=24

③ S3=S1*3+S2; S3=23*3+24=93

④ C=10-(S3的个位数)，得到校验码C的值。并且当S3的个位数为0时，C=0。 C=10-3=7

EAN码的编码规则：

数字符	左侧数据符		右侧数据符
数字符	A	B	C
0	0001101	0100111	1110010
1	0011001	0110011	1100110
2	0010011	0011011	1101100
3	0111101	0100001	1000010
4	0100011	0011101	1011100
5	0110001	0111001	1001110
6	0101111	0000101	1010000
7	0111011	0010001	1000100
8	0110111	0001001	1001000
9	0001011	0010111	1110100

（关于左侧数据符，网络上的资料均显示A3及B6为6位数，经本人实践亲自查证，已修正）

起始符：101
中间分隔符：01010
终止符：101。
A、B、C中的“0”和“1”分别表示具有一个模块宽度的“空”和“条”。
因为左侧数据编码方式有两种，要按照前置码选其中一种，如表：

前置字符	左侧数据符编码规则的选择
0	A	A	A	A	A	A
1	A	A	B	A	B	B
2	A	A	B	B	A	B
3	A	A	B	B	B	A
4	A	B	A	A	B	B
5	A	B	B	A	A	B
6（中国）	A	B	B	B	A	A
7	A	B	A	B	A	B
8	A	B	A	B	B	A
9	A	B	B	A	B	A

以 6903244981002 （心相印软抽100抽）为例：前置码为6，编码规则为 000000000101ABBBAA01010CCCCCC101000000000

再对应码表替换ABC，结果为：00000000010100010110100111010000100110110100011010001101010111010010010001100110111001011100101101100101000000000

xoyozo 15 年前

15,494

查询 / 检测

编程

前端

行业

本站 API

博客 (15)