crossorigin=”anonymous” 跨域属性
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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>你不知道的HTML</title>
</head>
<body>
<!-- crossorigin="anonymous" 是否需要跨域 -->
<img crossorigin="anonymous" src="ok.jpg" />
<script type="text/javascript" charset="utf-8">
// 利用图像测试用户访问网速
var s = Date.now();
var img = new Image();
img.crossorigin = "anonymous";
img.src = 'http://www.xxx.com/ok.png'; // 1*1 3kb
img.onload = function () {
var e = Date.now();
var w = 4 / e - s; // 1-1000
}
</script>
</body>
</html>
|
image 获取用户访问网速 上报埋点数据
1
2
3
4
5
6
7
| // 系统性能监控平台 系统的BUG监控平台 上报数据 页面埋点
var img = new Image();
img.crossorigin = "anonymous";
img.src = 'http://www.xxx.com/ok.git?...';
// GET方式提交的数据最多只能是1024字节
// 不使用Ajax，因为Ajax是具有实时性的，并且超过5个Ajax请求会导致并发的问题产生
// Dom render 时触发 click
|
css 远程攻击漏洞
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
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>css 远程攻击漏洞</title>
<style type="text/css">
.test {
color: expresssion(alert('xss'));
/*可以跨域访问远程执行脚步，例如：外框*/
background: url('javascript:alert('123')');
}
.test::content{
content: url('javascript:alert('123')');
}
</style>
</head>
<body>
<!-- html数量必须控制 -->
<!--
dom元素越多导致网页加载速度越慢
:after
:before
box-shadow
-->
<!-- CSS 依赖 GPU 渲染 -->
</body>
</html>
|
非持久型xss攻击：顾名思义，非持久型xss攻击是一次性的，仅对当次的页面访问产生影响。非持久型xss攻击要求用户访问一个被攻击者篡改后的链接，用户访问该链接时，被植入的攻击脚本被用户游览器执行，从而达到攻击目的。
持久型xss攻击：持久型xss，会把攻击者的数据存储在服务器端，攻击行为将伴随着攻击数据一直存在。
反射型：经过后端，不经过数据库
存储型：经过后端，经过数据库
DOM：不经过后端,DOM—based XSS漏洞是基于文档对象模型Document Objeet Model,DOM的一种漏洞,dom - xss是通过url传入参数去控制触发的。
iframe对远程localStorage扩容
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
30
31
32
33
34
35
36
37
38
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>iframe对远程localStorage扩容</title>
</head>
<body>
<!-- 跨域 JSONP -->
<script src="http://www.xxx.com/a.php"></script>
<script>
const hi = (data) => {
alert(data);
}
</script>
<!-- canvas js to png 代码压缩进图片并实现跨域执行-->
<img src="图片（代码）" alt=""/>
<!-- iframe 通信-->
<!-- 对本服务器的localStorage进行扩容 同域同源策略-->
协议不同
http -> scoect;
端口不同
localhost:80 -> localhost:81;
<!-- document.domain = 'baidu.com' -->
<iframe src="localhost/storage.html" frameborder="0"></iframe>
<script type="text/javascript">
window.framesp[0].postMessage('key', 'val');
</script>
</body>
</html>
|
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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<script>
window.addEventListener('key', (e) => {
if (e.source !== window.parent ) {
return ;
}
localStorage.setItem(e.data.key, e.data.value);
})
</script>
</body>
</html>
|
HTML语义化
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HTML语义化</title>
<link rel="stylesheet" href="">
</head>
<body>
<<label for="id"><input type="" name="" value=""></label>
<ol>
<li></li>
</ol>
<dl>
<dt></dt>
<dd></dd>
</dl>
<ul>
<li></li>
</ul>
<table>
<thead>
</thead>
<tbody>
</tbody>
<tfooter>
</tfooter>
</table>
<!-- 侧重使用H5语义化标签 html5.js-->
<header>
<nav></nav>
</header>
<article>
<hgroup>
<h1></h1>
</hgroup>
<section>
</section>
<aside>
</aside>
</article>
<footer>
<address></address>
</footer>
</body>
</html>
|
任何值得做的事就值得把它做好。- Whatever is worth doing is worth doing well.
