随笔分类 - web
摘要：一、XSS攻击 Cross Site Scripting跨站脚本攻击 利用js和DOM攻击。 盗用cookie，获取敏感信息 破坏正常页面结构，插入恶意内容（广告..） 劫持前端逻辑 DDos攻击效果——分布式拒绝服务攻击 Server Limit Dos，Http header过长，server返
阅读全文
摘要：一、Webpack和gulp/grunt对比 1、Gulp和Grunt Grunt和Gulp的工作方式是:在一个配置文件中，指明对某些文件进行类似编 译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。 Grunt 弊端： 是基于文件流的（读到内存，替换），随着项目膨胀，会越来越慢，越
阅读全文
摘要：json文件可以理解为数据库 一、json-server快速搭建RESTAPI 安装： sudo cnpm install -g json-server 启动（使用）： json-server指向json文件所在位置 data.json文件： { "roles": [ { "id": 0, "nam
阅读全文
摘要：CSRF（Cross Site Request Forgeries）跨网站请求伪造，也叫XSRF，通过伪装来自受信任用户的请求来攻击利用受信任网站。 与对比 xss:本网站运行了来自其它网站的脚本 csrf:其它网站对本网站产生了影响 一、攻击 利用用户登录态伪造http请求。 危害： 盗取用户资金
阅读全文
摘要：alt+insert:新建一个文件或其他 ctrl+shift+l：代码格式化 【可能会和qq的锁屏键冲突】 ctrl+shift+r:批量查找替换 多点编辑：按住alt键选择多列，就可以编辑多行了 按住ctrl+shift+向上箭头可以移动代码 本文作者starof,因知识本身在变化，作者也在不断
阅读全文
摘要：一、设计稿 要实现下面这样一个效果，本文重点说的是下面“自动续费，可随时取消”这部分的实现。 我把问题简化一下，变成了 二、解决问题的思路 1、p标签加背景色 一般，很容易想到用p标签实现，代码如下： <style type="text/css"> .box { width: 154px; heig
阅读全文
摘要：Chrome插件下载【update 20180521】 https://chrome-extension-downloader.com/ 在线图片占位符 【update 20180510】 Dynamic Dummy Image Generator 300*200背景黑色，字白色 placehold
阅读全文
摘要：今天又遇到了这个问题，记录一下。 报错 原因及解决办法： 本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/6674875.html有问题欢迎与我讨论，
阅读全文
摘要：一、跨域 一个域名地址的组成： 当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。 不同域之间相互请求资源，就算作“跨域”。 比如：http://www.abc.com/index.html请求http://www.efg.com/service.php JavaScript出于安全方
阅读全文
摘要：一、人物介绍 蒋长浩博士 Facebook 介绍：蒋长浩，1976年出生，祖籍湖南，获清华大学计算机本硕学位、伊利诺伊大学(UIUC)博士学位，在卡耐基梅隆大学(CMU)、谷歌公司从事过“普适计算~大规模计算”的优化研究。在Facebook任研究科学家，他创造BIGPIPE，使大型网站访速翻1倍，举
阅读全文
摘要：Chrome浏览器得益于其优秀的V8解释器，javascript执行速度和内存占有率表现非常优秀。 掌握了Chrome工具可提高学习效率和开发效率。 有如下功能面板，可以使用Ctrl+[和Ctrl+]快捷键在面板之间切换。 简单常用的就一笔带过 一、标签页 查看DOM tree内容 根据标签页的ht
阅读全文
摘要：一、需求描述 标题“多尺寸图片左右切换功能”，概括的不知道是否恰当，具体是需求如下。 一次点击按钮，向左或向右移动一个图片。 切换到尽头时不显示按钮 页面有三个尺寸 可以一睹为快，看一下最终效果。 二、切图代码 1、代码 html代码如下： <!DOCTYPE HTML> <html> <head>
阅读全文
摘要：一、切图 1、效果 真实效果如下。 为说明问题只保留有用代码。进度条宽度用百分比来表示，这样适配时不需要重新计算。 2、切图代码 html代码如下： <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA
阅读全文
摘要：一、Timeline panel 概况 Timeline工具栏可以详细检测出Web应用在加载过程中，时间花费情况的概览。这些应用包括下载资源，处理DOM事件, 页面布局渲染或者向屏幕绘制元素。 如下图，Timeline面板分为四个模块—控制模块，概述模块，火焰图模块，细节模块。 控制模块Contro
阅读全文
摘要：一、代码 html+js <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>数发直播平台</title> <link rel="stylesheet" type="text/css" href="css/common.css">
阅读全文
摘要：一、方法1 1、用到图片 2、结构和样式 li加了light的class就会变成亮星，就是换了背景位置，把空心的星星变成了实心的。所以js实现的时候点亮就是给li加一个light的类名。 效果： 3、交互js 这样设计的一个关键点在于，mouout时保存一个值用于让星星变暗，初始为0（0颗星变亮就是
阅读全文
摘要：官方资料：Chrome Developer Tools: Network Panel 一、chrome Developer Tools：Network Panel 从网络面板中可以获取很多有用信息，如详细的时间数据，http请求头响应头，cookies，WebSocket数据。 通过分析这些数据，可
阅读全文
摘要：最近做重构，有一个功能是，鼠标点击链接后显示不同样式： 代码如下，样式布局我修改后如下，使用bootstrap框架来做。 现在重点说一下：功能实现。 原来代码是这样实现链接点击样式的，给每个链接不同的class， 然后在page1.html页面定义： 同理在page2.html页面定义： 在page
阅读全文