<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Limonor的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Limonor</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Limonor]]></copyright><item><title><![CDATA[网络应用层安全之SQL注入]]></title><link>https://blog.youkuaiyun.com/Limonor/article/details/116403275</link><guid>https://blog.youkuaiyun.com/Limonor/article/details/116403275</guid><author>Limonor</author><pubDate>Tue, 04 May 2021 18:19:32 +0800</pubDate><description><![CDATA[网络应用层安全之SQL注入

注入攻击，就是数据与代码没有分离产生的结果，计算机或服务器把用户输入的数据当做代码执行，其中有两个关键条件：①用户能够控制输入，②代码进行了拼接。
SQL注入是发生在 Web 程序中数据库层的安全漏洞，是网站最常见最简单的漏洞。网站考虑地再详细也会被黑客们抓到漏洞和破绽，SQL注入利用程序对输入数据不会判断和处理进行恶意攻击，使用具有特定意义的SQL 语句执行非法操作。

简言之，SQL 注入就是在用户输入的字符串中加入 SQL 语句，如果程序没有对输入进行处理，那么这些注入进]]></description><category></category></item><item><title><![CDATA[网络攻击与安全(XSS和CSRF)]]></title><link>https://blog.youkuaiyun.com/Limonor/article/details/115974965</link><guid>https://blog.youkuaiyun.com/Limonor/article/details/115974965</guid><author>Limonor</author><pubDate>Wed, 21 Apr 2021 19:48:33 +0800</pubDate><description><![CDATA[网络攻击与安全(XSS和CSRF)
XSS（Cross-Site scripting，跨站脚本攻击）：

一种代码注入式攻击
攻击者通过在目标网站上注入恶意脚本，用户浏览时会执行。
这种攻击可获取用户的敏感信息如 Cookie、SessionID 等，会话劫持、钓鱼欺骗、强制弹出广告、恶意操作，危害数据安全。
是最常见的安全漏洞


本质理解

恶意代码未经过滤，与网站正常的代码混在一起；浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。
执行环境在用户终端，恶意代码直接获取用户信息


案例（把输入当成]]></description><category></category></item><item><title><![CDATA[数组去重（多种考虑情况）]]></title><link>https://blog.youkuaiyun.com/Limonor/article/details/114993216</link><guid>https://blog.youkuaiyun.com/Limonor/article/details/114993216</guid><author>Limonor</author><pubDate>Thu, 18 Mar 2021 23:02:04 +0800</pubDate><description><![CDATA[对于这个问题，需要考虑到各种情况的数组
const arr1 = [1, 1, 1, 1, 1, 2, 2, 2, 3];
const arr2 = [1, 1, 1, 'a', 'b', 'a', 2, 2];
const arr3 = [{ a: 1 }, { a: 1 }, { b: 2 }, { b: 2 }, { c: 3 }];
const arr4 = [1, , , , 2, , 3];
const arr5 = [true, true, false, true, false];


S..]]></description><category></category></item><item><title><![CDATA[不修改原数组的情况下反转数组]]></title><link>https://blog.youkuaiyun.com/Limonor/article/details/114703481</link><guid>https://blog.youkuaiyun.com/Limonor/article/details/114703481</guid><author>Limonor</author><pubDate>Fri, 12 Mar 2021 19:50:33 +0800</pubDate><description><![CDATA[问题：在不修改原数组的情况下反转数组

大家都知道reverse()，但是这个方法是会改变原来的数组，怎样既可以访问到原来的数组，有可以让新数组实现元素反转。
首先，复习一下在数组的方法中，哪些是修改原有的数组，哪些是生成新的数组。

修改原数组：push pop shift unshift splice sort reverse copyWithin
生成新数组：filter concat slice map reduce


一、ES6的扩展运算符
ES6新增的扩展运算符非常好用。
[...arr] 就]]></description><category></category></item><item><title><![CDATA[跨域（无代码版）]]></title><link>https://blog.youkuaiyun.com/Limonor/article/details/114498611</link><guid>https://blog.youkuaiyun.com/Limonor/article/details/114498611</guid><author>Limonor</author><pubDate>Sun, 07 Mar 2021 21:23:41 +0800</pubDate><description><![CDATA[目录同源跨域实现跨域1、JSONP（JSON with Padding）① JSONP 是什么② JSONP 和 AJAX 对比③ JSONP 的实现流程2、CORS（Cross-Origin Resource Sharing）跨域资源共享① 简单请求② 复杂请求3、HTML5 postMessage 方法4、修改 document.domain 跨子域5、基于 HTML5 websocket 协议6、Node 中间件代理（两次跨域）7、代理跨域请求（Nginx反向代理）8、iframe(1) windo.]]></description><category></category></item><item><title><![CDATA[请求 Provisional headers are shown 问题]]></title><link>https://blog.youkuaiyun.com/Limonor/article/details/114059936</link><guid>https://blog.youkuaiyun.com/Limonor/article/details/114059936</guid><author>Limonor</author><pubDate>Thu, 25 Feb 2021 09:25:06 +0800</pubDate><description><![CDATA[问题直译：“显示了临时报文头”
几种可能的原因：

