CTF入门学习5-> 前端JavaScript基础
Web安全基础
JavaScript的实现包括以下3个部分：
1）核心语法：描述了JS的语法和基本对象。
2）文档对象模型 （DOM）：处理网页内容的方法和接口
3）浏览器对象模型（BOM）：与浏览器交互的方法和接口。
03-00 概述
03-00-1 在哪些地方可以运行Javascript？
将JS写在HTML的<script></script>标签之间
如：
1 <html>
2 <head>
3 <title>web安全</title>
4 </head>
5 <body>
6 <p id="CD">
7 I'm Clivia Du!
8 </p>
9 <script>
10 function changetext(id)
11 {
12 id.innerHTML="Thanks!"
13 }
14 </script>
15 <h1 onclick="changetext(this)">
16 请点击此处
17 </h1>
18 </body>
19 </html>把代码直接写到HTML的事件属性中。
比如上文中的onclick=“xxxxx”
效果是点击“请点击此处”后，会变成“Thanks”
浏览器的JS控制台中，可以执行JS代码；如在Edge中，Ctrl+shift+J(Windows+Linux)；即可打开。
03-00-2JavaScript语法是否复杂？
JavaScript遵循ECMAScript标准，ECMA包含了语法规范等等。语法比较简单，借用了C和Java的语法。
03-00-3 除了之前提到的动态效果，JS还用来做什么？
来看03-01DOM
DOM和BOM相当于人的两只手，DOM控制HTML，BOM控制浏览器。
03-01 DOM
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树：
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
那么在HTML源码已经完成的情况下，我们如果想在页面操作HTML该怎么办？
这时候就需要用到JavaScript的HTML DOM函数，DOM是文本的一个对象模型。现在就来看一看具体是怎么操作的。
03-01-1 查找元素：如何获取一个HTML元素？
获取元素
getElementById();通过ID获取元素
（注意是aid的I，不是L，不是1）
获取元素内容
.innerHTML：获取元素内容
1 <html>
2 <head>
3 <title>web安全</title>
4 </head>
5 <body>
6 <p id="CD">
7 HELLO WORLD!
8 </p>
9 <script>
10 x = document.getElementById("CD");
11 alert("id 为 CD 元素的文本是"+x.innerHTML);
12 </script>
13 </body>
14 </html>
PS：注意其中的alert方法，是在JS中表示弹出一个提示栏，可以用来展示信息。
另外，我们还可以通过标签名、类名查找HTML元素。
标签名getElementsByTagName：
1 <html>
2 <head>
3 <title>Web安全
4 </title>
5 </head>
6 <body>
7 <div id="main">
8 <p> DOM</p>
9 <p>该例展示了 <b>getElementsByTagName</b> 方法</p>
10 </div>
11 <script>
12 var x=document.getElementById("main");
13 var y=x.getElementsByTagName("p");
14 document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
15 </script>
16
17 </body>
18 </html>附上一张运行截图，为了图方便就在菜鸟上做的。
类名 getElementsByClassName：
03-01-2 如何修改一个HTML元素内容？
获取元素
getElementByld();通过Id获取元素
获取元素内容
.innerHTML;通过Id获取元素，并通过赋值“=”进行修改。
1 <html>
2 <head>
3 <title>web安全</title>
4 </head>
5 <body>
6 <p id="CD">
7 HELLO WORLD!
8 </p>
9 <script>
10 x = document.getElementById("CD");
11 x.innerHTML=("改变！");
12 </script>
13 </body>
14 </html>
03-1-3 创建如何创建动态的HTML内容？
我们可以使用document.write()；可以直接写到html页面当中。
例如：
1 <html>
2 <head>
3 <title>web安全</title>
4 </head>
5 <body>
6 <p id="CD">
7 Hello World!
8 </p>
9 <script>
10 x = document.getElementById("CD");
11 document.write(Date());
12 </script>
13 </body>
14 </html>
通过document.write(Date())，写入了当前时间，运行效果如下：
下面我们还可以通过控制台来直接写入元素，进入https://home.cnblogs.com/blog/；打开控制台，我们输入：
document.write(Date());
至于上面的Tracking，是浏览器跟踪阻止了对URL存储的访问，是一个浏览器机制。目前其机制我们不做了解。
可以看到页面出现了我们write的内容。
下面我们可以结合之前讲过的html的框架iframe来试一试。
iframe是一个内联框架，能够将另一个HTML页面嵌入到当前页面中。
我们在https://home.cnblogs.com/blog打开控制台：
输入：
document.write("<iframe src = 'https://www.cnblogs.com/Roboduster/'></iframe>")
可见框架里出现预期效果，框里出现了这个URL所指的页面。
至于为什么会有这么多报错？
是因为，我们使用的是HTTPS协议，这与HTTP又有所不同，前者是安全的HTTP（HTTP over Secure Socket Layer），是以安全为目标的 HTTP 通道，所以在 HTTPS 承载的页面上不允许出现 http 请求，一旦出现就是提示或报错：
Mixed Content: The page at ‘https://www.taobao.com/‘ was loaded over HTTPS, but requested an insecure image ‘http://g.alicdn.com/s.gif’. This content should also be served over HTTPS.协议一样时是不会报错的（这里是因为后者博客页面引用了很多http的文件所以报错）
此外解决这个问题，我们可以强制将http升级为https，这个我目前还没有深入了解。
参考：
所以我们可以在https页面打开https试一下:
在https://home.cnblogs.com/blog打开https://leetcode-cn.com/u/zzrs123/，我的力扣，可见这种协议不兼容消失了，出现了理想的效果。
发现好了很多，报错是因为浏览器工具的问题。
03-1-4 如何让页面增加互动？
学习一下如何调用JavaScript的函数进行页面的简单动态。
1 <html>
2 <head>
3 <title>web安全</title>
4 </head>
5 <body>
6 <p id="CD">
7 HELLO WORLD!
8 </p>
9 <script>
10 function changetext(id)
11 {
12 id.innerHTML="Thanks!";
13 }
14 </script>
15 <h1 onclick="changetext(this)">
16 请点击
17 </h1>
18 </body>
19 </html>
效果：点击“请点击”，会改变成“Thanks！”
以上使用JavaScript访问和操作HTML就是JavaScript DOM的操作。DOM就像是链接Web和编程语言的一个桥梁(HTML的的编程接口)。
03-02 BOM
讲BOM有一篇好文：JavaScript BOM(浏览器对象模型)
BOM：Browser Object Model 是浏览器对象模型。BOM提供了独立与内容的、可以与浏览器窗口进行互动的对象结构，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。
03-02-1 弹窗
警告弹窗：alert()函数
确认弹窗：confirm()函数
提示弹窗：prompt()函数
经常用于简单的调试和信息展示。比如XSS漏洞的测试。
03-02-2 Cookie获取
在Web通信基础 | URL & HTTP一文的HTTP是什么中，我曾经把Cookie比方成
HTTP包含的Cookie就相当于能够进入我们小区的凭证
那Cookie是什么呢？是服务器发送给用户的一小段文本信息，用来辨认用户状态。再打个更合适的比方：
还拿外卖小哥来举例，第一次进入小区，（这样假设）我们要告诉物业他可以进入，并假设给了他一个凭证，第二次再来时，就能够识别出这个外卖并准许进入（/办事）。
常见场景是用户输入用户名和密码成功登录网站后，网站会生成一个Cookie给用户，当作用户凭证，这个Cookie就相当于一个钥匙，我们每次访问该网站都会带上这个Cookie。
获取Cookie：document.cookie
写入Cookie：document.cookie = "写入值"，再获取Cookie时就会看到新增加的这个写入值。但这个写入值时发不到服务器的。
03-02-3 其他操作
获取屏幕信息，(window.)screen
获取控制当前用户的URL：(window.)location
刷新到新的页面：(window.)location.href="新url"
获取浏览器信息：
(window.)navigator
(window.)navigator.userAgent
操作浏览器窗口：window open("new url"),close
稍作总结，类比DOM是页面内容HTML与Js的接口，BOM就像是链接浏览器和编程语言js的一个桥梁(浏览器的的编程接口)。
CTF入门学习5-> 前端JavaScript基础的更多相关文章
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- JavaScript学习(1)之JavaScript基础
JavaScript学习(1)之JavaScript基础 由于工作原因,开发语言逐渐以JavaScript为主,所以,抽空学习了下JavaScript语法.等现阶段的工作稳定之后,陆续会分享下自己在学 ...
- Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
- 转 iOS Core Animation 动画 入门学习（一）基础
iOS Core Animation 动画 入门学习(一)基础 reference:https://developer.apple.com/library/ios/documentation/Coco ...
- JavaSE入门学习7：Java基础语法之语句(下)
继续接着Java基础语法来:JavaSE入门学习5:Java基础语法(一)和JavaSE入门学习6:Java基础语法(二). 语句 Java经常使用的3种循环:while.do...while,for ...
- JavaSE入门学习6：Java基础语法之运算符和语句(上)
继续接着上篇:JavaSE入门学习5:Java基础语法(一)来看Java的基础语法. 五运算符 运算符是一种"功能"符号,用以通知Java进行相关的运算.比方.我们须要将变量age ...
- Shiro learning - 入门学习 Shiro中的基础知识(1)
Shiro入门学习 一 .什么是Shiro? 看一下官网对于 what is Shiro ? 的解释 Apache Shiro (pronounced “shee-roh”, the Japanese ...
- web前端零基础入门学习！前端真不难！
现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是,在程序员的世界里,前端开发是最最简单的 ...
- CTF入门学习4->前端HTML基础
Web安全基础 02 前端开发-HTML基础 浏览器对于上网者来说是一种直观.可视化的呈现.服务器发送数据到客户端,客户端需要处理这些数据,互联网就造就了这种数据语言--HTML. 02-00 概述 ...
随机推荐
- 在线编辑Word——插入图片、图形
在Word中支持插入图片.图形等元素,同时支持对插入的图片和图形进行格式化操作,如裁剪.调整尺寸大小.调成颜色.阴影.倾斜角度.透明度等等.本文,将通过使用Spire.Cloud Word在线编辑器来 ...
- POJ 3278：The merchant（LCA&DP）
The merchant Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 6864 Accepted: 2375 Desc ...
- fastapi（一）
废话不多说,直接上代码. 目录结构, 由于我也是刚开始学这个框架,只是了解了怎么注册蓝图,JWT的集成,数据库的集成,想了解更多,自行打开官方文档去详细阅读.fastapi官网文档链接 创建一个mai ...
- WebRTC下 的 NAT 穿透技术
NAT的概念模型 NAT名字很准确,网络地址转换,就是替换IP报文头部的地址信息.NAT通常部署在一个组织的网络出口位置,通过将内部网络IP地址替换为出口的IP地址提供公网可达性和上层协议的连接能力. ...
- 第二十六个知识点：描述NAF标量乘法算法
第二十六个知识点:描述NAF标量乘法算法 NAF标量乘法算法是标量乘法算法的一种增强,该算法使用了非邻接形式(Non-Adjacent Form)表达,减少了算法的期望运行时间.下面是具体细节: 让\ ...
- CS5266替代AG9311设计TYPEC转HDMI带PD3.0音视频拓展坞方案
CS5266替代AG9311设计TYPEC转HDMI带PD3.0音视频拓展坞方案台湾安格AG9311是一款TYPEC转HDMI带PD3.0的音视频转换芯片,它主要用在USB TYPEC拓展坞或者USB ...
- Kibana_X-Pack管理Elasticsearch权限
在Kibana上面配置权限,验证对Elasticsearch权限控制, 主要步骤如下: 1.创建角色 2.创建用户,并且赋予用户角色 3.用户登陆,验证没有权限 4.赋予角色权限 5.用户登陆,验证拥 ...
- Jenkins安装、配置与说明
Jenkins是一个开源的.提供友好操作界面的持续集成(CI)工具,主要用于持续.自动的构建/测试软件项目.监控外部任务的运行. 这么解释很抽象,举个例子,我们开发完一个功能,我们要将项目发布打包好, ...
- PHP 中的多进程使用，进程通信、进程信号等详解
多进程环境要求 Linux 系统 php-cli 模式 pcntl 扩展 或 swoole 扩展 pcntl 扩展 <?php $str = "hello world!" . ...
- SpringBoot 之 实现登录功能及登录拦截器
增加登录退出控制器: # src/main/java/com/wu/controller/LoginController.java @Controller public class LoginCont ...