front-end

Javascript

Article	Article
Javascript深浅拷贝	Javascript中的apply和call继承
Javascript的jsonp原理	Javascript监听触摸事件
Javascript中的var self = this	Javascript面向对象编程
Javascript滑屏切换场景	Javascript获取经纬度，关于调用百度API的问题
妙用Javascript运算符	深入理解Javascript函数编程
Javascript的setTimeout详细用例	sessionstorage，localstorage和cookie
JS日期对比	JSONP参考文章
Javascript的createElement	Javascript的createDocumentFragment
sessionStorage和localStorage	像素帧动画
Reference	Reference
收集最全前端学习资料	最全前端教程-猫的回忆录
JavaScript中的this陷阱的最全收集–没有之一	JS函数式编程指南
JavaScript Promise迷你书（中文版）	阮一峰 Javascript
前端 TOP 100	小白的零基础JavaScript全栈教程

UI

Reference	Reference
WeUI	Bootstrap
MUI-最接近原生APP体验的高性能前端框架	Amaze UI中国首个开源HTML5跨屏前端框架
Frozen UI	Foundation
SUI	ZUI
淘宝HTML5前端框架	KISSY - 阿里前端JavaScript库
网易Nej - Nice Easy Javascript	Kendo UI MVVM Demo
Smart UI	雅虎UI - CSS UI

CSS

Article	Article
CSS Flex布局	移动前端开发CSS3
响应式布局媒体查询	CSS图片响应式布局
lessDemo的less文件
Reference	Reference
CSS 语法参考	CSS3动画手册
腾讯css3动画制作工具	animate.css
Animated Books with CSS 3D Transforms	Browserhacks

React

React	Reference
React教程菜鸟教程	React Router 使用教程
React开发中文手册-极客学院	React教程-汇智网
React.js快速开始	Reactjs 2016最佳实践
React 入门教程	汇智网 React教程
轻松入门React和Webpack	React中文索引
Redux 中文文档	React Router官方文档中文翻译
React入门教程	React介绍及实践教程
React.js 官方网址	React.js 官方文档
React.js material UI	React.js TouchstoneJS UI
React.js amazeui UI	React 入门实例教程 - 阮一峰
React Native 中文版	Webpack 和 React 小书 - gitbook

Vue

Vue	AppDemo	Demo
NewsDemo	vue计算属性	vue生命周期
Article	Vue文档
Vue-cli脚手架	Vue组件	vue自定义指令
Vue过渡动画	Vue指令	Vue api文档
Vue执行ajax请求	vue实现类似angular服务的方法	Vue源码参考文档
Router	路由
路由demo	路由demo2
Directive	指令
指令demo	自定义指令demo	滑动手势demo
Filter	过滤器
过滤器demo	过滤器实现分页demo	过滤器读写数据
Transition	过渡
过渡demo	过渡demo2
Form	表单
获取表单值
Computed	计算
计算属性
Component	组件
组件demo
Reference	Reference	Reference
Vue官网	Vue论坛	Awesome-vue

Node

Node	Article
node技巧	NodeJs静态服务器
Reference	Reference
Node.js 包教不包会	七天学会NodeJS
从零开始nodejs系列文章	Node入门
Node初学者入门，一本全面的NodeJS教程

Gulp

Gulp	Article
Gulp Demo
Gulp	Reference
Gulp官网	Gulp中文网
Gulp资料收集	Gulp：任务自动管理工具 - ruanyifeng
Gulp插件	Gulp不完全入门教程
Gulp 入门指南

其他

Other	Article
关于Pornographic website的一些前端分析	微信公众号开发
Atom技巧总结	Mac小技巧
CSDN页面内JS跳转脚本	CSDN博客隐藏配置
百度设置小度机器人出现	前端冷知识，妙用浏览器地址栏
Vim笔记	Cordova配置&&Ionic配置（WebApp混合开发环境）
IE8及以下按钮超链接无法跳转的问题

分享功能

Share	Reference
百度分享(PC)	JiaThis(PC)
社会化分享组件(Mobile)	ShareSDK轻松实现社会化功能(Mobile)
友盟分享(Mobile)

在线演示

