收录了一些个人觉得不错的网页开发插件。
由于插件更新频繁，本页如有错误请指正，也欢迎告知更多功能强大、使用方便的插件。
| 插件 | 简介 | 备注 |
| 框架 | ||
| 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 | 苹果用户界面设计资源 | |
程序设计规范：
【推荐】上传的文件直接保存到文件存储服务（如阿里云 OSS），这样即使被上传了后门 shell，对网站服务器也不会有影响。
否则必须通过文件头来确定文件类型，检查文件十六进制的文件头和文件尾是否合法，并检查文件流中是否包含 php、evel 等字符。
不可直接使用客户端文件名来保存文件，特别是后缀名/扩展名。应生成随机文件名，并通过检验文件头来确定文件类型。必须由程序指定保存目录。
使用 OSS 的应直接上传，不要在 ECS 上临时存放或备份。如必须存放的，应按上述规范操作。
服务器安全设置
CentOS + nginx + PHP：
全站文件取消属性中的“执行”权限（chmod），因为这个“执行”与运行 PHP 无关。而需要上传文件的“目录”需要“执行”权限，原因是需要往该目录创建文件。
仅需要写入的目录或文件设置“写入”权限。如上传图片目录、ThinkPHP 的 Runtime 目录。
凡可写目录或文件均不允许运行 PHP / PY 等 除需要被直接访问的 PHP / PY 文件，其它动态文件均不允许被访问到，在 nginx 的配置文件中添加项，参：https://xoyozo.net/Blog/Details/nginx-location-if，若全站使用统一的入口文件访问，那么设置仅该文件允许运行 PHP 即可。通过 IO 方式被其它文件包含的文件，无需运行 PHP 权限。（“deny all”对 include 起作用，但对 IO 不起作用，因此 Runtime 目录可以继续为 ThinkPHP 提供缓存服务。）这一步非常有用。
使用与 nginx 网站用户不同的用户来部署网站文件，如宝塔面板 PHP 使用 www 用户，那么就使用 root 或其它新用户来上传文件，否则将导致全站目录和文件可写。有条件的建议不同网站使用不同的用户，可防止一个网站被入侵后导致其它网站文件或磁盘上的其它文件被泄露的风险（2022年10月2日从宝塔官方社区获悉，宝塔面板暂不支持使用非 www 用户创建并运行网站）。
Windows Server + IIS + ASP.NET：
配置每个磁盘的安全属性，拒绝“IIS_IUSRS”这个用户组的所有权限。只要设置驱动器即可，子文件夹和文件会自动继承。若运行 .NET Framework 项目，需要设置 C:\Windows\Microsoft.NET\Framework\v*.*.*****\Temporary ASP.NET Files\ 目录可修改写入权限，.NET Core 项目不需要此设置。
为每个网站创建一个新用户，仅隶属于“IIS_IUSRS”。网站根目录安全属性添加该用户，权限选择“读取”。（已测取消“读取与执行”不影响 PHP，“列出文件夹内容”视业务需求开启，建议关闭）。仅需要上传文件的目录或文件设置“修改”、“写入”权限。（修改对应修改文件，写入对应上传文件）
IIS 网站中设置“物理路径凭据”以及应用程序池的“标识”。
IIS 中设置写入目录的“处理程序映射”无脚本。
当用户向 <input> 或 <textarea> 输入时执行事件。
可用于统计输入字数，判断输入内容是否规范等。
| 对比事件 | 对比事件特点 | oninput 事件特点 |
| onkeypress | 获得当前字符输入前的内容，不能在右键操作时执行 | 获得当前字符输入后的内容 |
| onkeyup | 不能在右键操作时执行 | 在任何情况的内容变化时执行 |
| onchange | 在失去焦点时执行，而且值有所改变，推荐用在 <select> 上 | 在输入时执行 |
但是通过 JS 来更改内容时不触发上述任何事件，不完美的解决方案是使用定时器。
IE8 及更早版本不支持 oninput，可以用 onpropertychange 代替。
BUG：在 IE9 的右键菜单剪切或删除中无效。
jQuery 例子：
$('#mytextarea').on('input propertychange', function () {
console.log($(this).val().length);
});
各位站长好：
根据苹果相关通知，从2017年1月1日起，所有上架AppStore的应用必须支持https协议。
仍然采用HTTP传输的站点APP，将无法在AppStore被用户下载使用，也无法进行升级更新等工作。
官方视频
https://developer.apple.com/videos/play/wwdc2016/706/
相关新闻
http://www.chinaz.com/news/2016/1028/602635.shtml
根据AppStore审核要求，站长需要在2017年1月1日之前，在APP服务器全面部署https。
尽管不升级支持https后果严重，但诸位也不必太过担心，马甲根据要求为各位提供一份服务器升级https的技术文档，供您参考。
https的优点：
1. 相对于http，https可以确保数据在网络传输过程中不被篡改(如禁止运营商插入广告)，同时可以提升网站的安全性。
2. iOS可以实现微信内部浏览器直接启动并打开App对应页面。
APP网站升级https步骤：
1. 为APP域名申请购买SSL证书（可选免费型）；
2. 将SSL证书部署到APP站点。
https证书申请方法：
1. 进入阿里云（独立服务器客户可注册一个阿里云账号，无须购买阿里云主机）https证书申请页面 https://www.aliyun.com/product/security/markets/aliyun/product/cas
2. 购买https证书，选择免费类型，点击购买（无需实际付款)
3. 购买完成后，进入控制台-CA证书服务页面，找到证书订单，点击“补全”
4. 填写证书对应的域名信息，免费证书只能用于一个域名(请填写完整域名例如：test.magapp.cc 而不是 magapp.cc)
5. 继续补全证书信息，注意域名验证类型选择DNS，邮箱填写自己常用邮箱即可，稍后系统会往邮箱发送域名解析信息。
6. 下一步生成证书请求文件(CSR)，这里建议选择“系统生成CSR”，点击右侧创建，创建完成后，点击提交审核，开始申请https证书。
7. 稍后系统会向邮箱发送一份该邮件，邮件包含需要在域名管理后台解析的信息。
8. 到域名管理后台添加新的域名解析，注意解析类型为CNAME
9. 添加新域名解析完成后，系统会对您的申请进行审核（审核时间在几分钟到几个小时不确定），如果审核成功系统会为你签发https证书，失败也会有相关原因说明，如果失败可根据提示重新申请。
10. https证书申请成功后，下一步就可以下载并部署到APP服务器。
11. 点击下载后，可以根据阿里云提供的部署文档，进行相关的服务器部署工作。
12. 部署完成后，验证是否部署成功
第一步：使用https协议访问域名是否能正常访问，例如 https://test.magapp.cc
第二步：在线检测域名是否满足苹果审核要求，网址为：https://www.qcloud.com/product/ssl.html#userDefined10
填写自己申请https的域名
如果域名检测各项满足会显示如下图所示
部署注意事项：
1. https使用的是443端口而不是默认的80端口，需要在wdcp安全管理-iptables开启443端口。
2. https免费证书有效期为一年，请各位站长作好记录，提前重新申请。
3. 站点从http转到https完全过渡需要一段时间，建议在部署时站点同时支持http和https。
4. 部署过程遇到任何问题，可联系您的专属运维人员。
MAGAPP技术部
Angulr（没有字母“a”）是一款收费的 Bootstrap Admin Template，我们选择使用 Angular 版本是因为他提供很好的单页应用程序（Single-page application, SPA）用户体验。
官方演示地址：http://flatfull.com/themes/angulr/angular/
主要目录结构：
| ┌ angular | |
| │├ api | |
| │├ css | |
| ││└ app.min.css | 应用主样式 |
| │├ fonts | |
| ││└ sourcesanspro | 应用字体库 |
| │├ img | |
| │├ js | |
| ││├ app | |
| │││└ */*.js | 功能模块控制器 |
| ││├ controllers | |
| │││└ *.js | 组件控制器 |
| ││└ app.angular.js | 应用主脚本 |
| │├ l10n | |
| ││└ *.js | 语言配置文件 |
| │├ tpl | |
| ││├ blocks | |
| │││ └ *.html | 主框架部件 |
| ││└ *.html | 功能模块页 |
| │└ index.html | 入口文件 |
| │ | |
| └ libs | 库 |
| ├ angular | |
| │└ */*.* | Angular 插件 |
| ├ assets | |
| │└ */*.* | Angulr 插件 |
| └ jquery | |
| └ */*.* | jQuery 插件 |
app.angular.js 中配置了 app 名称（name）、版本（version）、语言（langs），以及框架文件（tpl/app.html）、默认首页（/app/dashboard）、路由表（state）和插件库引用等信息。
首页配置导航菜单项，在 nav.html 中所有菜单项被包含在 <ul class="nav" /> 中，class 含“hidden-folded padder”的是菜单分区名称（如 Navigation），除了第一个，都被 class 含“line dk”的 li 留白，class 含“nav-sub”的 ul 是二级菜单，<i /> 是 icon，<b /> 是 badge，“font-bold”是加粗，translate 是配置多语言的键值。
Angulr 使用 UI-Router 实现路由。ui-sref 是路由键值，只有在 app.angular.js 的路由表中已配置值，该 ui-sref 才会被解释为 href。
以 Timeline 页为例，ui-sref="app.ui.timeline"，route 的 state 中指定读取模板文件为 tpl/ui_timeline.html，且访问 url 为 /timeline，而父路由 app 和 app.ui 的 url 分别为 /app 和 /ui，所以该页实际访问路径后缀为 #/app/ui/timeline。
父路由中一般指定 template: "<div ui-view></div>"，如果需要载入动画效果，在该 div 中加入相应的 class 即可（fade-*）。ui-view 作为一个容器，用来承载子路由指向的内容，实现路由嵌套。
目前为止，点击菜单项可准确显示页面内容。但当我们复制地址栏中的网址在新窗口中打开时，如果要将菜单自动展开定位到对应相，只要在 <li /> 标签上加上 ui-sref-active="active" 即可，若该项是子菜单，同时需要展开一级菜单，那么在一级菜单的 <li /> 标签上加上 ng-class="{active:$state.includes('app.ui')}"，意思是在路由键中包含 app.ui 即展开此菜单。
如果页面需要引入脚本或样式，在路由的 state 上加上 resolve 参数即可，如果是插件（比如 ngGrid），会调用 MODULE_CONFIG（在 app.angular.js）中配置的该插件的相关脚本和样式。
最近做到微信语音时用到，将微信的媒体文件（.amr）下载到自己服务器上，并转码为 .mp3 格式。
下载 FFmpeg for Windows，放在网站目录下，譬如：网站目录/bin/ffmpeg/ffmpeg.exe
转换代码
string amr = HttpRuntime.AppDomainAppPath + media.sLocalPath.Substring(1).Replace("/", @"\");
string mp3 = amr + ".mp3";
string ffmpeg = HttpRuntime.AppDomainAppPath + @"bin\ffmpeg\ffmpeg.exe";
Process p = new Process();
p.StartInfo.FileName = ffmpeg;
p.StartInfo.Arguments = $@"-y -i {amr} -ar {16000} {mp3}";
p.Start();
p.WaitForExit();
p.Close();-y 若有提示用户选择，默认“是”
-ar 采样数，微信的 amr 是 8000 Hz，如果不加这个参数转换后的 mp3 的也是 8000 Hz，但是音质下降严重，所以设成 16000 Hz 才勉强保持了音质。
WaitForExit() 是等待转码完毕才继续往下执行。
最近做到微信语音时用到，将微信的媒体文件（.amr）下载到自己服务器上，并转码为 .mp3 格式。
引用“NAudio.dll”或直接搜索 NuGet 包，将音频文件转码为 .mp3 只需要：
var data = new MediaFoundationReader("..\\amr\\test.amr");
MediaFoundationEncoder.EncodeToMP3(data, "..\\test.mp3", 码率默认192000);若出现异常：
无法加载 DLL“mfplat.dll”: 找不到指定的模块。
原因是没有安装音频解码组件，以 Windows Server 2012 R2 为例：
打开“服务器管理器”，添加角色和功能，勾选“桌面体验”（可能在“用户界面和基础结构”，默认还会勾上“墨迹和手写服务”）
安装完成需要重启计算机。
若出现异常：
不支持给定的 URL 的字节流类型。 (异常来自 HRESULT:0xC00D36C4)
原因可能是没有能够播放 .amr 的解码器，或音频驱动！
如果还是搞不定，本站搜索 ffmpeg 吧！
打开 SSMS
选择数据库，右键，属性
选择“权限”，点击“查看服务器权限”
选择“数据库设置”，修改“备份”框路径
注意：更改一个数据库的备份路径后，对所有数据库都是有效的
现在如果备份数据库到新的目录，会报以下错误：
无法打开备份设备。出现操作系统错误 5(拒绝访问。)。BACKUP DATEBASE 正在异常终止。。
那就在新的备份目录上右键属性，安全，编辑，添加，在框内填写“NT SERVICE\MSSQLSERVER”这个服务用户，确定，（这个用户名称会自动变成“MSSQLSERVER”，如果没有这个用户，点击“高级”-“立即查找”，选择 MSSQLSERVER 或 NT SERVICE\MSSQL$InstanceName），然后选择“完全控制”，一路确定
现在可以备份到新的目录中去啦
知其然，才能使其安——王震
常见的攻击手法
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 实战篇》——国外某黑客 著
联系方式
《Windows Server 2008 R2 Web 服务搭建流程》
前提一、安装完系统后，各分区的权限均设为：
IIS_IUSRS 完全拒绝（不是什么都不勾，而是勾满右侧的拒绝）
一、创建网站用户，如 netXoyozoWww，密码永不过期，仅隶属于 IIS_IUSRS 组。
二、创建网站根目录 net.xoyozo.www，权限添加用户 netXoyozoWww， 允许“读取和执行”、“列出文件夹内容”、“读取”。
创建上传目录 upload，用户 netXoyozoWww 的权限再允许“修改”、“写入”。
三、IIS 中添加网站，网站名称如 net.xoyozo.www，指定物理路径，点击连接为，特定用户，测试设置……
主机名 www.xoyozo.net
四、应用程序池，把 net.xoyozo.www 改成实际需要的 .NET 版本；高级设置，标识，自定义帐户 netXoyozoWww
五、选中网站，日志，更改目录，应用
六、展示网站目录树，选中 upload，处理程序映射，编辑功能权限，取消“脚本”前的勾。
此操作的结果会在该目录下创建 web.config 文件，切勿删除！尚未研究出被上传文件替换的解决方案。程序应严格控制上传路径，阻止修改或替换 web.config 文件
另：
查看端口命令：netstat -an