梦入琼楼寒有月，行过石树冻无烟

📖 earlier posts 📖

JavaScript for 循环

2022-04-21

循环5次（for……)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button onclick="myFunction()">开始</button>
<p id="data"></p>
<script>
    function myFunction() {
        var a = "";
        for (var i=0;i<10;i++) {
            a = a + "本次执行 " + i + "<br>";
        }
        document.getElementById('data').innerHTML = a;
    }
</script>
</body>
</html>

遍历对象 (for……in)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button onclick="myFunction()">开始</button>
<p id="data"></p>
<script>
    function myFunction() {
        var x;
        var two = "";
        var person = {one:"ones",
                    two:"twos",
                    three:"three"};
        for (x in person) {
            two = two + person[x];
        }
        document.getElementById('data').innerHTML = two;
    }
</script>
</body>
</html>

JavaScript switch

2022-04-21
1
2
3
4
5
6
7
8
9
switch (参数) {
    case 1:
        // 代码块
    case 2:
        // 代码块
        break;
    default:
        // 与case 1 or case 2 不同时执行的代码
}

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
	<p id="data"></p>
<script>
var a, b, c;
a = 1; b = 2;
c = a+b;

switch (c) {
	case 1:
		c = "满足条件1";
		break;
	case 2:
		c = "满足条件2";
		break;
	case 3:
		c = "满足条件3";
		break;
	default:
		c = "条件不构成";
}
document.getElementById('data').innerHTML = c;
</script>
</body>
</html>

如果该值存在将会于结构中的每个case的值作为比较。如果匹配，关联的case代码块会被执行，之后将会使用“break”阻止向下执行。

ID DA FA
break 结束

JavaScript 条件语句

2022-04-21

当条件满足时 （if……)

1
2
3
if (条件) {
    // Code
}

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
	<p id="data"></p>
<script>
var a, b, c;
a = 1; b = 2;
c = a+b;

if (c==3) {
	document.getElementById('data').innerHTML = c;
}
</script>
</body>
</html>

当条件满足和不满足时 (if……else)

1
2
3
4
5
if (条件) {
	// 代码块
} else {
	// 代码块
}

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
	<p id="data"></p>
<script>
var a, b, c;
a = 1; b = 2;
c = a+b;

if (c==3) {
	c = "满足"
} else {
	c = "不满足"
}
	document.getElementById('data').innerHTML = c;
</script>
</body>
</html>

多个条件执行 (if……else if……else )

1
2
3
4
5
6
7
if (条件) {
    // 代码块
} else if (条件) {
	// 代码块
} else {
    // 代码块
}

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
	<p id="data"></p>
<script>
var a, b, c;
a = 1; b = 3;
c = a+b;

if (c==3) {
	c = "满足"
} else if (c==4) {
	c = "还算满足"
} else {
	c = "不满足"
}
document.getElementById('data').innerHTML = c;
</script>
</body>
</html>

JavaScript 比较与逻辑和条件运算

2022-04-21

比较运算符

ID DA EX
== 等于 x==1
=== 绝对等于 x===1
x!= 不等于 x=!1
===! 不绝对等于[^有一个相等，或都不相等] x===!1
> 大于 x>1
< 小于z x<1
>= 大于等于 x>=1
<= 小于等于 x<=1

逻辑运算符

ID DA EX
&& 和（and） a&&b
|| 或者 (or) a==1 || b==2
! 不是 (not) !(a==b)

条件运算符

1
2
3
4
5
格式：
变量名=(条件)>“返回值，不打到”:"返回值，达到"

variable name=(condition)?value1:value2
voteable=(age<18)?"未成年":"成年人";

检测是否是成年人

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head> 
</head>
<body>
<p>点击按钮检测年龄。</p>
年龄:<input id="age" value="10" />
<button onclick="data()">点击按钮</button>
<p id="data"></p>
<script>
function data() {
    var age,condition;
    age = document.getElementById('age').value;
    voteable = (age<18)?"未成年人":"已成年人";
    document.getElementById('data').innerHTML = voteable;
}
</script>
</body>
</html>

JavaScript 字符串方法