跨域请求被浏览器拦截
Chrome 浏览器插件拦截
服务器出错或者超时
请求的数据采用了缓存，并没有发送请求
后端服务器 Controller 的接口地址上没有添加 @ResponseBody注解，导致接口未对外输出响应信息，也就意味着该接口不存在；
在filter中设置请求头的时候，没有加入content-type这个请求头，导致前端传不了json数据，因为浏览器是根据option返回的结果来确定请求参数的，所以前端浏览器发送option时，后端resp]]></description><category></category></item><item><title><![CDATA[Promise笔记]]></title><link>https://blog.youkuaiyun.com/Limonor/article/details/113928029</link><guid>https://blog.youkuaiyun.com/Limonor/article/details/113928029</guid><author>Limonor</author><pubDate>Mon, 22 Feb 2021 21:07:00 +0800</pubDate><description><![CDATA[Promise 对象
一、引言
Promise 是异步编程的方案

异步操作有哪些：

fs 文件操作
数据库
ajax
定时器


传统异步的解决方案 —— 回调函数和事件
从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。
Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

Promise对象有以下两个特点。
????（1）对象的状态不受外界影响。
Promise对象代表一个异步操作，有三种状态：

Pending（进行中）
Resolved（已完成）
Re]]></description><category></category></item><item><title><![CDATA[聊聊JavaScript中的this]]></title><link>https://blog.youkuaiyun.com/Limonor/article/details/111144776</link><guid>https://blog.youkuaiyun.com/Limonor/article/details/111144776</guid><author>Limonor</author><pubDate>Sun, 13 Dec 2020 20:35:03 +0800</pubDate><description><![CDATA[this

一、上几道题开开胃
1 ????
var obj = {
    name: 'a',
    say: function(){
        console.log(this.name)
    }
}

var say = obj.say;

obj.say();  
say();  


答案
a
undefined


在对象里面调用 和 被声明成独立的全局引用 是不一样的
obj.say(); 就是在 obj 对象里面查找 say 函数，执行环境是 obj 对象，this 指向 ob]]></description><category></category></item><item><title><![CDATA[JavaScript中的三大类型 Boolean、Number、String]]></title><link>https://blog.youkuaiyun.com/Limonor/article/details/110766595</link><guid>https://blog.youkuaiyun.com/Limonor/article/details/110766595</guid><author>Limonor</author><pubDate>Sun, 06 Dec 2020 21:12:38 +0800</pubDate><description><![CDATA[Boolean、Number、String

JavaScript有三种特殊的引用类型 Boolean、Number 和 String，它们有各自的属性和方法，也各自是数据结构的一种，在小题目中会出现的比较多。
目录Boolean、Number、StringBoolean数据类型Boolean() 转型函数new Boolean 对象Number数据类型转换为数值????Number()????parseInt()????parseFloat()Number 数值判断????isNaN()????isFin]]></description><category></category></item><item><title><![CDATA[JavaScript中的数组Array速览]]></title><link>https://blog.youkuaiyun.com/Limonor/article/details/109996722</link><guid>https://blog.youkuaiyun.com/Limonor/article/details/109996722</guid><author>Limonor</author><pubDate>Mon, 23 Nov 2020 15:07:28 +0800</pubDate><description><![CDATA[Array

JavaScript中的数组是一种特殊的对象，用来表示偏移量的索引是该对象的属性。
JavaScript中的数组严格意义上是对象，被当做对象，在内部被归结为数组。


创建数组
（1）字面量表示
直接通过 [ ] 操作符声明一个数组变量
var arr = [];
var arr2 = [1,2,3,4];


（2）构造函数方式
通过new一个构造函数来创建
var arr = new Array(1,2,3,4)