Reference	Reference
js 在线编辑 - runjs	js 在线编辑 - jsbin
js 在线编辑 - codepen	js 在线编辑 - jsfiddle
java 在线编辑 - runjs	js 在线编辑 - hcharts
js 在线编辑 - jsdm	sql 在线编辑 - sqlfiddle
mozilla 在线编辑器

富文本编辑器

Reference	Reference
百度ueditor	ckeditor
tinymce	kindeditor
wysiwyg	BachEditor
simditor	summernote
Squire	wangEditor

Chrome

Reference	Reference
Chrome - 基础	Chrome - 进阶
Chrome - 性能	Chrome - 性能进阶
Chrome - 移动	Chrome - 使用技巧
Chrome - Console控制台不完全指南	chrome开发工具快捷键
Chrome 开发工具 Workspace 使用	Chrome神器Vimium快捷键学习记录
Sass调试-w3cplus	如何更专业的使用Chrome开发者工具-w3cplus
Chrome调试canvas	神器——Chrome开发者工具(一)
奇趣百科性能优化(Chrome DevTools 中的 Timeline Profils 等工具使用介绍	Chrome 开发者工具的 15 个小技巧
Chrome开发者工具不完全指南	Chrome 开发者工具使用技巧

性能优化

Reference	Reference
Javascript高性能动画与页面渲染	移动H5前端性能优化指南
给网页设计师和前端开发者看的前端性能优化	张鑫旭——前端性能
web前端性能优化进阶路	Hey——前端性能
YSLOW中文介绍	Yahoo!团队实践分享：网站性能
加载，不只是少一点点	由12306谈谈网站前端性能和后端性能优化
【高性能前端1】高性能HTML	【高性能前端2】高性能CSS
前端工程与性能优化（上）：静态资源版本更新与缓存	前端工程与性能优化（下）：静态资源管理与模板框架
HTTPS连接的前几毫秒发生了什么	Yslow
阿里无线前端性能优化指南(Pt.1 加载期优化)	毫秒必争，前端网页性能最佳实践

CDN

Reference	Reference
Jquery&Bootstrap中文网开源项目免费 CDN 服务	Bootstrap中文网开源项目免费 CDN 服务
新浪CDN	百度静态资源公共库
开放静态文件 CDN - 七牛	CDN加速 - jq22
微软CDN	Angular CDN
360网站卫士常用前端公共库CDN服务

Git

Article	Article
Git操作	Git CSDN Blog
Reference	Reference
Git-scm	Git-for-windows
廖雪峰-Git教程	Gogithub
Git常规命令练习	Git的资料整理
我所记录的git命令（非常实用）	GitHub 漫游指南
GitHub秘籍	动画方式练习git

Sass&Less

Article	Article
Less教程
Reference	Reference
Sass	Sass中文文档
Less

Markdown

Reference	Reference
Markdown 语法说明 (简体中文版)	Markdown入门参考
Mdeditor(一款国内的在线markdown编辑器)	Stackedit(国外的在线markdown编辑器，功能强大，同步云盘)
Mditor一款轻量级的markdown编辑器	lepture-editor
Markdown-editor

前端文档

Reference	Reference
前端知识结构	Web前端开发大系概览
免费的编程中文书籍索	前端书籍
前端免费书籍大全	重新介绍JavaScript（JS教程）
Gitbook	Front-End-Develop-Guide 前端开发指南
前端开发笔记本	大前端工具集
前端开发者手册	结合个人经历总结的前端入门方法
2016最新前端学习计划

前端规范

Reference	Reference
通过分析github代码库总结出来的工程师代码书写习惯	HTML&CSS编码规范 by @mdo
前端编码规范之js - by yuwenhui	前端编码规范之js - by 李靖
Airbnb JavaScript 编码规范（简体中文版）	AMD与CMD规范的区别
AMD与CMD规范的区别	KISSY 源码规范
前端代码规范及最佳实践	百度前端规范
JavaScript风格指南/编码规范（Airbnb公司版）	网易前端开发规范
前端规范资源列表	Web 前端开发规范文档

前端面试

Reference	Reference
2016校招内推 – 阿里巴巴前端 – 四面面试经历	那几个月在找工作（百度，网易游戏，华为）
前端开发面试题	Front-end-Interview-questions
5个经典的前端面试问题	Front-end-Developer-Interview-Questions
BAT及各大互联网公司2014前端笔试面试题：JavaScript篇	前端开发面试题大收集
收集的前端面试题和答案	前端开发面试题
前端面试大全	关于前端面试

前端网站

Reference	Reference
掘金	百度FEX
阿里UED	菜鸟教程
QDFuns	幕课网
Codepen	Sentsin
segmentfault	前端网

JS练习

Reference	Reference
Codewars	Javascript-puzzlers
Freecodecamp中文版	ES6katas
Now Coder牛客网	Leetcode
Nodeschool	Hackerrank

算法

Reference	Reference
数据结构与算法 JavaScript 描述. 章节练习	常见排序算法（JS版）
经典排序	常见排序算法-js版本

ES

Reference	Reference
Exploring-ES6翻译	阮一峰 ES6
ECMA-262，第 5 版	ES5

如需参考过往资料可翻看commit或查看下文：

如何评价 GitHub 中国区粉丝数前 100 名的用户？

为什么有人GitHub排行很低，不仅不向排行高的学习，反而去黑排行高的？

来源
https://github.com/windiest/Front-end-tutorial/blob/master/README.md

过瘾吗再来张

logo

动态更新模版

完成了之前没完成的功能
1.新建定时任务
2.不定时请求OBS的配置文件即开关
3.开关打开更细流程，读取OBS桶里的html模版，不要忘记添加时间戳，（过滤url为obs外网路径，不影响现有架构发布流程）fs调用writeFileSync写入文件并存储到views目录下即可，模版名不可重复，可以添加时间戳
4.刷新页面读取新模版返回浏览器

// 定时任务
module.exports = app => {
  return {
    schedule: {
      interval: '1m',
      type: 'all',
      immediate: true,
    },
    async task() {
      const env = app.config.env;
      // if (env === 'sit' || env === 'uat' || env === 'prod') return false
      const url = app.config.rtg;
      const obs = app.config.obs;
      const Bucket = app.config.bucket;
      const tail = new Date().getTime();
      const result = await axios.get(url + '/config/rtg-' + env + '.json?n=' + tail);

      if (result && result.data && result.data.static) {
        const res = await axios.get(url + '/rtg/main.html?n=' + tail);
        if (!res || !res.data) return
        result.data.static = false;
        result.data.template = 'home_' + tail + '.nj';
        // process.env.tail = tail;
        const __url = path.join(__dirname, '../view/home_' + tail + '.nj');
        const tpl = res.data.replace(/\/\/{&&ENV&&}.stmaezia.com\/rtg\/dashboard\/parent/g, 'https://cdc-obs.maezia.com/rtg');
        fs.writeFileSync(__url, tpl, null, 2);
        const client = new ObsClient(obs);
        await client.putObject({
          Bucket,
          Key: 'config/rtg-' + env + '.json',
          Body: JSON.stringify(result.data),
        });
      }
    },
  }
}

// 入口模版
import { Controller } from '../../framework';
import axios from 'axios';

export default class HomeController extends Controller {
    public async index() {
        const { ctx } = this;
        const user = ctx.user;
        const url = this.app.config.authority;
        const params = {
            serviceName: 'RTG',
            extUid: '',
            uid: '',
        };

        console.log(user);

        if (!user.maUserName) {
            console.log('--- login ---')
            return ctx.redirect('/login');
        }

        if (user.maUserId.length >= 30) {
            params.extUid = user.maUserId;
        } else {
            params.uid = user.maUserId;
        }

        const res = await axios({
            url,
            method: 'get',
            params,
        });

        console.log(res.data);

        let data = {
            maUserId: user.maUserId,
            maUserName: user.maUserName,
            anonymous: JSON.stringify({}),
            accessMap: JSON.stringify({}),
            permissions: JSON.stringify(res.data),
            env: this.app.config.env,
            from: user.from,
            email: user.email,
            // publicPath: '/',
            authority: this.app.config.authority,
            remoteHost: this.app.config.remoteHost,
            cas: this.app.config.login.sources[0].base_url,
        };

        data = Object.assign(data, user);

        if (this.app.config.env === 'local') {
            await ctx.render('home_local.nj', data);
        } else {
            const tail = process.env.tail
            if (tail) {
                console.log('--- load template ---', tail + '.nj');
                await ctx.render('home_' + tail + '.nj', data);
            } else {
                await ctx.render('home_' + this.app.config.env + '.nj', data);
            }
        }
    }
    public async sayHello() {
        this.ctx.body = { content: 'Hello, World' };
    }
}

Subresource Integrity 子资源完整性校验 (SRI)

vue.config中添加两个参数:

https://blog.csdn.net/qq_40774743/article/details/108259153

Content Security Policy

CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。
CSP 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单的可信主机

response headers 添加 Content-Security-Policy

res.setHeader('Content-Security-Policy', "default-src abc..com 'unsafe-inline' data:; connect-src 'self';");

通过 meta 标签

上面代码中，CSP 做了如下配置

script-src：外部脚本
style-src：样式文件
img-src：图片文件
media-src：媒体文件（音频和视频）
font-src：字体文件
object-src：插件（比如 Flash）
child-src：框架
frame-ancestors：嵌入的外部资源（比如<frame>、<iframe>、<embed>和<applet>）
connect-src：HTTP 连接（通过 XHR、WebSockets、EventSource等）
worker-src：worker脚本
manifest-src：manifest 文件
default-src:用来设置上面各个选项的默认值。

value:
  1.self :只能和当前同域
  2.unsafe-inline： 可以通过行内运算得到
  3.none：不匹配任何，就是完全不允许

SameSite
SameSite=None：无论是否跨站都会发送 Cookie
SameSite=Lax：允许部分第三方请求携带 Cookie
SameSite=Strict：仅允许同站请求携带 Cookie，即当前网页 URL 与请求目标 URL 完全一致

# 中等漏洞
1. SRI (Subresource Integrity) 的检查
   integrity: true,
   crossorigin: 'anonymous'

   /login 杭州修复

2. “Content-Security-Policy”头缺失
   /login 杭州修复

3. httpOnly
   csrf-token BFF 端无法修复，包含 /login
   HWWAFSESID and HWWAFSESTIME IT yangbowen提交工单，由华为后台修复

4. 具有不安全、不正确或缺少 SameSite 属性的 Cookie
   https://support.huaweicloud.com/waf_faq/waf_01_0121.html (Secure)
   https://support.huaweicloud.com/waf_faq/waf_01_0347.html (HWWAFSESID)

   4.1 HWWAFSESID
   4.2 csrf-token
   4.3 MA_SESS
   4.4 HWWAFSESTIME
   4.5 samesite
   4.6 samesite.sig
   4.7 http
   4.8 secure
   4.9 secure.sig

5. 加密会话（SSL）Cookie 中缺少 Secure 属性

   5.1 samesite
   5.2 HWWAFSESID
   5.3 csrf-token
   5.4 HWWAFSESTIME
   5.5 MA_SESS
   5.6 secure
   5.7 samesite.sig
   5.8 MA_LOGIN_SOURCE
   5.9 secure.sig

6. 发现可高速缓存的 SSL 页面
   /logig 杭州

7. 在应用程序中发现不必要的 Http 响应头 301 and 302
   Server: CloudWAF

8. 检测到 SHA-1 密码套件 (较弱的密码套)
   TLS_ECDHE_RSA_WITH_AES_128_CBC_SHA
   TLS_ECDHE_RSA_WITH_AES_256_CBC_SHA

   TLS_ECDHE_RSA_WITH_AES_256_GCM_SHA384,
   TLS_ECDHE_RSA_WITH_AES_256_CBC_SHA384,
   TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256,
   TLS_ECDHE_RSA_WITH_AES_128_CBC_SHA256,
   TLS_RSA_WITH_AES_256_GCM_SHA384,
   TLS_RSA_WITH_AES_128_GCM_SHA256,
   TLS_RSA_WITH_AES_256_CBC_SHA256,
   TLS_RSA_WITH_AES_128_CBC_SHA256

9. 监测到隐藏目录
   /login 杭州

10. "Referral Policy" Security 头缺失
   9.1 /login
   9.2 /

ele组件

this.$message({
  message: '这是一条消息',
  customClass: 'high-zindex',
  duration: '5000'
});