2022-04-21

字符串

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
  var leigin = "Hello";
  document.getElementById('data').innerHTML = leigin;
</script>
</body>
</html>

字符串方法

字符串长度 (Length)
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var data = "ASDSADSADQWEQW";
document.getElementById('demo').innerHTML = data.length;
</script>
</body>
</html>
字符串首次出现位置 (indexOf)
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
var data = "DSADKJQIWJEIWQE NI1" ;
var inof = data.indexOf("NI1");
document.getElementById("data").innerHTML = inof; 
</script>
</body>
</html>
字符串最后出现位置 (lastIndexOf)
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
var data = "DSADKJQIWJEIWQE NI1DDASJDISAIADIASD NI1" ;
var inof = data.lastIndexOf("NI1");
document.getElementById("data").innerHTML = inof; 
</script>
</body>
</html>
数据提取 (slice)
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
var dat = "one, two, three, four";
var det = dat.slice(5,9);
document.getElementById('data').innerHTML = det;
</script>
</body>
</html>

切片

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
var dat = "one, two, three, four";
var det = dat.slice(5);
document.getElementById('data').innerHTML = det;
</script>
</body>
</html>
文字替换 (replace)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<button onclick="functio()">开始</button>
<p id="data">我很好</p>
<script>
function functio() {
    var data = document.getElementById('data').innerHTML;
    var repl = data.replace("我很好","我不好")
    document.getElementById('data').innerHTML = repl;
}
</script>
</body>
</html>

大小写通用 (/i)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<button onclick="functio()">开始</button>
<p id="data">Google</p>
<script>
function functio() {
    var data = document.getElementById('data').innerHTML;
    var repl = data.replace(/GOOGLE/i,"Go")
    document.getElementById('data').innerHTML = repl;
}
</script>
</body>
</html>

多个替换 (/g)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<button onclick="functio()">开始</button>
<p id="data">Google,Google</p>
<script>
function functio() {
    var data = document.getElementById('data').innerHTML;
    var repl = data.replace(/Google/g,"Go")
    document.getElementById('data').innerHTML = repl;
}
</script>
</body>
</html>

正则表达

ID DA FA
/i 大小写敏感
/g 多个替换
大小写字母转换 (toUpperCase / toLowerCase)

转换大写 (toUpperCase)

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>				
<html>
<body>
<button onclick="dat()">开始</button>
<p id="data">Hello World!</p>
<script>
function dat() {
  var data = document.getElementById('data').innerHTML;
  document.getElementById("data").innerHTML = data.toUpperCase();
}
</script>
</body>
</html>

转换小写 (toLowerCase)

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>				
<html>
<body>
<button onclick="dat()">开始</button>
<p id="data">Hello World!</p>
<script>
function dat() {
  var data = document.getElementById('data').innerHTML;
  document.getElementById("data").innerHTML = data.toLowerCase();
}
</script>
</body>
</html>
字符串连接 (concat)
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
var data_one = "World";
var data_two = "Hello"
data_three = data_one.concat(" ",data_two);
document.getElementById('data').innerHTML = data_three;
</script>
</body>
</html>
提取字符串 (charAt)
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
var dataOne = "ABCDEFD"
document.getElementById('data').innerHTML = dataOne.charAt(1);
</script>
</body>
</html>
ID DA FA
length 字符串长度 位置
indexOf 某个字符串首次出现位置
lastIndexOf 某个字符串最后出现位置
slicen(x,y) 提取某个字符串位置 提取
slice(n) 切片
replace() 替换字符串为n 替换
toUpperCase 转换大写 转换
toLowerCase 转换小写
concat() 字符串连接 连接
charAt 提取字符串 提取

JavaScript 事件

2022-04-21

JavaScript 事件是指当前JS发生的事情，如下面的按钮，当点击按钮之后按钮的JavaScript代码将会执行，此时整个执行过程将被称之为JavaScript事件

改变对象内容（innerHTML= Date()）

当按钮被按下时改变 id为“data”标签内的内容

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('data').innerHTML= Date()">显示当前时间</button>
<p id="data"></p>
</body>
</html>

