-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
739 lines (480 loc) · 55 KB
/
index.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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hijimo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta property="og:type" content="website">
<meta property="og:title" content="hijimo">
<meta property="og:url" content="http://hijimo.github.io/index.html">
<meta property="og:site_name" content="hijimo">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="hijimo">
<link rel="alternate" href="/atom.xml" title="hijimo" type="application/atom+xml">
<link rel="icon" href="/favicon.png">
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div id="container">
<div id="wrap">
<header id="header">
<div id="banner"></div>
<div id="header-outer" class="outer">
<div id="header-title" class="inner">
<h1 id="logo-wrap">
<a href="/" id="logo">hijimo</a>
</h1>
</div>
<div id="header-inner" class="inner">
<nav id="main-nav">
<a id="main-nav-toggle" class="nav-icon"></a>
<a class="main-nav-link" href="/">Home</a>
<a class="main-nav-link" href="/archives">Archives</a>
</nav>
<nav id="sub-nav">
<a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
<a id="nav-search-btn" class="nav-icon" title="Search"></a>
</nav>
<div id="search-form-wrap">
<form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit"></button><input type="hidden" name="sitesearch" value="http://hijimo.github.io"></form>
</div>
</div>
</div>
</header>
<div class="outer">
<section id="main">
<article id="post-headers头和文件下载" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2019/03/03/headers头和文件下载/" class="article-date">
<time datetime="2019-03-03T06:25:00.000Z" itemprop="datePublished">2019-03-03</time>
</a>
<div class="article-category">
<a class="article-category-link" href="/categories/前端/">前端</a>
</div>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/03/03/headers头和文件下载/">headers头和文件下载</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="Content-Disposition"><a href="#Content-Disposition" class="headerlink" title="Content-Disposition"></a>Content-Disposition</h3><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Disposition" target="_blank" rel="noopener">Content-Disposition</a> 息头指示回复的内容该以何种形式展示，是以<strong>内联</strong>的形式（即网页或者页面的一部分），还是以<strong>附件</strong>的形式下载并保存到本地。</p>
<blockquote>
<p><code>Content-Disposition</code>只会影响部分 <code>href</code>、和地址栏直接输入结果等，直接在<code>img.src</code>中使用并不会下载文件。</p>
</blockquote>
<p> 举个简单的例子。先准备两个图片<code>wm.png</code>、<code>wm2.png</code>, 并设置下载与内联<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">// nodejs code</span><br><span class="line">setHeaders: function(res, path, stats) {</span><br><span class="line"> if (path.includes("static/image/wm.png")) {</span><br><span class="line"> res.setHeader("Content-Disposition", "attachment;filename='hanmeimei.png'");</span><br><span class="line"> } else if (path.includes("static/image/wm2.png")) {</span><br><span class="line"> res.setHeader("Content-Disposition", "inline");</span><br><span class="line"> }</span><br><span class="line"> }</span><br></pre></td></tr></table></figure></p>
<p> 写一段简单的html代码去加载它们。<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">// html code</span><br><span class="line"> <a href="static/image/wm.png" target="_blank">下载图片1</a></span><br><span class="line"> <a href="static/image/wm2.png" target="_blank"></span><br><span class="line"> 打开一个新的窗口，窗口里显示图片2</a></span><br><span class="line"><h1>图片1</h1></span><br><span class="line"><img src="static/image/wm.png" alt="" /></span><br><span class="line"><h2>图片2</h2></span><br><span class="line"><img src="static/image/wm2.png" alt="" /></span><br></pre></td></tr></table></figure></p>
<p> 再测试一下脚 本。<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"> // img ,会直接显示图片</span><br><span class="line"> let c = new Image();</span><br><span class="line"> c.src = "static/image/wm.png";</span><br><span class="line"> document.body.appendChild(c);</span><br><span class="line"></span><br><span class="line"> // 下载文件wm.png</span><br><span class="line"> window.location.href = "static/image/wm.png";</span><br><span class="line"> // 不会下载， 会内联显示</span><br><span class="line"> window.location.href = "static/image/wm2.png";</span><br><span class="line"> </script></span><br></pre></td></tr></table></figure></p>
</div>
<footer class="article-footer">
<a data-url="http://hijimo.github.io/2019/03/03/headers头和文件下载/" data-id="cjsu13c7h000ard3gq64negzk" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li></ul>
</footer>
</div>
</article>
<article id="post-webpack4.0-简易webpack实现" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2019/03/01/webpack4.0-简易webpack实现/" class="article-date">
<time datetime="2019-03-01T06:25:00.000Z" itemprop="datePublished">2019-03-01</time>
</a>
<div class="article-category">
<a class="article-category-link" href="/categories/前端/">前端</a>
</div>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/03/01/webpack4.0-简易webpack实现/">webpack4.0之简易webpack实现</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p><a href="!https://github.com/hijimo/easywebpack/">完整代码</a></p>
<h3 id="一个简单的webpack结果模版"><a href="#一个简单的webpack结果模版" class="headerlink" title="一个简单的webpack结果模版"></a>一个简单的webpack结果模版</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line">(function(modules) {</span><br><span class="line"> var installedModules = {};</span><br><span class="line"> </span><br><span class="line"> function __webpack_require__(moduleId) {</span><br><span class="line"> if (installedModules[moduleId]) {</span><br><span class="line"> return installedModules[moduleId].exports;</span><br><span class="line"> }</span><br><span class="line"> var module = (installedModules[moduleId] = {</span><br><span class="line"> i: moduleId,</span><br><span class="line"> l: false,</span><br><span class="line"> exports: {}</span><br><span class="line"> });</span><br><span class="line"> modules[moduleId].call(</span><br><span class="line"> module.exports,</span><br><span class="line"> module,</span><br><span class="line"> module.exports,</span><br><span class="line"> __webpack_require__</span><br><span class="line"> );</span><br><span class="line"> </span><br><span class="line"> module.l = true;</span><br><span class="line"> </span><br><span class="line"> return module.exports;</span><br><span class="line"> }</span><br><span class="line"> __webpack_require__.d = function(exports, name, getter) {</span><br><span class="line"> if (!__webpack_require__.o(exports, name)) {</span><br><span class="line"> Object.defineProperty(exports, name, { enumerable: true, get: getter });</span><br><span class="line"> }</span><br><span class="line"> };</span><br><span class="line"> __webpack_require__.r = function(exports) {</span><br><span class="line"> if (typeof Symbol !== "undefined" && Symbol.toStringTag) {</span><br><span class="line"> Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });</span><br><span class="line"> }</span><br><span class="line"> Object.defineProperty(exports, "__esModule", { value: true });</span><br><span class="line"> };</span><br><span class="line"> __webpack_require__.o = function(object, property) {</span><br><span class="line"> return Object.prototype.hasOwnProperty.call(object, property);</span><br><span class="line"> };</span><br><span class="line"> return __webpack_require__((__webpack_require__.s = "<%- entryId%>"));</span><br><span class="line"> })({</span><br><span class="line"> <% for (let moduleName in modules) {%></span><br><span class="line"> "<%- moduleName%>": function(module, __webpack_exports__, __webpack_require__) {</span><br><span class="line"> "use strict";</span><br><span class="line"> eval(</span><br><span class="line"> `<%-modules[moduleName]%>`</span><br><span class="line"> );</span><br><span class="line"> },</span><br><span class="line"> <% }%></span><br><span class="line"> </span><br><span class="line"> });</span><br></pre></td></tr></table></figure>
<p class="article-more-link">
<a href="/2019/03/01/webpack4.0-简易webpack实现/#more">Read More</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://hijimo.github.io/2019/03/01/webpack4.0-简易webpack实现/" data-id="cjsu13c88001qrd3gd9d8cy5h" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li></ul>
</footer>
</div>
</article>
<article id="post-webpack4.0-插件" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2019/02/25/webpack4.0-插件/" class="article-date">
<time datetime="2019-02-25T06:25:00.000Z" itemprop="datePublished">2019-02-25</time>
</a>
<div class="article-category">
<a class="article-category-link" href="/categories/前端/">前端</a>
</div>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/02/25/webpack4.0-插件/">webpack4.0之插件</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="插件"><a href="#插件" class="headerlink" title="插件"></a>插件</h3><p>插件是<code>webpack</code>最重要的机制之一，默认情况下<code>webpck</code>做的是 模块加载、依赖分析、文件输出等基本工作。大部分的功能都需要使用插件来实现。<br>如果需要实压缩css代码，那就需要使用 <code>MiniCssExtractPlugin</code> 插件<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">new MiniCssExtractPlugin({</span><br><span class="line"> filename: "css/[name].[hash:8].css"</span><br><span class="line"> }),</span><br></pre></td></tr></table></figure></p>
<p>如果需要使用<code>html</code>模块，那就需要使用<code>HtmlWebpackPlugin</code>插件<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">new HtmlWebpackPlugin({</span><br><span class="line"> filename: 'index.html',</span><br><span class="line"> template: './index.html',</span><br><span class="line"> })</span><br></pre></td></tr></table></figure></p>
<!---->
<h3 id="插件的基本使用"><a href="#插件的基本使用" class="headerlink" title="插件的基本使用"></a>插件的基本使用</h3>
<p class="article-more-link">
<a href="/2019/02/25/webpack4.0-插件/#more">Read More</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://hijimo.github.io/2019/02/25/webpack4.0-插件/" data-id="cjsu13c8d001zrd3gsoot883b" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li></ul>
</footer>
</div>
</article>
<article id="post-webpack4.0--tapable" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2019/02/24/webpack4.0--tapable/" class="article-date">
<time datetime="2019-02-24T06:25:00.000Z" itemprop="datePublished">2019-02-24</time>
</a>
<div class="article-category">
<a class="article-category-link" href="/categories/前端/">前端</a>
</div>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/02/24/webpack4.0--tapable/">webpack4.0之tapable</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="tapable"><a href="#tapable" class="headerlink" title="tapable"></a>tapable</h3><p><code>tapable</code>是一个钩子注册、调用库。tapable包暴露了许多Hook类，可用于为插件创建钩子。基本使用如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">let { SyncHook } = require('tapable')</span><br><span class="line"></span><br><span class="line">let hook = new SyncHook(['name'])</span><br><span class="line">// 注册一个钩子</span><br><span class="line">hook.tap('test', function(name) {</span><br><span class="line"> console.log('the test hook', name)</span><br><span class="line">})</span><br><span class="line">//在合适的时机调用</span><br><span class="line">hook.call('call hook test')</span><br></pre></td></tr></table></figure>
<p><code>webpack</code> 本身自带的功能比较少，像模块加载、依赖解析等。大部分功能都需要使用插件或者<code>loader</code>去实现。<code>webpack</code>就是使用<code>tapable</code> 来实现插件机制的。<br>
<p class="article-more-link">
<a href="/2019/02/24/webpack4.0--tapable/#more">Read More</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://hijimo.github.io/2019/02/24/webpack4.0--tapable/" data-id="cjsu13c8c001wrd3g5uk6qvw0" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li></ul>
</footer>
</div>
</article>
<article id="post-webpack4.0--loader" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2019/02/22/webpack4.0--loader/" class="article-date">
<time datetime="2019-02-22T06:25:00.000Z" itemprop="datePublished">2019-02-22</time>
</a>
<div class="article-category">
<a class="article-category-link" href="/categories/前端/">前端</a>
</div>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/02/22/webpack4.0--loader/">webpack4.0之loader</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="loader"><a href="#loader" class="headerlink" title="loader"></a>loader</h3><p>在默认情况下，webpack只支持<code>.js</code>的加载。如果要处理其他类型的文件模块，需要自行实现<code>loader</code>或者使用第三方实现。<br>大体来讲， <code>loader</code> 可以说成是一个在 <code>requeire</code> 读取到内容之后执行的一个钩子函数。期间，<code>webpack</code>会把文件内容传给该函数，最后函数还需要将其返回，则否会报错。如下(真实例子看文末)：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">function loader(source) {</span><br><span class="line"> // to do</span><br><span class="line"> return source</span><br><span class="line">}</span><br><span class="line">module.exports = loader</span><br></pre></td></tr></table></figure></p>
<p class="article-more-link">
<a href="/2019/02/22/webpack4.0--loader/#more">Read More</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://hijimo.github.io/2019/02/22/webpack4.0--loader/" data-id="cjsu13c87001nrd3g30712nb5" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li></ul>
</footer>
</div>
</article>
<article id="post-webpack4.0-基础使用" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2019/02/20/webpack4.0-基础使用/" class="article-date">
<time datetime="2019-02-20T06:25:00.000Z" itemprop="datePublished">2019-02-20</time>
</a>
<div class="article-category">
<a class="article-category-link" href="/categories/前端/">前端</a>
</div>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/02/20/webpack4.0-基础使用/">复习--webpack4.0基础使用</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>###webpack简述<br><code>webpack</code>是目前最流行的模块管理器，是前端构建体系中不可或缺的一环。</p>
<p>如果用一句话概括的话，<code>webpack</code>本身只做了一件事件：运行一个入口<code>.js</code>文件，分析它的依赖，最后把文件导出。如果你需要在这个过程中做点其他什么事情，请使用<code>webpack</code>的强大插件机制。</p>
<h3 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h3><p>第一步，初始化文件夹<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn init -y</span><br></pre></td></tr></table></figure></p>
<p class="article-more-link">
<a href="/2019/02/20/webpack4.0-基础使用/#more">Read More</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://hijimo.github.io/2019/02/20/webpack4.0-基础使用/" data-id="cjsu13c8g0022rd3gwj6r8o6v" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li></ul>
</footer>
</div>
</article>
<article id="post-复习__vuejs源码阅读3" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2019/02/19/复习__vuejs源码阅读3/" class="article-date">
<time datetime="2019-02-19T06:25:00.000Z" itemprop="datePublished">2019-02-19</time>
</a>
<div class="article-category">
<a class="article-category-link" href="/categories/前端/">前端</a>
</div>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/02/19/复习__vuejs源码阅读3/">复习--Vuejs源码阅读3</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p>前面两部分看完了vuejs类的实现、vuejs的初始化，现在看第三部分，也是vuejs的另一个重点，模版解析(ast、render)</p>
<h3 id="mount方法"><a href="#mount方法" class="headerlink" title="$mount方法"></a>$mount方法</h3><p><code>vuejs</code>使用虚拟dom的方式更新ui，虚拟dom最大的一个好处是可以适应不同的平台，只要改变渲染代码就可适配到其他平台。<code>vuejs</code>实现了<code>weex</code>和浏览器上的 <code>$mount</code>,这里只看浏览器上的实现。看生命周期，在<code>init</code>完成时已经触发了<code>beforeCreate</code>、<code>created</code>生命周期钩子。<br><code>mountComponent</code>函数一开始就将<code>el</code>赋值给<code>$el</code>然后触发第三个生期周期<code>beforeMount</code>,这里有一个小细节，如果用户没有实现render函数，<code>vuejs</code>会用<code>createEmptyVNode</code>代替。<br>
<p class="article-more-link">
<a href="/2019/02/19/复习__vuejs源码阅读3/#more">Read More</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://hijimo.github.io/2019/02/19/复习__vuejs源码阅读3/" data-id="cjsu13c9h0046rd3gsdkmn5hm" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li></ul>
</footer>
</div>
</article>
<article id="post-复习__vuejs源码阅读2" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2019/02/16/复习__vuejs源码阅读2/" class="article-date">
<time datetime="2019-02-16T06:25:00.000Z" itemprop="datePublished">2019-02-16</time>
</a>
<div class="article-category">
<a class="article-category-link" href="/categories/前端/">前端</a>
</div>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/02/16/复习__vuejs源码阅读2/">复习--Vuejs源码阅读2</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p>part2主要是vuejs从 <code>new Vue(options)</code> 到渲染到页面之一部分的内容。</p>
<h3 id="从init开始"><a href="#从init开始" class="headerlink" title="从init开始"></a>从init开始</h3><p><code>Vue</code> 构建函数很简单，就是一个 <code>this._init</code>,来看<code>_init</code>函数。对于<code>root</code>节点和<code>component</code>节点vuejs作了不同的处理。从关键代码一步步来看</p>
<ol>
<li>resolveConstructorOptions函数继承<code>super</code>的<code>options</code></li>
<li>mergeOptions标准化选项并合并<code>options</code></li>
<li>init生命周期</li>
<li>init自定义(vuejs)事件</li>
<li>init provide/inject</li>
<li>initState
<p class="article-more-link">
<a href="/2019/02/16/复习__vuejs源码阅读2/#more">Read More</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://hijimo.github.io/2019/02/16/复习__vuejs源码阅读2/" data-id="cjsu13c9k004drd3g4sfrviu4" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li></ul>
</footer>
</div>
</article>
<article id="post-复习--Vuejs源码阅读" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2019/02/12/复习--Vuejs源码阅读/" class="article-date">
<time datetime="2019-02-12T06:25:00.000Z" itemprop="datePublished">2019-02-12</time>
</a>
<div class="article-category">
<a class="article-category-link" href="/categories/前端/">前端</a>
</div>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/02/12/复习--Vuejs源码阅读/">复习--Vuejs源码阅读</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p>时隔三年重温vuejs码源，三年前看的1.0版本，这次看的 <code>2.6.0 bate2</code> 版。vuejs的源码写得非常漂亮，浅显易懂、语义清晰，就算基础不深也能无障碍阅读下去。新版的vuejs引入了<code>flow</code>，算是一个强类型的限制，所以写法上较于原生es5、es6有一定区别。</p>
<h3 id="入口"><a href="#入口" class="headerlink" title="入口"></a>入口</h3><p>vuejs的代码数量不算多，也不能无头苍蝇的乱读,我个人喜欢按着执行顺序慢慢读下来。 <code>core</code> 文件夹是vuejs核心源码所在，首先看 <code>core/instance/index.js</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">import { initMixin } from './init'</span><br><span class="line">import { stateMixin } from './state'</span><br><span class="line">import { renderMixin } from './render'</span><br><span class="line">import { eventsMixin } from './events'</span><br><span class="line">import { lifecycleMixin } from './lifecycle'</span><br><span class="line">import { warn } from '../util/index'</span><br><span class="line"></span><br><span class="line">function Vue (options) {</span><br><span class="line"> if (process.env.NODE_ENV !== 'production' &&</span><br><span class="line"> !(this instanceof Vue)</span><br><span class="line"> ) {</span><br><span class="line"> warn('Vue is a constructor and should be called with the `new` keyword')</span><br><span class="line"> }</span><br><span class="line"> this._init(options)</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">initMixin(Vue)</span><br><span class="line">stateMixin(Vue)</span><br><span class="line">eventsMixin(Vue)</span><br><span class="line">lifecycleMixin(Vue)</span><br><span class="line">renderMixin(Vue)</span><br><span class="line"></span><br><span class="line">export default Vue</span><br></pre></td></tr></table></figure>
<p>这是 <code>Vue</code> 函数的定义文件，可以看到 <code>Vue</code> 采用的是构建一个小巧的构造函数，然后再扩展 <code>prototype</code> 、静态属性的方式。现在一个个来看这些函数，首先是 <code>initMixin</code>:<br>
<p class="article-more-link">
<a href="/2019/02/12/复习--Vuejs源码阅读/#more">Read More</a>
</p>
</div>
<footer class="article-footer">
<a data-url="http://hijimo.github.io/2019/02/12/复习--Vuejs源码阅读/" data-id="cjsu13c9d003wrd3gtxhni6x2" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li></ul>
</footer>
</div>
</article>
<article id="post-复习--web安全基础" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2019/01/25/复习--web安全基础/" class="article-date">
<time datetime="2019-01-25T06:25:00.000Z" itemprop="datePublished">2019-01-25</time>
</a>
<div class="article-category">
<a class="article-category-link" href="/categories/前端/">前端</a>
</div>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/01/25/复习--web安全基础/">复习--web安全基础</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="CSP"><a href="#CSP" class="headerlink" title="CSP"></a>CSP</h3><p>内容安全策略（Content Security Policy），用于检测并削弱某些特定类型的攻击，包括跨站脚本 (XSS) 和数据注入攻击等。CSP通过指定有效域（或者说白名单）使开发者有能力减少或消除XSS攻击所依懒的载体（XSS 攻击利用了浏览器对于从服务器所获取的内容的信任。恶意脚本在受害者的浏览器中得以运行，因为浏览器信任其内容来源，即使有的时候这些脚本并非来自于它本该来的地方）。另外<strong> CSP也可以限制只使用HTTPS的内容</strong>。<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP" target="_blank" rel="noopener">mdn上的CSP</a>、<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy__by_cnvoid" target="_blank" rel="noopener">CSP策略列表</a>。</p>
<h5 id="通过mate方式使用CSP"><a href="#通过mate方式使用CSP" class="headerlink" title="通过mate方式使用CSP"></a>通过mate方式使用CSP</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"Content-Security-Policy"</span> <span class="attr">content</span>=<span class="string">"default-src 'self'; img-src https://*; child-src 'none';"</span>></span></span><br></pre></td></tr></table></figure>
<h5 id="通过-header头方式使用CSP"><a href="#通过-header头方式使用CSP" class="headerlink" title="通过 header头方式使用CSP"></a>通过 header头方式使用CSP</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Content-Security-Policy: default-src https://onlinebanking.jumbobank.com</span><br></pre></td></tr></table></figure>
<h5 id="CSP测试模式"><a href="#CSP测试模式" class="headerlink" title="CSP测试模式"></a>CSP测试模式</h5><p>CSP是个大杀器，贸然使用可能会导致页面不可用或者其他问题。使用测试模式只报告错误不阻止内容，收集受影响的页面不失是一个比较好的解决方案。<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only" target="_blank" rel="noopener">详见</a></p>
<h3 id="HPKP"><a href="#HPKP" class="headerlink" title="HPKP"></a>HPKP</h3><p>Http公钥锁定（HTTP Public Key Pinning），通过向header头添加标识 <code>Public-Key-Pins</code> 通知浏览器将公钥缓存在浏览器端一段时间。若期间内发生了中间人攻击，浏览器发现伪装的证书和本地缓存的证书不匹配，则发出警告，警示用户。</p>
<p>需要注意的是该缓存是强缓存，缓存期间如果服务器更换了密钥，网站将无法正常访问。现有的解决方案是在配置 <code>Public-Key-Pins</code> 的时候 配置一个备用的公钥</p>
<h5 id="启用HPKP"><a href="#启用HPKP" class="headerlink" title="启用HPKP"></a>启用HPKP</h5><p><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Public_Key_Pinning" target="_blank" rel="noopener">详见</a><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Public-Key-Pins: pin-sha256="base64=="; max-age=expireTime [; includeSubDomains][; report-uri="reportURI"]</span><br></pre></td></tr></table></figure></p>
<h3 id="HSTS"><a href="#HSTS" class="headerlink" title="HSTS"></a>HSTS</h3><p>HTTP严格安全传输(HTTP Strict Transport Security ), 通过向header头添加标识 <code>Strict-Transport-Security</code>通知浏览器在未来的一段时间内强制使用HTTPS访问服务器。需要注意的是，<strong>如果浏览器没有使用HTTPS访问过服务器或者缓存已过期，标识 <code>Strict-Transport-Security</code> 将会被忽略。</strong>这是因为攻击者可能会拦截HTTP连接并注入标头或将其删除。</p>
<p>Google维护着一个<a href="https://hstspreload.appspot.com/" target="_blank" rel="noopener">HSTS预加载服务</a>。通过遵循指南并成功提交您的域名，浏览器将永远不会使用不安全的连接连接到您的域。虽然该服务由Google托管，但所有浏览器都声明有意使用（或实际开始使用）预加载列表。但是，它不是HSTS规范的一部分，不应被视为官方规范。</p>
<p>现在，你的服务器总是会以HTTPS访问了。</p>
<h5 id="使用HSTS"><a href="#使用HSTS" class="headerlink" title="使用HSTS"></a>使用HSTS</h5><p><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security" target="_blank" rel="noopener">详见</a><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Strict-Transport-Security: max-age=31536000; includeSubDomains</span><br></pre></td></tr></table></figure></p>
<h3 id="Cookie-安全"><a href="#Cookie-安全" class="headerlink" title="Cookie 安全"></a>Cookie 安全</h3><p>一个HTTP cookie的（网络Cookie，浏览器cookie）是一小片数据的一个服务器发送到用户的网络浏览器。浏览器可以存储它并将其与下一个请求一起发送回同一服务器。通常情况下，它用于判断两个请求是否来自同一个浏览器 - 例如，保持用户登录。它记住无状态 HTTP协议的有状态信息。</p>
<p>基于这个特性，Cookie可以说是攻击者们最惦记着的目标了。</p>
<h5 id="HttpOnly"><a href="#HttpOnly" class="headerlink" title="HttpOnly"></a>HttpOnly</h5><p>给Header头加上 <code>HttpOnly</code> 标识，可以很好的防止跨站点脚本（XSS）攻击。某项 Cookie 添加了 <code>HttpOnly</code> 之后，Javascript 无法通过 Document.cookie 访问到它，它们只会被发送到服务器。<br>可以通过chrome dev tools 的Application选项卡下的Cookies 列表看到是否是HttpOnly</p>
<h5 id="Secure"><a href="#Secure" class="headerlink" title="Secure"></a>Secure</h5><p>给Header头加上 <code>Secure</code> 标识，cookie仅会在使用了https协议的时候才会被发送回服务器。<br>可以通过chrome dev tools 的Application选项卡下的Cookies 列表看到是否是 Secure</p>
<h5 id="举个例子"><a href="#举个例子" class="headerlink" title="举个例子"></a>举个例子</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly</span><br></pre></td></tr></table></figure>
<h3 id="X-Content-Type-Options"><a href="#X-Content-Type-Options" class="headerlink" title="X-Content-Type-Options"></a>X-Content-Type-Options</h3><p>给Header头加上 <code>X-Content-Type-Options</code> 标识，可以阻止内容：</p>
<ol>
<li>请求的类型为 <code>style</code> 并且MIME类型不是 <code>text/css</code></li>
<li>请求的类型为 <code>script</code> 并且MIME类型不是JavaScript MIME类型</li>
</ol>
<h3 id="X-Frame-Options"><a href="#X-Frame-Options" class="headerlink" title="X-Frame-Options"></a>X-Frame-Options</h3><p>给Header头加上 <code>X-Content-Type-Options</code> 标识，可以指示允许一个页面可否在 <embed>,<iframe> 或者 <object> 中展现。这可以有效的防止点击劫持 (clickjacking) 的攻击。</object></iframe></p>
<p>X-Frame-Options 有三个值:<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/X-Frame-Options" target="_blank" rel="noopener">详见</a></p>
<ol>
<li><code>DENY</code> 表示该页面不允许在 frame 中展示，即便是在相同域名的页面中嵌套也不允许。</li>
<li><code>SAMEORIGIN</code> 表示该页面可以在相同域名页面的 frame 中展示。</li>
<li><code>ALLOW-FROM uri</code> 表示该页面可以在指定来源的 frame 中展示。</li>
</ol>
<h3 id="X-XSS-Protection-这是一个过时标识"><a href="#X-XSS-Protection-这是一个过时标识" class="headerlink" title="X-XSS-Protection(这是一个过时标识)"></a>X-XSS-Protection(这是一个过时标识)</h3><p>HTTP <code>X-XSS-Protection</code> 响应头是Internet Explorer，Chrome和Safari的一个功能，当检测到跨站脚本攻击 (XSS)时，浏览器将停止加载页面。当网站实施一个强大的<code>Content-Security-Policy</code>来禁用内联的JavaScript (‘unsafe-inline’)时, 他们仍然可以为尚不支持 CSP 的旧版浏览器的用户提供保护。</p>
<p><code>X-XSS-Protection</code> 支持以下值：</p>
<ol>
<li><code>0</code> 禁止XSS过滤。</li>
<li><code>1</code> 启用XSS过滤（通常浏览器是默认的）。 如果检测到跨站脚本攻击，浏览器将清除页面（删除不安全的部分）。</li>
<li><code>1;mode=block</code> 启用XSS过滤。 如果检测到攻击，浏览器将不会清除页面，而是阻止页面加载。</li>
<li><code>1; report=<reporting-URI> (Chromium only</code> 启用XSS过滤。 如果检测到跨站脚本攻击，浏览器将清除页面并使用CSP report-uri指令的功能发送违规报告。</li>
</ol>
<h3 id="点击劫持攻击"><a href="#点击劫持攻击" class="headerlink" title="点击劫持攻击"></a>点击劫持攻击</h3><p>点击劫持是一种恶意技术，它诱使用户点击与用户感知的内容不同的内容，从而可能泄露机密信息或允许其他人控制其计算机同时点击看似无害的对象。</p>
<p>举个例子，小王点击了某盗版影视网站的播放按钮，实际上却是偷偷的给淘宝购物车下了单。</p>
<h3 id="CSRF-XSRF-跨站请求伪造攻击"><a href="#CSRF-XSRF-跨站请求伪造攻击" class="headerlink" title="CSRF/XSRF 跨站请求伪造攻击"></a>CSRF/XSRF 跨站请求伪造攻击</h3><p>跨站请求伪造(Cross-site_request_forgery)是一种欺骗受害者提交恶意请求的攻击。它继承了受害者的身份和特权，代表受害者履行不受欢迎的职能。对于大多数站点，浏览器请求自动包括与站点关联的任何凭据。</p>
<p>CSRF攻击的基本原理是：</p>
<ol>
<li>你登录了某网站，如bilibili.</li>
<li>在你访问恶意网站时，恶意网站针对性的向bilibili发起请求，比如关注我（bilibili已作了csrf防御）。</li>
<li>此时，虽然恶意网站看不到bilibili的cookie，但是cookie会被附加到请求Header头里。就成功欺骗了服务器用你的登录身份关注了我</li>
<li>你看到之篇文章的时候，你的bilibili已经被偷偷的登出了。<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><img src="https://account.bilibili.com/login?act=exit"></span><br></pre></td></tr></table></figure>
</li>
</ol>
<p><img src="https://account.bilibili.com/login?act=exit" alt="bililoginout"></p>
<ol>
<li>或者偷偷修改了一些信息。（bilibili作了csrf防御，所以以下行为不会生效。）<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">iframe</span> <span class="attr">name</span>=<span class="string">"badboy"</span> <span class="attr">display</span>=<span class="string">"none"</span> <span class="attr">src</span>=<span class="string">"https://janusdemo.3mm.me/bilibili_iframe.html"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">iframe</span>></span></span><br></pre></td></tr></table></figure>
</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><body></span><br><span class="line"> <form method="POST" id ="bilibili" name="transfer" action="https://api.bilibili.com/x/member/web/update"></span><br><span class="line"> <input type="hidden" name="uname" value="你们"></span><br><span class="line"> <input type="hidden" name="usersign" value="偷偷的来"></span><br><span class="line"> <input type="hidden" name="sex" value="保密"></span><br><span class="line"> <input type="hidden" name="birthday" value="1900-1-1"></span><br><span class="line"> <input type="hidden" name="csrf" value="024e772a01f7931072dd671808e2ff52"></span><br><span class="line"> </form></span><br><span class="line"> <script></span><br><span class="line"> document.forms.bilibili.submit()</span><br><span class="line"> </script></span><br><span class="line"></body></span><br></pre></td></tr></table></figure>
<h5 id="如何防御CSRF"><a href="#如何防御CSRF" class="headerlink" title="如何防御CSRF"></a>如何防御CSRF</h5><ol>
<li>上OPT或者验证码，由于csrf攻击者拿不到验证码，发起的请求会被拒绝，但是用户体验极差。</li>
<li>使用随机令牌，用户登录时向用户推送一个csrf随机码，这个码随着用户登录过期而过期，在每一次请求的时候偷偷带上这个码。每个请求服务器都会验证 个码，验证失败拒绝请求。由于csrf无法读取用户cookie，所以这个方式是目前主流的防csrf攻击的方案</li>
<li>refer识别, 限制白名单之外的来源。</li>
</ol>
<h3 id="XSS"><a href="#XSS" class="headerlink" title="XSS"></a>XSS</h3><p>跨站脚本攻击Cross-site scripting是一种安全漏洞，攻击者可以利用这种漏洞在网站上注入恶意的客户端代码。<br>简单来说就是攻击者利用各种方式向你的网站注入非法脚本，以达到网站不可用、盗取信息、广告注入等目的。<br><a href="https://www.owasp.org/index.php/Cross-site_Scripting_(XSS" target="_blank" rel="noopener">详见</a>)</p>
<h5 id="常见的攻击方式"><a href="#常见的攻击方式" class="headerlink" title="常见的攻击方式"></a>常见的攻击方式</h5><ol>
<li>网络运营商向非https网站注入脚本，往往大多都是广告 ，常常也会预期外的对网站造成破坏，使得网站不可用。</li>
<li>攻击者利用网站内部漏洞，比如src、href、Event、form表单等提交非法脚本完成攻击。</li>
</ol>
<h5 id="防御方式"><a href="#防御方式" class="headerlink" title="防御方式"></a>防御方式</h5><ol>
<li>升级HTTPS，HTTPS可以有效的防止数据被修改</li>
<li>使用 HttpOnly、CSP和上述其他安全机制。</li>
<li>后端对前台提交的数据进行清理，比如<a href="https://www.owasp.org/index.php/OWASP_Java_Encoder_Project" target="_blank" rel="noopener">库</a></li>
<li>前端对不受信任的数据进行html、JavaScript、css转义</li>
<li>不要在 css、script、html中插入不受信任的数据。</li>
<li>对URL进行转义</li>
<li>不要使用外链。或者安全白名单之外的域名。</li>
</ol>
</div>
<footer class="article-footer">
<a data-url="http://hijimo.github.io/2019/01/25/复习--web安全基础/" data-id="cjsu13c9a003prd3gy0ykcdsz" class="article-share-link">Share</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li></ul>
</footer>
</div>
</article>
<nav id="page-nav">
<span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><span class="space">…</span><a class="page-number" href="/page/6/">6</a><a class="extend next" rel="next" href="/page/2/">Next »</a>
</nav>
</section>
<aside id="sidebar">
<div class="widget-wrap">
<h3 class="widget-title">Categories</h3>
<div class="widget">
<ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/前端/">前端</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/前端优化/">前端优化</a></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">Tags</h3>
<div class="widget">
<ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/composite/">composite</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/css/">css</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/cssom/">cssom</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/dom/">dom</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/javascript/">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webRTC/">webRTC</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/分析/">分析</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/前端/">前端</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/前端优化/">前端优化</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/压缩/">压缩</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/图片/">图片</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/帧/">帧</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/性能/">性能</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/渲染/">渲染</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/移动/">移动</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/缓存/">缓存</a></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">Tag Cloud</h3>
<div class="widget tagcloud">
<a href="/tags/composite/" style="font-size: 10px;">composite</a> <a href="/tags/css/" style="font-size: 12px;">css</a> <a href="/tags/cssom/" style="font-size: 10px;">cssom</a> <a href="/tags/dom/" style="font-size: 10px;">dom</a> <a href="/tags/javascript/" style="font-size: 12px;">javascript</a> <a href="/tags/webRTC/" style="font-size: 14px;">webRTC</a> <a href="/tags/分析/" style="font-size: 10px;">分析</a> <a href="/tags/前端/" style="font-size: 20px;">前端</a> <a href="/tags/前端优化/" style="font-size: 18px;">前端优化</a> <a href="/tags/压缩/" style="font-size: 10px;">压缩</a> <a href="/tags/图片/" style="font-size: 10px;">图片</a> <a href="/tags/帧/" style="font-size: 10px;">帧</a> <a href="/tags/性能/" style="font-size: 12px;">性能</a> <a href="/tags/渲染/" style="font-size: 16px;">渲染</a> <a href="/tags/移动/" style="font-size: 10px;">移动</a> <a href="/tags/缓存/" style="font-size: 10px;">缓存</a>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">Archives</h3>
<div class="widget">
<ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/03/">March 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/02/">February 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/01/">January 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/10/">October 2018</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/09/">September 2018</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/05/">May 2018</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/03/">March 2018</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/06/">June 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/08/">August 2015</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/03/">March 2015</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/02/">February 2015</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/07/">July 2014</a></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">Recent Posts</h3>
<div class="widget">
<ul>
<li>
<a href="/2019/03/03/headers头和文件下载/">headers头和文件下载</a>
</li>
<li>
<a href="/2019/03/01/webpack4.0-简易webpack实现/">webpack4.0之简易webpack实现</a>
</li>
<li>
<a href="/2019/02/25/webpack4.0-插件/">webpack4.0之插件</a>
</li>
<li>
<a href="/2019/02/24/webpack4.0--tapable/">webpack4.0之tapable</a>
</li>
<li>
<a href="/2019/02/22/webpack4.0--loader/">webpack4.0之loader</a>
</li>
</ul>
</div>
</div>
</aside>
</div>
<footer id="footer">
<div class="outer">
<div id="footer-info" class="inner">
© 2019 山民<br>
Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
</div>
</div>
</footer>
</div>
<nav id="mobile-nav">
<a href="/" class="mobile-nav-link">Home</a>
<a href="/archives" class="mobile-nav-link">Archives</a>
</nav>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script src="/js/script.js"></script>
</div>
</body>
</html>