License: MIT License
XSS 攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的信息如 cookie 等。
XSS 的本质是因为网站没有对恶意代码进行过滤，与正常的代码混合在一起了，浏览器没有办法分辨哪些脚本是可信的，从而导致了恶意代码的执行。
攻击者可以通过这种攻击方式可以进行以下操作：
XSS 可以分为存储型、反射型和 DOM 型：
1）存储型 XSS 的攻击步骤：
这种攻击常⻅于带有⽤户保存数据的⽹站功能，如论坛发帖、商品评论、⽤户私信等。
2）反射型 XSS 的攻击步骤：
反射型 XSS 跟存储型 XSS 的区别是：存储型 XSS 的恶意代码存在数据库⾥，反射型 XSS 的恶意代码存在 URL ⾥。
反射型 XSS 漏洞常⻅于通过 URL 传递参数的功能，如⽹站搜索、跳转等。 由于需要⽤户主动打开恶意的 URL 才能⽣效，攻击者往往会结合多种⼿段诱导⽤户点击。
3）DOM 型 XSS 的攻击步骤：
DOM 型 XSS 跟前两种 XSS 的区别：DOM 型 XSS 攻击中，取出和执⾏恶意代码由浏览器端完成，属于前端JavaScript ⾃身的安全漏洞，⽽其他两种 XSS 都属于服务端的安全漏洞。
可以看到XSS危害如此之大， 那么在开发网站时就要做好防御措施，具体措施如下：
CSP 指的是内容安全策略，它的本质是建立一个白名单，告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截由浏览器自己来实现。通常有两种方式来开启 CSP，一种是设置 HTTP 首部中的 Content-Security-Policy，一种是设置 meta 标签的方式
CSRF 攻击指的是跨站请求伪造攻击，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。
CSRF 攻击的本质是****利用 cookie 会在同源请求中携带发送给服务器的特点，以此来实现用户的冒充。
常见的 CSRF 攻击有三种：
CSRF 攻击可以使用以下方法来防护：
test
Object.create:
function create(obj) {
function F() { }
F.prototype = obj
return new F()
}// 设计一个sendRequest函数，可以限制请求的并发，同时请求结束之后，调佣callback函数
// sendRequest([() => request('1'), () => request('2'), () => request('3')], 2, (res) => {console.log(res)})
function request(url, time = 1) {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('request', url)
if(Math.random() > 0.5) {
resolve('success')
} else {
reject('error')
}
}, time * 1e3)
})
}
function sendRequest(requestList, limits, callback) {
const promises = requestList.slice()
const current = Math.min(limits, requestList.length)
let count = 0
const runTaskNeeded = () => {
let i = 0
while(i < current) {
i++
runTask()
}
}
const runTask = () => {
const task = promises.shift()
task && runner(task)
}
const runner = async(task) => {
try{
count++
await task()
} catch (e) {
} finally {
count--
picker()
}
}
const picker = () => {
if(count < limits && promises.length > 0) {
runTask()
} else if(promises.length === 0 && count === 0) {
callback && callback()
}
}
runTaskNeeded()
}
sendRequest([() => request('1'), () => request('2'), () => request('3')], 2, (res) => {console.log(res)})1XX系列：指定客户端应相应的某些动作，代表请求已被接受，需要继续处理。由于 HTTP/1.0 协议中没有定义任何 1xx 状态码，所以除非在某些试验条件下，服务器禁止向此类客户端发送 1xx 响应。
2XX系列：代表请求已成功被服务器接收、理解、并接受。这系列中最常见的有200、201状态码。
3XX系列：代表需要客户端采取进一步的操作才能完成请求，这些状态码用来重定向，后续的请求地址（重定向目标）在本次响应的 Location 域中指明。这系列中最常见的有301、302状态码。
4XX系列：表示请求错误。代表了客户端看起来可能发生了错误，妨碍了服务器的处理。常见有：401、404状态码。
5xx系列：代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。常见有500、503状态码。
2开头 （请求成功）表示成功处理了请求的状态代码。
3开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。
4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。
5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。
CDN的全称是Content Delivery Network，即内容分发网络。其目的是通过在现有的internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络边缘，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等问题，提高用户访问网站的响应速度。
加速原理：
<template>
<el-dialog v-model="isShow" width="500px">
<el-scrollbar wrap-class="list-wrapper" @scroll="handleScroll($event)">
<div class="virtual-list" ref="container" :style="{height: containerHeight}">
<div :style="{height: totalHeight + 'px', paddingTop: paddingTop + 'px'}" ref="container1">
<div v-for="(item,index) in data.items" :key="`list-${index}`" class="virtual-list-item" :style="{height: `${itemHeight}px`}">
<el-radio v-model="data.buyIns" :label="item.id">{{item.name}}</el-radio>
</div>
</div>
</div>
</el-scrollbar>
</el-dialog>
</template>
<script setup lang="jsx">
import {computed, onMounted, reactive, ref, watchEffect} from 'vue'
const props = defineProps({
items: {
type: Array,
default: () => []
}
})
const data = reactive({
buyIns: '',
items: []
})
const container = ref(null)
const paddingTop = ref(0)
const itemHeight = ref(30)
const visibleCount = ref(10)
const scrollTop = ref(0)
watchEffect(() => {
if (container.value) {
updateVisibleDate()
}
})
const totalHeight = computed(() => props.items.length * itemHeight.value)
const containerHeight = computed(() => visibleCount.value * itemHeight.value)
function updateVisibleDate() {
const start = Math.floor(scrollTop.value / itemHeight.value)
const end = start + visibleCount.value
data.items = props.items.slice(start, end)
paddingTop.value = start * itemHeight.value
}
const handleScroll = (event) => {
scrollTop.value = event.scrollTop
// updateVisibleDate()
}
const isShow = ref(false)
const open = () => {
isShow.value = true
}
defineExpose({
open
})
</script>
<style lang="scss" scoped>
:deep(.list-wrapper) {
height: 300px;
width: 100%;
}
.virtual-list {
overflow-y: auto;
&-item {
height: 30px;
}
}
</style>function sleep(time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
async function run(time) {
console.log('11');
console.time('runtime');
await sleep(time);
console.log('22');
console.timeEnd('runtime');
}
run(2000);
// 11
// 22
// runtime: 2.001s
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.