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>
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
进行数据的发送
- 1.添加
-
提交后后台已经能够接收到数据;
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的信息;如果需要设置全部或者更详细的操作请参考参考文献;
继续努力,终成大器;