js安全开发值dombomxss重定向安全实例

前言、

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

效果：