js安全开发值&dom&bom&xss重定向&安全实例

前言、

什么是dom?dom树?dom就是html的标签和标签内的属性元素

dom树:

dom基础操作

复制代码
<!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>
    <hr>
    <h1 id="1" class="blue">xxxx</h1>
    <script>
        //class和id的区别  就是id是唯一的  可以通过id来获取元素  class可以重复  可以通过class来获取属性值

        //dom的基本操作   什么是元素 :body  和  head内的蓝色的   半蓝的就是属性


        // 一 、查找html元素
        // 1\通过 id属性查找
        var a = document.getElementById("1"); //获取的是整个标签
        console.log(a);
        // 2\通过标签名查找   模糊查找
        var b = document.getElementsByTagName("h1"); //获取的是标签数组  因为是多个的
        console.log(b);
        // 3\通过类名查找
        var c = document.getElementsByClassName("blue")



        // 改变html内容
        //改变元素的的内容
        //获取文本内容  并修改
        // var h1 = document.getElementById("1");
        // var h2 = h1.innerHTML = "yyyy";
        // console.log(h2);

        //获取属性值  并修改
        // var h3 = document.getElementById("1");
        // var h4 = h3.id = "2"; //这个修改的是已经存在的属性   不会新增属性
        // console.log(h4);
        // 新增属性的 修改   
        var h3 = document.getElementById("1");
        h3.setAttribute("name", "dom") //当属性不存在的时候  就会直接创建一个
        console.log(h3)


        // 添加删除元素
        // 1\创建元素
        var div = document.createElement("div");
        div.innerHTML = "hello world";
        // 2删除元素
        var h1 = document.getElementById("1");
        var shanchu = document.removeChild(h1);


        // 添加时间处理程序

        document.getElementById("1").onclick = function() {
            alert("你好");
        }
    </script>

</body>

</html>

bom浏览器对象

bom是一个大类面向的是整个浏览器 浏览器上有的我们都可以使用bom进行获取

1、使用window对浏览器的窗口进行操作 :

复制代码
    <a href="">点击</a>
    <script>
        // window.open(); //打开一个新窗口
        // window.close(); //关闭当前窗口
        window.moveTo(); //移动当前窗口到指定坐标
    </script>

2、对屏幕尺寸的控制(为了获取让用户的显示器和浏览器的显示大小有合适的配比)

screen操作

3、使用location 获取当前页面的url 重定向当前的页面

复制代码
      //location操作
        console.log(location.href); //显示当前页面的URL信息
        // location.href = "http://www.baidu.com"; //跳转到指定页面

        // 获取当前页面的网站目录路径

        console.log(location.pathname); //显示当前页面的网站目录路径
        console.log(location.hostname); //显示当前页面主机的域名
        console.log(location.port); //显示当前页面主机的端口号
        location.port = "8080"; //修改当前页面主机的端口号
        console.log(location.protocol); //显示当前页面的协议类型
    </script>

4、history操作 用户对之前访问的页面向前或者向后进行跳转

复制代码
     history.back(); //返回上一页
        history.forward(); //前进到下一页
        history.go(-1); //前进到上一页

5、navigator 对访问者信息进行操作

6、dom操作 对 dom是bom的一个子类

7、弹出操作

复制代码
        // 弹出框操作
        // alert("弹出框"); //弹出一个提示框
        // var a = confirm("你确定要删除吗?"); //弹出一个确认框
        // if (a == true) {
        //     alert("删除成功");
        // } else {
        //     alert("删除失败");
        // }

        //提示框
        var b = prompt("请输入账号", "张三"); //弹出一个输入框
        if (b != null) {
            document.write("你输入的账号是:" + b);
        }

练习

用户的点击触发他想访问的网站

复制代码
    <a id="a">点击我</a>
    <script>
        //先获取当前的url链接
        var a = document.getElementById("a");
        var url = window.location.href;
        console.log(url);
        var b = a.setAttribute("href", url);
        console.log(a);
        var c = "https://www.baidu.com";
        var d = a.href = c; //修改a标签的href属性
        console.log(d);
        // b.href = "www.baidu.com"; //修改a标签的href属性
    </script>

注意点: 修改的url地址需要加上 http:// 协议的不然无法访问

效果:

Dom型XSS

dom型XSS的成因是正常输入无法触发XSS代码但是 js操作是动态的当我们 点击其他的dom操作时 会把Xss代码释放从而实现Xss

但是当我们点击下边的历史记录

相关推荐
拉不动的猪1 小时前
简单回顾下插槽透传
前端·javascript·面试
爱吃鱼的锅包肉1 小时前
Flutter路由模块化管理方案
前端·javascript·flutter
风清扬雨2 小时前
Vue3具名插槽用法全解——从零到一的详细指南
前端·javascript·vue.js
海盗强2 小时前
Vue 3 常见的通信方式
javascript·vue.js·ecmascript
oscar9993 小时前
JavaScript与TypeScript
开发语言·javascript·typescript
橘子味的冰淇淋~3 小时前
【解决】Vue + Vite + TS 配置路径别名成功仍爆红
前端·javascript·vue.js
leluckys3 小时前
flutter 专题 六十三 Flutter入门与实战作者:xiangzhihong8Fluter 应用调试
前端·javascript·flutter
shoa_top4 小时前
JavaScript 数组方法总结
javascript
鱼樱前端5 小时前
让人头痛的原型和原型链知识
前端·javascript
lianghj5 小时前
前端高手必备:深度解析高频场景解决方案与性能优化实战
前端·javascript·面试