改变自身内容（this.innerHTML）

当点击button后将会改变软件自身内容

1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
<button onclick="this.innerHTML = Date()">显示当前时间</button>
</body>
</html>
ID DA FA
Date() 显示时间
this 改变自身

JavaScript 对象

2022-04-21

在生活中，很多物品都有很多属性，比如一个人，我们来介绍人的时候可以从他的姓名、年龄、身份证（ID）来进行介绍，如下：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
var car = {name:"One",age: '10',id: '1000'};
document.getElementById("data").innerHTML = car.name + "<br>" + car.age + "<br>" + car.id;
</script>
</body>
</html>
ID DA FA
<br> 换行 html

JavaScript 函数

2022-04-21

在JavaScript函数是可执行或被调用时可重复执行的JavaScript函数代码块。

基本格式

1
2
3
funtion functionname() {
    // 函数快
}
多个参数
1
2
3
funtion functionname(参数1,参数2) {
	// 函数块
}

重复执行

1
2
3
4
5
6
7
<button onclick="myFunction('One','Two')">One</button>
<button onclick="myFunction('ONE','TWO')">Two</button>
<script>
    function myFunction(name,job) {
        alert('one ' + name + ' two ' + job);
    }
</script>

JavaScript 简介

2022-04-21

JavaScript，简称“JS”，是一种高级、多范式、解释性的编程语言。并支持面向对象编程，命令式编程以及函数编程，可供用来操控文本数组日期以及正则表达式，但不支持I/O数据流，在WEB中，HTML定义了网页的内容、CSS描述了网页的布局以及效果、JavaScript描述的网页的行为。

基本语句

1
2
3
4
<script>
    function name() {
 		// code    	
}

调用语句

1
2
3
4
5
6
<script>
	function name() {
        // code
    }
</script>
<button type="button" onclick="name()">Click</button>

调用外部JS

1
2
3
4
5
6
<!DOCTYPE HTML>
<html>
    <body>
        <srcipt src="name.js"></srcipt>
    </body>
</html>

Spring security CSRF 跨站请求伪造

2022-04-21

跨站请求伪造（CRSF，Cross-site request forgery）是在Web渗透中较为常见的漏洞之一，被收入在了OWASP TOP 10的荣耀榜单之中，其中简称就是挟持用户在当前已经登录的web站点中执行非本操作的攻击方法。就比如在钟山计算机端口安全联合漏洞共享平台之中所存在的用户认证url下:https://pv.zsun.org.cn/verification?14c4b06b824ec593239362517f538b29=id，在直接请求的时候发现已经被拦截，但是假设一篇文章中带有一个非常特别的图片或按钮，这些无一例外的都将请求该api，则会实现该站点的用户数据批量删除的情况。

CsrfToken

CsrcToken是利用用户的登录状态进行攻击的，而相关记录存储至cookie之中，而CsrfToken的防范思路就是，在每个请求中都进行校验，以防止csrf攻击。具体的实现方法就是与前端相互配合，由系统发放一个csrfToken直，用户携带该CsrfToken由系统完成校验。

在默认的情况下，即Spring security 2.0之后，就会默认开启csrf攻击的防护，我们只需要在前端页面进行相应的配置即可。

myLogin.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>This is spring security world!</title>
</head>
<body>
    <form action="myLogin.html" method="post">
        <!-- 加入隐藏域 -->
        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
        <input type="text" name="username" placeholder="user" /> &nbsp;
        <input type="password" name="password" placeholder="pass" /> &nbsp;
        <input type="submit" value="Login"> &nbsp;
        <label><input type="checkbox" name="remember-me"/>A login</label>
    </form>
</body>
</html>

WebSecurityConfig.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
package com.example.demo.config;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.web.csrf.CookieCsrfTokenRepository;

@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    private UserDetailsService userDetailsService;

    @Override
    protected void configure(HttpSecurity httpSecurity) throws Exception {
        httpSecurity.authorizeRequests()
                .anyRequest().authenticated()
                .and()
            .formLogin()
                .and()
                .csrf().csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());
    }

}
📖 more posts 📖