（3）Array.of 创建数组
从给定参数创建数组
var arr =]]></description><category></category></item><item><title><![CDATA[WEB页面的生命周期,DOMContentLoaded,load,beforeunload,unload]]></title><link>https://blog.youkuaiyun.com/Limonor/article/details/109989855</link><guid>https://blog.youkuaiyun.com/Limonor/article/details/109989855</guid><author>Limonor</author><pubDate>Mon, 23 Nov 2020 12:41:41 +0800</pubDate><description><![CDATA[iFat3 发布在 javascript 2018年2月25日 view：2073HTML5 前端开发 DOMHTML

简言
理解WEB页面的生命周期，文档加载事件及顺序对WEB开发有十分的重要意义。如果不理解，在元素未加载就提前操作元素，则得不到想要的结果。而如果页面完全加载完成后，再进行操作，则又会影响用户体验。
一般来说，大多数的操作我们都应该放在DOMContentLoaded事件中执行。采用如下形式：
document.addEventListener('DOMContentLoaded', .]]></description><category></category></item><item><title><![CDATA[详细介绍：怎么用github展示自己的前端项目页面（转载）]]></title><link>https://blog.youkuaiyun.com/Limonor/article/details/109730132</link><guid>https://blog.youkuaiyun.com/Limonor/article/details/109730132</guid><author>Limonor</author><pubDate>Mon, 16 Nov 2020 21:19:22 +0800</pubDate><description><![CDATA[原文地址
https://www.cnblogs.com/free-whale/p/10726654.html
之前一直想着把自己做的一些页面怎么用github展示出来，因为我看到有人用的是github来展示自己做的一些项目。用github来展示就不用去折腾搭建自己的网站等一系列复杂的东西了，后面在网上搜了下，感觉好复杂，但是最近几天静心下来研究这个，结合别人写的一些教程，发现是那么的简单，分分钟的事儿嘛，觉得网上有些教程写的太过于复杂，对新手不是很友好，特此写一篇觉得对新手友好的教程，希望能帮到有需要的人]]></description><category></category></item><item><title><![CDATA[Vue生命周期]]></title><link>https://blog.youkuaiyun.com/Limonor/article/details/109669664</link><guid>https://blog.youkuaiyun.com/Limonor/article/details/109669664</guid><author>Limonor</author><pubDate>Fri, 13 Nov 2020 10:28:28 +0800</pubDate><description><![CDATA[生命周期
beforeCreate
是new Vue()之后触发的第一个钩子，实例刚刚被创建，还没有初始化好data，methods。
在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。

created
在实例创建完成后发生，当前阶段实例的data和methods已经初始化，已经完成了数据观测，可以使用数据，更改数据。
在这里更改数据不会触发updated函数。
可以做一些初始数据的获取。
在当前阶段无法与Dom进行交互，如果非要想，可以通过vm.$nextTi]]></description><category></category></item><item><title><![CDATA[CSS居中的几种常见写法]]></title><link>https://blog.youkuaiyun.com/Limonor/article/details/109561665</link><guid>https://blog.youkuaiyun.com/Limonor/article/details/109561665</guid><author>Limonor</author><pubDate>Sun, 08 Nov 2020 17:17:19 +0800</pubDate><description><![CDATA[居中

????文本水平居中（图片、按钮、文字等行内元素）
text-align : center;

一个盒子添加了text-align : center，里面所有的行内元素 / 行内块元素都会水平居中

????div块水平居中
margin : auto;

其实就是把子元素的 margin-left、margin-right 都设置为 auto
但是对浮动元素和绝对定位的元素无效
子元素的宽度需要确定

????一行文字垂直居中
line-height = 你这个块的 height;

文字的行高等]]></description><category></category></item><item><title><![CDATA[CSS选择器中的符号含义]]></title><link>https://blog.youkuaiyun.com/Limonor/article/details/109555724</link><guid>https://blog.youkuaiyun.com/Limonor/article/details/109555724</guid><author>Limonor</author><pubDate>Sun, 08 Nov 2020 09:34:29 +0800</pubDate><description><![CDATA[选择器符号，指的是
div+span {}

h1,p {}

.first a {}

#show&gt;ul {}

div~p {}

这些


A~B选择器：选择A之后出现的所有B
A、B必须有相同的父元素，B不必紧邻A

A B选择器：选择A的所有后代元素

A&gt;B选择器：表示选择A元素的所有子B元素。


空格和大于的区别就是，空格取所有后代，大于只取子这一代


A,B选择器：逗号指相同的css样式

A+B选择器：这个“+”是选择相邻兄弟，叫做“相邻兄弟选择器”

