Web安全-JavaScript基础

Posted 2022-06-08 IT鹅

文章目录

• • JavaScript语言简述：
  • 为Web2.0而生：
  • JavaScript教程：
  • JavaScript数据类型：
  • JavaScript编程逻辑：
  • JavaScript打印数据：
  • JavaScript框架：
  • JavaScript混淆：
  • JavaScript代码混淆开源项目介绍：
  • 参考资料：

javascript语言简述：

JavaScript（通常缩写为JS）是一种进阶的、直译的程式语言（动态执行语言与Python，Java等语言类似）,JavaScript是一门基于原型、头等函数的语言，是一门多范式的语言，它支援物件导向程式设计，指令式编程，以及函式语言程式设计,它提供语法来操控文字、阵列、日期以及正则表达式等，不支援I/O，比如网络、储存和图形等，但这些都可以由它的宿主环境提供支援。它已经由ECMA（欧洲电脑制造商协会）通过ECMAScript实作语言的标准化。它被世界上的绝大多数网站所使用，也被世界主流浏览器（ Chrome、 IE、 Firefox、 Safari、Opera）支持。

为Web2.0而生：

–1993年，国家超级电脑应用中心（NCSA）发表了NCSA
Mosica最早流行的图形介面网页浏览器，它在万维网的普及上发挥了重要作用。
–1995年，网景招募了布兰登·艾克，目标是把Scheme语言嵌入到Netscape Navigator浏览器当中。
最初命名为Mocha，1995年9月在Netscape Navigator 2.0的Beta版中改名为LiveScript，同年12月，Netscape Navigator 2.0 Beta 3中部署时被重新命名为JavaScript。
[以上内容来自wiki百科]

JavaScript教程：

在浏览器中调用Javascript，打开Chorm浏览器中的更多工具-开发者模式(Windows操作系统中使用F12)-console中执行一条JavaScript语句。

console.log("Hello World!")

JavaScript语言会被嵌入HTML前端代码中，一般由以下五种常见的形式：
直接插入代码块

<script>console.log('Hello World!');</script>

加载外部 JS 文件

<script src="Hello.js"></script>

使用 HTML 标签中的事件属性

<a href="javascript:alert('Hello')"></a>

JavaScript数据类型：

var pi=new String;
var pi=new Number;
var pi=new Boolean;
var pi=new Array;
var pi=new Object;
var pi=3.14;
var pi='Hello JavaScript';

JavaScript编程逻辑：

if条件语句

if (condition)

   代码块;

else

   代码块;

switch 条件语句：

switch(n)

  case 1:
    代码块
    break;
  case 2:
    代码块
    break;
  default:
    代码块

for/for in 循环语句：

for (代码1；代码2；代码3)

  代码块

for (x in xs)

  代码块

while/do while 循环语句：

while (条件)

  代码块

do

  代码块

while (条件);

JavaScript打印数据：

函数：window.alert(“TEST”) document.write(“TEST”) console.log(“TEST”)
作用：弹出警告框 写入html文档 写入浏览器控制台

JavaScript框架：

更多JavaScript框架内容可以参考[JQuery，Angular，React，Vue菜鸟教程]
jQuery
jQuery 封装了常用的JS功能，通过选择器的机制来操纵DOM节点，完成复杂的前端效果展示。
jQuery 是一个JavaScript函数库。JQuery库包括了HTML元素选取，HTML 元素操作，CSS操作
HTML事件函数，JavaScript特效和动画，HTML DOM遍历和修改，AJAX，Utilities
Angular
AngularJS是一个JavaScript框架，AngularJS是以一个JavaScript文件形式发布的，可通过 script 标签添加到网页中，实现了前端的MVC架构，通过动态数据绑定来简化数据转递流程。

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

React
利用组件来构建前端UI的框架，React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于2013年5月开源。
React项目开源地址：React项目
Vue
Vue是一套构建用户界面的渐进式框架，Vue只关注视图层，采用自底向上增量开发的设计。
Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
JavaScript DOM和BOM
**DOM：**文档对象模型，JS通过操纵DOM可以动态获取、修改HTML中的元素、属性、CSS样式，这种修改有时会带来XSS攻击风险。
**BOM：**浏览器对象模型，类比于DOM，赋予JS对浏览器本身进行有限的操纵，获取Cookie、地理位置、系统硬件或浏览器插件信息等。

JavaScript混淆：

混淆前的代码：

console.log('Hello World!');

混淆后的代码：

console["\\x6c\\x6f\\x67"]('\\x48\\x65\\x6c\\x6c\\x6f \\x57\\x6f\\x72\\x6c\\x64\\x21');

加密后的代码：

eval(function(p,a,c,k,e,d)e=function(c)return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36));if(!''.replace(/^/,String))while(c--)d[e(c)]=k[c]||e(c);k=[function(e)return d[e]];e=function()return'\\\\w+';c=1;;while(c--)if(k[c])p=p.replace(new RegExp('\\\\b'+e(c)+'\\\\b','g'),k[c]);return p;('1.0(\\'3 2!\\');',4,4,'log|console|World|Hello'.split('|'),0,))

无论JS代码被如何加密都会被浏览器执行。

JavaScript代码混淆开源项目介绍：

JavaScript 混淆器
JavaScript混淆器
JavaScript Obfuscator 是一款功能强大的免费 JavaScript 混淆器，包含多种功能，可为您的源代码提供保护。
JavaScript代码在线混淆站：ChinaZ.com
https://tool.chinaz.com/tools/jscodeconfusion.aspx
混淆前的代码：

window.alert("XSS")

混淆后的代码：

window["\\x61\\x6c\\x65\\x72\\x74"]("\\x58\\x53\\x53")

本地运行JavaScript代码：
Node是JS语言的编译器，我们能通过NodeJS运行JS代码Node
1.在任意一个编辑软件中编写JS代码，并保存为test.js
console.log(“Hello World”);
2.执行JavaScript:
node test.js
JavaScritp安全问题：

参考资料：

CTF-ALL-IN-ONE
[中文维基百科JavaScript]https://zh.m.wikipedia.org/zh-hk/JavaScript
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript