iframe和伪造ajax

1.iframe标签

  • <iframe>标签是一个内联框架，即用来在当前HTML页面中嵌入另一个文档的，且所有主流浏览器都支持iframe标签。

1.1基本用法

<iframe src="地址、或者html文件">

</iframe>
  • 示例
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h2>Hello World</h2>

    <iframe width="80%" height="300px" src="https://www.bilibili.com/"></iframe>

</body>

</html>

1.2多个嵌套

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h2>Hello World</h2>

    <iframe width="80%" height="300px" src="https://www.bilibili.com/"></iframe>

    <iframe width="80%" height="300px" src="https://music.163.com/"></iframe>

    <!-- HTML文件 -->

    <iframe width="80%" height="300px" src="index.html"></iframe>

</body>

</html>
  • 有的网站由于存在安全机制的问题不能够直接使用iframe标签进行访问；

  • 多个嵌套也可以结合Pyecharts的图表构建简单的可视化大屏；

2.结合Form表单

2.1 Form表单的提交方式

  • 原生方式提交，<input type="submit" value="提交" />

  • 使用js提交

    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>Title</title>
    
</head>
    
<body>
    
    <h2>Hello World</h2>
    
    <form id="f1" method="post" action="">
    
        {% csrf_token %}
    
        用户名：
    
        <input name="name" id="name" />
    
        <button id="btn" onclick="submitForm();">提交</button>
    
    </form>
    
    <script>
    
        //JS提交form表单
    
        function submitForm(){
    
            document.getElementById("f1").submit();
    
        }
    
    </script>
    
</body>
    
</html>

  • 经实验发先两种提交方式均会跳转界面；因此我们可以借助iframe标签实现form表单的提交

2.2 iframe伪造Ajax

  • 步骤：
    • 1.添加<iframe>标签，并添加id和name，为了在界面上显示的不突兀，我们使用css将iframe标签进行隐藏；
    • 2.在form标签中添加target=“iframe的name”
    • 3.使用js进行数据的发送

  • 提交后后台已经能够接收到数据；

2.3 接收返回值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h2>Hello World</h2>

    <!--

    <iframe width="80%" height="300px" src="https://www.bilibili.com/"></iframe>

    <iframe width="80%" height="300px" src="https://music.163.com/"></iframe>

    <iframe width="80%" height="300px" src="index.html"></iframe>

    -->

    <form id="f1" method="post" action="" target="ifr1">

        {% csrf_token %}

        用户名：

        <input name="name" id="name" />

        <button id="btn" onclick="submitForm();">提交</button>

    </form>

    <iframe name="ifr1" id="ifr" style="display: none"></iframe>

    <script>

        function submitForm(){

            //获取内容

            document.getElementById("ifr").onload=loadIframe;//注意不要写括号;或者可以将iframe标签放在最底部因为loadIframe标签加载时可能iframe标签未加载

            document.getElementById("f1").submit();

        }

        function loadIframe(){

            var content=document.getElementById("ifr").contentWindow.document.body.innerText;

            //contentWindow获得iframe的对象，包含document；

            //onload每次接收到请求都会重新加载一次

            alert(content);

        }

    </script>

</body>

</html>

3.补充：django中通过iframe

  • 参考文献：https://blog.csdn.net/weixin_42886895/article/details/88970578

  • django的老版本可能不会有这个问题；返回HttpResponse的时候会遇到拒绝连接的情况

  • 目前我使用的django==3.2.5的版本

  • from django.views.decorators.clickjacking import xframe_options_exempt
    
@xframe_options_exempt
    
def autohome(request):
    
    if request.method=="GET":
    
        return render(request,'autohome.html')
    
    else:
    
        name=request.POST.get("name")
    
        print(name)
    
        return HttpResponse("123")

  • 使用装饰器啊修饰过后仅，改函数可以正常的返回iframe的信息；如果需要设置全部或者更详细的操作请参考参考文献；

继续努力，终成大器；

