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

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

相关推荐
杀死一只知更鸟debug2 分钟前
vue2,vue3,vue3 + vite 动态加载图片的方式
前端·javascript·vue.js
剪刀石头布啊12 分钟前
使用 husky 配置git hooks 提交前校验
javascript
Enti7c1 小时前
定时器的定义
javascript
m0_555762902 小时前
单例模式(Singleton Pattern)
开发语言·javascript·单例模式
ElasticPDF_新国产PDF编辑器3 小时前
Vue 项目 PDF 批注插件库在线版 API 示例教程
javascript
yufei-coder3 小时前
配置Next.js环境 使用vscode
开发语言·javascript·vscode·next.js
阿白的白日梦3 小时前
JSX 元素隐式具有类型 "any",因为不存在接口 "JSX.IntrinsicElements"。ts 无法使用 JSX,除非提供了 "--js
前端·javascript·typescript
uhakadotcom3 小时前
nginx的JavaScript魔力:njs简介与实践
javascript·后端·面试
用户4099322502123 小时前
深入掌握FastAPI与OpenAPI规范的高级适配技巧
前端·javascript·后端
东东__net3 小时前
1_vue基本_插件
java·前端·javascript