js安全开发值&dom&bom&xss重定向&安全实例-EW帮帮网

前言、

什么是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:// 协议的不然无法访问

效果：