iframe和伪造ajax

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>

image-20211201145429615

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标签进行访问；

image-20211201150149732

  • 多个嵌套也可以结合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进行数据的发送

  • image-20211201153019345

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

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>

image-20211201155355878

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的信息；如果需要设置全部或者更详细的操作请参考参考文献；

继续努力，终成大器；

posted @ 2021-12-01 16:02  紫青宝剑  阅读(57)  评论(0)  编辑  收藏  举报