本文主要是收集并科普一下 web 常见的安全问题，针对安全漏洞产生的场景和防御方式不详细的描述(仅作参考)，后续将通过相关系列的文章进行补充和完善。想了解详细的内容，请点击对应的链接进入维基百科查看。

持续更新中…

前端安全

XSS 跨站脚本攻击

跨站脚本（英语：Cross-site scripting，通常简称为：XSS）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了 HTML 以及用户端脚本语言。

XSS 攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是 JavaScript，但实际上也可以包括 Java，VBScript，ActiveX，Flash 或者甚至是普通的 HTML。攻击成功后，攻击者可能得到更高的权限（如执行一些操作）、私密网页内容、会话和 cookie 等各种内容。

防御措施：过滤特殊字符、使用 HTTP 头指定类型

我们常用的 script 标签有两个和性能、js 脚本文件下载执行相关的属性:async和defer

async 的含义【摘自https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script】

该布尔属性指示浏览器是否在允许的情况下异步执行该脚本。该属性对于内联脚本无作用 (即没有 src 属性的脚本）

defer 的含义【摘自https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script】

这个布尔属性定义该脚本是否会延迟到文档解析完毕后才执行。

async

对于 async，相信前端开发的小伙伴们都非常熟悉，很容易让人想到异步处理、非阻塞 I/O 等场景。在这里 async 是 HTML5 script 标签中新增的属性，它的作用是能够异步的加载和执行脚本，不因加载脚本而阻塞页面的加载，一旦加载到就会立即执行。下面让我们一起先看看两个 demo：

• without async
• with async

昨天和一个刚刚转前端的朋友聊天时，他说之前面试时有道 javascript 排序题思路不是很清楚，让我把这道题详细的讲解一下。本文主要是记录我的实现方法，欢迎大家一起讨论，如有更好的方法请给我留言。

题目如下

给定一个只包含大写字母和数字且无重复元素的混合数组，按照以下要求排序

1. 字母按在字母表中的位置和数字从小到大排序
2. 字母优先排在前面

例如：

sortX 为该方法，则执行 sortX([“1”, “A”, “B”, “4”, “E”, “C”, “6”, “7”]);

结果为：["A", "1", "B", "C", "4", "E", "6", "7"]

LazyMan 是一道 javascript 面试题，第一次听说 LazyMan 一词是与ing70聊天中获得，本文主要是说说自己的实现思路和方法。

题目如下

实现一个 LazyMan，可以按照以下方式调用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

LazyMan("Hank")输出:
Hi! This is Hank!

LazyMan("Hank").sleep(10).eat("dinner")输出
Hi! This is Hank!
//等待10秒..
Wake up after 10
Eat dinner~

LazyMan("Hank").eat("dinner").eat("supper")输出
Hi This is Hank!
Eat dinner~
Eat supper~

LazyMan("Hank").sleepFirst(5).eat("supper")输出
//等待5秒
Wake up after 5
Hi This is Hank!
Eat supper

以此类推。

分析思路

根据经验猜测此题可参考 jQuery 中delay()、PHP 中sleep()、Express中 next()中间件等方法的实现原理。也是典型的 JavaScript 流程控制，因此问题的关键是如何实现任务的顺序执行。

Chart.js 是一款流行的 javascript 图表库，基于 HTML5 Canvas 开发，具有简单、灵活、兼容主流浏览器等特性。

本文主要是对新版 Chart.js (v2.0+)在项目应用中的一些小总结，请特别注意目前国内翻译的 Chart.js 中文版本相对比较旧，大家在使用过程中请注意，在此推荐查看 Chart.js 官网。

官方版本

• Chart.js

中文版本

• bootcss chart.js
• chart.js 中文版

下面主要记录 Chart.js 在实际项目应用场景中的一些设置，主要以问答方式体现如下：

1、 如何设置线条大小、颜色？

1
2
3
4
5
6
7
8
9
10

data: {
 labels: "labels",
 datasets: [{
  label:'',
  data,
  borderWidth: 2, // 线条宽度
  borderColor:'rgba(255,255,255,.6)', // 线条颜色
  backgroundColor:'rgba(255,255,255,.2)', // 线条到坐标区域背景色
 }]
}