...]]></description><category></category></item><item><title><![CDATA[原型与原型链，老生常谈的话题]]></title><link>https://blog.youkuaiyun.com/Limonor/article/details/109552026</link><guid>https://blog.youkuaiyun.com/Limonor/article/details/109552026</guid><author>Limonor</author><pubDate>Sat, 07 Nov 2020 22:12:03 +0800</pubDate><description><![CDATA[关于这个知识点的网上的博客帖子已经很多很多了，无意与大牛们比，只是想着自己理解了表达提炼出来，作为整理，方便记录。

目录全面的理解一遍总结版的回答

全面的理解一遍
1️⃣ JavaScript是面向对象的语言。面向对象的语言都是通过类来创建实例对象，但是ES6之之前没有class。

2️⃣ JavaScript通过构造函数生成实例化对象。
function Car(){
	//code
}
var suv = new Car();


3️⃣ 每个函数都有一个prototype属性，本质是对象。
//]]></description><category></category></item><item><title><![CDATA[JavaScript笔记之二：DOM-BOM]]></title><link>https://blog.youkuaiyun.com/Limonor/article/details/109521663</link><guid>https://blog.youkuaiyun.com/Limonor/article/details/109521663</guid><author>Limonor</author><pubDate>Thu, 05 Nov 2020 22:13:52 +0800</pubDate><description><![CDATA[WebAPI

web APIs是W3C的标准 主要学习DOM BOM
页面交互
API（应用程序编程接口）是一些预先定义的函数，方便用，不需要理解
web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM DOM）

DOM
DOM（文档对象模型），是W3C组织推荐的处理可扩展标记语言（HTML/XML）的标准编程接口。
已经定义了有一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

DOM树
一个页面就是一个文档 document
页面中的所有标签都是元素 elem]]></description><category></category></item><item><title><![CDATA[JavaScript笔记之一：JS原生]]></title><link>https://blog.youkuaiyun.com/Limonor/article/details/109298542</link><guid>https://blog.youkuaiyun.com/Limonor/article/details/109298542</guid><author>Limonor</author><pubDate>Sun, 01 Nov 2020 21:14:44 +0800</pubDate><description><![CDATA[JavaScript
一、基础
运行在客户端的脚本语言
脚本语言：不需要编译，运行过程中由 js解释器（js引擎）逐行来解释执行
也可以基于 Node.js 技术进行服务器端编程
作用

表单动态验证
网页特效
服务端开发 Node.js
桌面程序 Electron
App
物联网
游戏开发

浏览器执行JS
浏览器分为两部分：渲染引擎 、JS引擎

渲染引擎：用来解释HTML和CSS，内核
JS引擎：JS解释器，读取网页中的 JS 代码，处理后运行


浏览器本身不会执行JS代码，而是通过内置JS引擎来执]]></description><category></category></item><item><title><![CDATA[CSS定位之【BFC】]]></title><link>https://blog.youkuaiyun.com/Limonor/article/details/109320932</link><guid>https://blog.youkuaiyun.com/Limonor/article/details/109320932</guid><author>Limonor</author><pubDate>Tue, 27 Oct 2020 22:17:18 +0800</pubDate><description><![CDATA[首先复习一下CSS的几种定位方式


普通流：由上至下，行内元素和块级元素按照自己的摆放规则水平或竖直排布，


浮动流：在普通流的基础上浮动偏移，一般是左右浮动


绝对定位流：整体脱离普通流，元素不占原来位置


????而BFC属于普通流





初识BFC
块格式化上下文，是Web页面可视化渲染CSS的一部分, 是布局过程中生成块级盒子的区域。也是浮动元素与其他元素的交互限定区域。
我们可以把具有BFC的盒子看做一个隔离的独立容器，它改变内部的渲染方式，不会影响外面的布局。

如何触发BFC

引]]></description><category></category></item><item><title><![CDATA[阻塞dom解析和不阻塞dom解析的资源 (DOMContentLoaded)和(window onload)]]></title><link>https://blog.youkuaiyun.com/Limonor/article/details/109304662</link><guid>https://blog.youkuaiyun.com/Limonor/article/details/109304662</guid><author>Limonor</author><pubDate>Tue, 27 Oct 2020 09:49:42 +0800</pubDate><description><![CDATA[转载：https://blog.youkuaiyun.com/liuanpingfirst/article/details/85276720

        
                
                    下面的图很清晰地解释了dom解析与不同js的加载的不同： 
&nbsp; 
 
绿色表示dom解析，灰色表示阻塞，紫色表示js加载（下载），红色表示js执行 
&nbsp; 
会阻塞dom解析的资源有： 
1.内联css 
2.内联js 
3.普通外联js&nbsp;&nbsp;，加载情]]></description><category></category></item></channel></rss>