Web安全2.1:前端开发基础(HTML、CSS、JavaScript)
通俗的讲:Web前端指的就是我们用浏览器看到的那部分内容,浏览器展示这些内容,用到了这3个东西:HTML、CSS、JavaScript
1、HTML:
HTML是Hyper Text Markup Language的缩写,超文本标记语言。它是由元素组成,元素也可以叫做标签。
标签的开闭:左边<h1>
是开,右边</h1>
是闭
除此之外标签是可以嵌套的,比如说头部标题可以当作超链接。
以下标签的关注点都是在能调用网络资源,比如引入站外的文件的标签上等。
有关Web安全的标签 | 代码 |
---|---|
注释(发现敏感信息) | <!-- Hello word --> |
设置头部标题 | <h1>Hello World!</h1> |
设置编码格式为utf-8 | <meta charset="utf-8"> |
超链接 | <a href="https://blog.csdn.net/a1766855068"我的博客></a> |
插入图片 | <img src="https://xxxx.png" > |
使用框将网页包含进来 | <iframe src="https://blog.csdn.net/a1766855068"></iframe> |
插入本地flash文件 | <object data="http://127.0.0.1/1/4.swf" type="application/x-shockwave-flash"></ object> |
插入表单 | <meta charset="utf-8"> <form action="https://blog.csdn.net/a1766855068" method="get"> <input type="text" name="name"> <input type="password" name="password"> <input type="submit" value="go"> </form> |
插入video | <video width="320" height="240" controls autoplay> <source src="http://127.0.0.1/1/2.webm" type="video/webm"> </video> |
插入audio | <audio controls> <source src="http://127.0.0.1/1/3.mp3" type="audio/mp3"> </audio> |
2、CSS:
CSS是层叠样式表(Cascading Style Sheets)的缩写,主要是用于 控制页面布局以及一些动画效果 。当我们想要网页上的某个元素显示出我们想要的样式时,可以创建一个.css文件,在里面编写规则,然后用在html内用link标签引入.
css还可以在html标签内的style属性内编写,这样的写法称为行内样式。
但css一般配合选择器使用(选择器作用主要是定位不同的标签,区分出不同标签之前的排版、外观、动画效果)。
代码 | 效果 |
---|---|
<meta charset="utf-8"> <style> .css_test{ color:blue } </style> <h1 style="color:red;">Hello!</h1> <p class="css_test">This is a subtitle!</p> | ![]() |
3、JavaScript:
JavaScript是一个脚本编程语言。JavaScript在浏览器中可以实现很多复杂的功能,比如更换HTML内容,与服务器通讯,甚至是绘制地图,制作3D动画或游戏等。
我们可以通过各种漏洞来执行自己写的JavaScript脚本,来达到控制页面,获取信息等实现自己的一些目的(例如测试XSS漏洞<script>alert(123)<script>
可以弹窗。