iframe和伪造ajax的更多相关文章

  1. 每日学习——iframe标签伪造ajax

    刚开始学习ajax,好难,看不懂啊看不懂. 伪造ajax加载网页 <!DOCTYPE html> <html> <head lang="en"> ...

  2. 第二百七十二节，Tornado框架-iframe标签框架伪造ajax

    Tornado框架-iframe标签框架伪造ajax html <!DOCTYPE html> <html> <head lang="en"> ...

  3. 利用jquery+iframe做一个ajax上传效果

    以下是自学it网--中级班上课笔记 网址:www.zixue.it html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...

  4. iframe实现伪ajax

    iframe实现伪ajax 数据提交的两种方式: Form Ajax Ajax提交数据的方法: JS实现 Jquery “伪”Ajax "伪"Ajax: iframe+from实现 ...

  5. iframe伪造ajax

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 跨站请求伪造 | ajax

    一.简介 django为用户实现防止跨站请求伪造的功能,通过中间件 django.middleware.csrf.CsrfViewMiddleware 来完成.而对于django中设置防跨站请求伪造功 ...

  7. form表单利用iframe高仿ajax

    html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  8. Ajax-02 iframe实现伪“Ajax”

    需求: 用户输入URL,使用iframe将目标URL的内容加载到页面指定位置(局部刷新) <!DOCTYPE html> <html lang="en"> ...

  9. Python 20 Ajax全套

    概述 对于web应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作需要 ...

随机推荐

  1. Abp 审计模块源码解读

    Abp 审计模块源码解读 Abp 框架为我们自带了审计日志功能,审计日志可以方便地查看每次请求接口所耗的时间,能够帮助我们快速定位到某些性能有问题的接口.除此之外,审计日志信息还包含有每次调用接口时客 ...

  2. 布客&#183;ApacheCN 编程/后端/大数据/人工智能学习资源 2020.6

    公告 我们的群共享文件有备份到 IPFS 的计划,具体时间待定. 我们的机器学习群(915394271)正式改名为财务提升群,望悉知. 请关注我们的公众号"ApacheCN",回复 ...

  3. 阿里P8整理Mysql面试题答案，助你“脱颖而出”，吊打面试官！（建议收藏）

    前言 作为一名开发人员,每天英高都在和数据库进行着斗智斗勇,尤其是互联网行业,对MySQL的使用是比较多的.同样的,因为mysql的重要性以及普及性,在面试的时候一定是一个面试的重点或者说常问问题,说 ...

  4. Android中常用布局

     1.线性布局  LinearLayout         orientation:方向:vertical,垂直:horizontal,水平         gravity:对齐方式,子控件相对于当前 ...

  5. Serializable接口中serialVersionUID字段的作用

    序列化运行时使用一个称为 serialVersionUID 的版本号与每个可序列化类相关联,该序列号在反序列化过程中用于验证序列化对象的发送者和接收者是否为该对象加载了与序列化兼容的类. 如果接收者加 ...

  6. Linux-一次执行多个命令 ； && ||

    一次执行多个命令,多个命令之间用:号隔开 cmd1;cmd2:cmd3 这样前后执行的时候没有依赖性,如果有下列要求呢 1. cmd1执行失败那就不要执行后面的命令 2. cmd1失败了才去指令后面的 ...

  7. KubeSphere单节点(all-in-one)平台搭建记录

    KubeSphere单节点(all-in-one)平台搭建记录 目录 KubeSphere单节点(all-in-one)平台搭建记录 一.主机准备 1.1 主机配置 1.2 环境准备 二.下载kube ...

  8. TCP的报文详细解读

    这张图好像挺有名的,其实一开始我看见的时候是一脸懵逼的,但是通过翻书(大学时代最害怕的计算机网络),查阅他人博客等等办法,最后终于有了一个系统的了解,当然,这里知识点多而杂,大家可以多看几遍,结合上面 ...

  9. Ubuntu20.04 安装MongoDB及其基本使用

    MongoDB 官方文档 本博客旨在自我学习使用,如有任何疑问请及时联系博主 基本介绍 MongoDB 是由C++语言编写并基于分布式文件存储的开源数据库. MongoDB 是一款介于关系数据库和非关 ...

  10. 卡特兰数是我见过第二神奇的东西//下一个是stirling数列

    自从上次斐波那契的总结后,今天有一次遇上了正宗卡特兰数. 1, 1, 2, 5, 14, 42, 132, 429, 1430, 4862, 16796, 58786, 208012, 742900, ...