代码安全&网络攻击与防御
主要内容
1.【代码安全】如何阻止用户查看源码（提高用户查看源码门槛）
2.【网络攻击与防御】前端安全问题
3.【网络攻击与防御】可能引起安全的问题的API
如何"阻止"用户查看源码
只能做到提高用户查看前端代码的门槛，不可能做到完全阻止用户查看代码，只能从尽量“妨碍”用户操作和用户调试代码的层面，来尽量让用户不阅读或不调试代码。
做法
1.阻止用户打开控制台
做法：禁用或重写右键菜单、禁用打开控制台的快捷键
// 禁用F12，其它快捷键同理
document.onkeydown = function() {
if (window.event && window.event.keyCode === 123) {
alert("F12被禁用啦")
event.keyCode = 0
event.returnValue = false
}
}
// 禁用右键菜单
document.oncontextmenu = function(event) {
return false
}
// 重写右键菜单 v-contextmenu https://heynext.xyz/v-contextmenu/
2.阻止用户调试代码
做法：添加debug
// 不断给代码打断点，给想要调试代码的用户制造麻烦
!function() {
setInterval(function() {
debugger;
}, 500)
}();
3.监听控制台是否被打开，并添加阻止逻辑（例如：直接关闭网页）
做法：使用插件devtools-detect，当这个插件无法监听另外打开窗口的控制台
ps: 由于这个插件的原理是根据浏览器窗口大小和可视窗口大小来判断用户有没有打开控制台，所以当把控制台另起窗口打开是检测不到的。
以上所有方法都是从操作上阻止用户查看源码，只能增高查看源码的门槛，不能完全防范。
例如：一个view-source，上述做法基本都成浮云～
参考资料
前端安全问题
前端安全：发生在浏览器、单页面应用、Web页面的安全问题，比如：跨站脚本攻击XSS、CSRF攻击、点击劫持、iframe带来的风险、不安全的第三方依赖包。
跨站脚本攻击XSS
XSS跨站脚本攻击: 将一段脚本内容放到目标网站的目标浏览器上解释执行
跨站脚本攻击是指恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。
xss漏洞通常是通过将javascript代码输出到html页面中，通过用户本地浏览器执行的，所以xss漏洞关键就是寻找参数未过滤的输出函数。
xss 分类（三类）
反射型XSS：<非持久化> 用户通过Web客户端提交给服务端的数据，立刻用于解析和显示该用户的结果页面(数据没有在服务端存储)。如果提交的数据中含有恶意的脚本代码，而服务端没有经过编码转换或者过滤，就会形成XSS攻击，这种形式的XSS称为反射型XSS。
试一试
<svg onload="alert('买买买')">
存储型XSS：<持久化> 代码是存储在服务器中的，如在个人信息或发表文章等地方，加入代码，如果没有过滤或过滤不严，那么这些代码将储存到服务器中，每当有用户访问该页面的时候都会触发代码执行，这种XSS非常危险，容易造成蠕虫，大量盗窃cookie（虽然还有种DOM型XSS，但是也还是包括在存储型XSS内）
DOM型XSS：基于文档对象模型Document Objeet Model，DOM)的一种漏洞。DOM是一个与平台、编程语言无关的接口，它允许程序或脚本动态地访问和更新文档内容、结构和样式，处理后的结果能够成为显示页面的一部分。客户端的脚本程序可以通过DOM动态地检查和修改页面内容，它不依赖于提交数据到服务器端，而从客户端获得DOM中的数据在本地执行，如果DOM中的数据没有经过严格确认，就会产生DOM XSS漏洞。
防范办法
1、【不需要渲染标签的情况】: 过滤转译用户输入的内容
function escape(str) {
str = str.replace(/&/g, '&')
str = str.replace(/</g, '<')
str = str.replace(/>/g, '>')
str = str.replace(/"/g, '&quto;')
str = str.replace(/'/g, ''')
str = str.replace(/`/g, '`')
str = str.replace(/\//g, '/')
return str
}
...
document.getElementById("showBow").innerHTML = escape(
document.getElementById("inputBox").value)
2、【需要渲染标签的情况】：使用xss插件
参考资料：
CSRF攻击
英文全称是 Cross-site request forgery，所以又称为“跨站请求伪造”，是指黑客引诱用户打开黑客的网站，在黑客的网站中，利用用户的登录状态发起的跨站请求。简单来讲，CSRF 攻击就是黑客利用了用户的登录状态，并通过第三方的站点来做一些坏事
防范办法（前端）
cookie的SameSite属性用来限制第三方Cookie，从而减少安全风险(防止CSRF)
SameSite可以有下面三种值：
Strict仅允许一方请求携带Cookie，即浏览器将只发送相同站点请求的Cookie，即当前网页URL与请求目标URL完全一致。
Lax允许部分第三方请求携带Cookie
None无论是否跨站都会发送Cookie
参考资料
点击劫持
点击劫持， clickjacking，也被称为UI-覆盖攻击。它是通过覆盖不可见的框架误导受害者点击。虽然受害者点击的是他所看到的网页，但其实他所点击的是被黑客精心构建的另一个置于原网页上面的透明页面。
防范方法：
1.使用 JS 防范
判断顶层视口的域名是不是和本页面的域名一致，如果不一致就让恶意网页自动跳转到我方的网页。当然你还可以恶心一下这些恶意网站，比如说弹窗十几次，或者跳转到某些404页面。
if (top.location.hostname !== self.location.hostname) {
alert("您正在访问不安全的页面，即将跳转到安全页面！");
top.location.href = self.location.href;
}
2.使用 HTTP 头防范
通过配置 nginx 发送 X-Frame-Options 响应头，这样浏览器就会阻止嵌入网页的渲染。更详细的可以查阅MDN上关于X-Frame-Options 响应头的内容。
add_header X-Frame-Options SAMEORIGIN;
iframe带来的风险
iframe中的内容是由第三方来提供的，默认情况下他们不受我们的控制，他们可以在iframe中运行JavaScirpt脚本、Flash插件、弹出对话框等等，这可能会破坏前端用户体验。frame本身不受我们控制，那么如果iframe中的域名因为过期而被恶意攻击者抢注，或者第三方被黑客攻破，iframe中的内容被替换掉了，从而利用用户浏览器中的安全漏洞下载安装木马、恶意勒索软件等等。
iframe防御：
iframe有了一个叫做sandbox的安全属性，通过它可以对iframe的行为进行各种限制，在 iframe 元素中添加上这个关键词就行，另外，sandbox也提供了丰富的配置参数，我们可以进行较为细粒度的控制。一些典型的参数如下：
**allow-forms：**允许iframe中提交form表单
**allow-popups：**允许iframe中弹出新的窗口或者标签页（例如，window.open()，showModalDialog()，target=”_blank”等等）
**allow-scripts：**允许iframe中执行JavaScript
**allow-same-origin：**允许iframe中的网页开启同源策略
如果你只是添加上这个属性而保持属性值为空，那么浏览器将会对 iframe 实施史上最严厉的
不安全的第三方依赖包
项目里面使用了很多第三方的依赖，不论应用自己的代码的安全性有多高，如果这些来自第三方的代码有安全漏洞，那么对应用整体的安全性依然会造成严峻的挑战。jQuery就存在多个已知安全漏洞，Node.js也有一些已知的安全漏洞。
第三方依赖包防御：
手动检查这些第三方代码有没有安全问题是个苦差事，主要是因为应用依赖的这些组件数量众多，手工检查太耗时，有自动化的工具可以使用，比如NSP(Node Security Platform)，Snyk、sonarQubej检测工具等等。
可能引起安全的问题的API
eval()
eval()函数会将传入的字符串当做 JavaScript 代码进行执行。
interHTML()
innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
HTML5的新规范已经帮忙过滤了scrpit标签，但是没有过滤svg(onload)、 img(onerror)
录制文件：https://meeting.tencent.com/v2/cloud-record/share?id=2537f63b-e73a-4d97-97c2-a3acf491c013&from=3