主题测试中...

禁用 window.opener

一般来说,打开同源(域名相同)的页面,不会有什么问题,毕竟都是一个站点提供的。但对于跨域的外部链接来说,存在一个被钓鱼的风险。

在跨域的情况下,window.opener 拿不到来源页面的具体内容,但是 window.opener.location 却是例外:它可以修改打开它的页面地址。这会带来什么问题?如果你在社交网站上点击了一个钓鱼链接,钓鱼页面本身没有问题,但它却可以悄悄地替换打开它的社交网站页面,从而实现钓鱼以获取用户账号密码等信息的目的。

vscode: Visual Studio Code 常用快捷键

主命令框 F1 或 Ctrl+Shift+P: 打开命令面板。在打开的输入框内,可以输入任何命令,例如: 按一下 Backspace 会进入到 Ctrl+P 模式 在 Ctrl+P 下输入 > 可以进入 Ctrl+Shift+P 模式 在 Ctrl+P 窗口下还可以: 直接输入文件名,跳转到文件 ? 列出当前可执行的动作 ! 显示 Errors或 Warnings,也可以 Ctrl+Shift+M : 跳转到行数,也可以 Ctrl+G 直接进入 @ 跳转到 symbol(搜索变量或者函数),也可以 Ctrl+Shift+O 直接进入 @ 根据分类跳转 symbol,查找属性或函数,也可以 Ctrl+Shift+O 后输入:进入 # 根据名字查找 symbol ...

node-sass 安装失败的解决办法

node-sass 安装失败的原因 npm 安装 node-sass 依赖时,会从 github.com 上下载 .node 文件。由于国内网络环境的问题,这个下载时间可能会很长,甚至导致超时失败。 这是使用 sass 的同学可能都会遇到的郁闷的问题。 解决方案就是使用其他源,或者使用工具下载,然后将安装源指定到本地。

在 nginx 中配置 HTTP/2 支持

HTTP/2 协议于 2015 年 5 月 14 日正式版发布。随着 nginx 等流行 webserver 以及各大浏览器对 HTTP/2 的支持,越来越多的网站开始部署 HTTP/2 了。 HTTP/2 协议 HTTP/2 源自 SPDY/2。SPDY 系列协议由谷歌开发,于 2009 年公开。它的设计目标是降低 50% 的页面加载时间。 HTTP/2 协议由以下两个 RFC 组成: RFC 7540 - Hypertext Transfer Protocol Version 2 (HTTP/2) RFC 7541 - HPACK: Header Compression for HTTP/2 在 HTTP/2 官网 可以找到更多有关 HTTP/2 协议的资料。 HTTP/2 特点 HTTP/2 在底层传输上带来了大量的改动与优 ...

使用 mocha 和 chai 进行基于浏览器的 javascript 异步测试

基于 BDD (行为驱动开发) 的 UI 相关的功能性测试,特别是涉及到与后端数据交互的情况下,需要浏览器环境和对 ajax 的支持,对于涉及动画的交互,还需要延时执行测试代码。这里提到了几个基本要求: 浏览器环境支持(DOM/DOM JavaScript API/CSSDOM 等) ajax 支持 异步测试支持 下面针对这样的诉求,介绍使用 mocha、chai 和 PhantomJS 方案的相关测试工具/库的安装与测试环境的构建。 1. 相关测试工具/库简介 1.1 mocha mocha 是近年来非常流行的 JavaScript 测试框架。它 支持浏览器环境,并且支持异步测试(done 回调或 Promise) ...

Public-Key-Pins:配置 HPKP(Public Key Pinning Extension for HTTP)

HPKP 格式及说明 HTTP Public Key Pinning(HPKP)的格式如下: Public-Key-Pins: pin-sha256="base64=="; max-age=expireTime [; includeSubdomains][; report-uri="reportURI"] pin-sha256 即证书指纹,允许出现多次(实际上最少应该指定两个); max-age 和 includeSubdomains 分别是过期时间和是否包含子域,它们在 HSTS(HTTP Strict Transport Security)中也有,格式和含义一致; report-uri 用来指定验证失败时的上报地址,格式和含义跟 CSP(Content Security Policy)中的同名字段一致; includeSubdomains 和 report-uri ...

CSS 代码质量校验:stylelint 、stylefmt 及 post-sorting 的开发环境配置参考

在团队开发中,良好的代码规范约定是保证互相良好协作的基本要求。 stylelint 是一个强大的 CSS linter 工具,它使用 PostCSS 的 AST 语法解析树引擎,支持 PostCSS 支持的所有语法识别,而且还支持自定义语法解析器,具有很大的扩展性,对于 SCSS、LESS 和 SugarSS 都可以良好的支持。 stylefmt 是一个基于 stylelint 的代码修正工具,它可以基于 stylelint 的代码规范约定配置,对可修正的地方作格式化输出。 PostCSS-Sorting 是一个 CSS 属性顺序约定格式化的插件,基于属性顺序约定,格式化调整其顺序。这可以使得团队内的 CSS 书 ...

CSS 代码校验器 csslint: 在 sublime text 编辑器中安装和配置 csslint

本文主要介绍在 sublime text 3 编辑器中配置 csslint 的方法步骤,以帮助你快速完成相关配置,避免花费更多的时间去探索。 1. 安装 csslint 打开 cmd 命令提示符,使用 node 进行全局安装 csslint npm i eslint -g –registry=http://registry.npm.taobao.org/ –disturl=https://npm.taobao.org/dist 2. 安装 sublime text 相关插件 打开 sublime text,打开 preferences->Package Control (ctrl+shift+l),搜索和安装如下两个插件: SublimeLinter SublimeLinter-csslint 进入项目根目录,新建一个名称为 .csslintrc 的文件 ...

使用 JSDoc 与 docstrap 生成 JavaScript 项目 API 文档

JSDoc 规范是 JavaScript 最为流行的一套 JS 注释规范,许多 IDE 编辑器都对其提供内核或插件级别的支持。 根据 JSDoc 规范书写注释的 JavaScript 文件,可以借助 JSDoc 工具生成标准的使用文档,也可以被 IDE 编辑器用于代码提示。 JSDoc 默认的文档模板比较单调,docstrap 提供了 14+ 种 bootstrap 风格的模板,使用 docstrap 使得生成的文档更美观易用。 下面志文工作室针对 JSDoc 与 docstrap 安装使用的方法与要点作简要介绍。

pt 与 px、em、rem 的区别与换算

DPI/pt/px 单位的含义 DPI(Dots Per Inch) 每英寸像素数。Windows 系统默认是 96dpi,Apple 系统默认是 72dpi。 pt (point,磅) 是一个物理长度单位,指的是 72 分之一英寸。 px (pixel,像素) 一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果 px 要换算成物理长度,需要指定精度 DPI,在扫描打印时一般都有 DPI 可选。常见浏览器的默认字体大小都是 16px。 由于屏幕大小的差异性,相同大小的字体在不同屏幕下显示的效果差异比较大。那么动态的放大/缩小字体就变得比较重要。显然针对每一处的字体设置都去做兼容是复杂的, ...