Fork me on GitHub

http请求头-什么是CSP

一、简介

CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。

CSP 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单的可信主机。

两种方法可以启用 CSP。一种是通过 HTTP 头信息的Content-Security-Policy的字段。

more >>

展开全文 >>

webpack配置

随着现代前端开发的复杂度和规模越来越庞大，已经不能抛开工程化来独立开发了，如 react 的 jsx 代码必须编译后才能在浏览器中使用；又如 sass 和 less 的代码浏览器也是不支持的。 而如果摒弃了这些开发框架，那么开发的效率将大幅下降。在众多前端工程化工具中，webpack 脱颖而出成为了当今最流行的前端构建工具。 然而大多数的使用者都只是单纯的会使用，而并不知道其深层的原理。希望通过以下的面试题总结可以帮助大家温故知新、查缺补漏，知其然而又知其所以然。

more >>

展开全文 >>

ReDos攻击

ReDoS 原理

概述

DFA对于文本串里的每一个字符只需扫描一次，比较快，但特性较少；NFA要翻来覆去吃字符、吐字符，速度慢，但是特性(如:分组、替换、分割)丰富。NFA支持  惰性(lazy)、回溯(backtracking)、反向引用(backreference)，NFA缺省应用greedy模式，NFA可能会陷入递归险境导致性能极差。

more >>

展开全文 >>

js防抖和节流

防抖(debounce)

在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms ，然后：
如果在 200ms 内没有再次触发滚动事件，那么就执行函数
如果在 200ms 内再次触发滚动事件，那么当前的计时取消，重新开始计时

function debounce(func, wait) {
  var timer = null;
  return function () {
    var self = this;
    var args = arguments;
    if (timer) clearTimeout(timer);
    timer = setTimeout(function () {
      typeof func === 'function' && func.apply(self, args);
    }, wait);
  };
}
more >>

展开全文 >>

css常用知识

什么是盒子模型

盒模型分为标准盒模型和怪异盒模型（IE）

box-sizing : content-box //标准盒模型
box-sizing : border-box //怪异盒模型
  • 标准盒模型: 这种盒模型设置width的时候的值是内容区的宽度, 如果再设置padding和margin, border的话盒子的实际宽度会增大；
  • 怪异盒模型: 这种盒子的width设置的值为盒子实际的宽度, border和padding的设置不会影响盒子的实际宽度和高度

CSS 新特性

transition //过渡
transform //旋转、缩放、移动或者倾斜
animation //动画
gradient //渐变
shadow //阴影
border-radius //圆角
more >>

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

前端攻城狮
记录分享自己工作、学习中学到的知识