利用第三方Cookie和iframe完成广告显示(各大网站就是利用了第三方Cookie和iframe来显示百度和京东的广告)

大家都有这种经历,你在百度上搜索了某些词语,那么当你在浏览其他各大网站的时候,其他各大网站上都会显示你最近在百度搜索的那些词语的相关广告!为什么各大网站会知道我最近在百度搜索过什么呢?为什么各大网站的广告如此的精准呢?

再比如说,我在京东的网站上搜索洗衣机,还在京东上浏览了洗衣机,袜子,手机,笔记本电脑等等商品信息,然后我又去了网易的网站上看新闻,去了腾讯的网站上看新闻,去了新浪的网站上看新闻,结果惊奇的发现,不管我是在新浪还是腾讯还是网易的网站上看新闻,都会在新闻页面上看到京东的广告信息,而且广告信息就是我最近在京东上浏览过的洗衣机和手机笔记本电脑的商品信息,天哪,为什么京东的广告会如此精准的出现在新浪、网易和腾讯各大网站上。

不知道大家对这个问题想过吗?想过为什么会这样吗?OK,今天我们就来讲讲精准广告推送这个话题!我还模拟了类似的代码,给大家详细讲解下其中的原因!

直接先看效果截图,等下直接看代码!

注意:为了测试成功,浏览器必须把接受第三方 Cookie给启用,如果是禁用状态,那我们是没办法测试成功的!

我用的是火狐浏览器,如果你们用的是谷歌浏览器或者IE浏览器,也必须接受第三方 Cookie给启用,各个浏览器怎么设置我就不说了,不懂的你们自己上网查!


http://localhost:8888/xml/showThirdParty.jsp(自己的showThirdParty.jsp页面) 这是我们自己的web应用程序,注意url地址是localhost ,你可以理解成我们自己的web应用程序是第一方



http://127.0.0.1:8888/html5/Goods (这是第三方网站,你可以把第三方网站理解成京东或者是百度)注意url地址是127.0.0.1,记住第三方网站的地址要和我们自己的web应用程序的地址不一样,要不然没办法测试,测试不出效果!当然啦,你也可以使用你自己的ip地址来充当第三方网站,比如我的ip地址是192.168.0.100,你测试的时候就可以用http://192.168.0.100:8888/html5/Goods 这个地址来充当第三方网站,也就是充当京东和百度,模拟京东和百度!而我们自己的web应用程序是第一方!


(题外话,比如说,中国和朝鲜2国坐下来一起讨论一些问题,那么你可以把中国理解成第一方,朝鲜为第二方,或者是把朝鲜理解成第一方,中国为第二方,都可以,此时,韩国又加入了讨论,那么可以把韩国理解成第三方,然后美国又加入了讨论,此时美国为第四方,其实也可以把韩国和美国都统归为第三方,因为原来本来或者说本身一开始就是中国和朝鲜这2个在讨论问题的,后面加入讨论的国家都应该称之为第三方,第三方有点类似于特定的术语,比如说2个人打架,此时有另外一个人从中劝架调停,此时这个调停劝架的人可以称之为第三方,所以大家可以理解为第三方是除双方之外的对象,其实第三方还可以理解成他或者他们,比如第一人称是我或者我们,第二人称是你或者你们,那么第三人称就是他或者他们)

回到我们的编程写代码领域,我们在访问我们自己的web应用程序的时候,在浏览器地址栏中输入http://localhost:8888/xml/showThirdParty.jsp,实际上是浏览器在向服务器发送请求,服务器收到请求后服务器会响应给浏览器,这样就完成了一次浏览器和服务器的交互过程。在这个交互过程中,我们可以把我们自己的浏览器理解为第一方,把访问的那台tomcat服务器理解成第二方,或者把访问的那台tomcat服务器理解成第一方把我们自己的浏览器理解为第二方也可以,除了这2方外的其他的所有的则称之为第三方,大家可以这么理解吧,反正就是这么个意思!再详细一点的说,我在浏览器地址栏中输入http://localhost:8888/xml/showThirdParty.jsp回车,我浏览器是第一方,访问的那台tomcat服务器是第二方,如果showThirdParty.jsp页面中嵌入了一个iframe,<iframe src="http://www.jd.com"></iframeiframe>,那么此时又会同时去访问或者叫请求吧,此时又会同时去请求www.jd.comwww.jd.com京东的服务器,此时京东就称之为第三方!反正就是这么个意思吧,这里说了下第一方,第二方和第三方的概念,哈哈,会不会是废话太多了,还有个第三方卖家,第一方是买东西的人,即我们这些在网站上购物的人,第二方是卖东西的人,卖东西给我们的是京东这个网站平台,所以第二方是京东,第三方就是入驻京东网站平台的那些卖家商家,称之为第三方卖家,我是和京东网站交互对话交流沟通的,所以,买东西的是我,卖我东西的是你京东,除了我和你京东之外的人,就称之为他或者他们,他或者他们就是我们2方以外的第3方或者叫第3者!

http://127.0.0.1:8888/html5/Goods (这是第三方网站的商品信息列表,有很多商品信息,你可以理解成京东的商品信息列表页面),我这里模拟了一些商品信息数据!

主要是为了测试,所以代码写的比较粗糙一些!

名字叫Goods的servlet

package com.jiongmeng;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.jiongmeng.entity.Good;

/**
 * 处理商品信息的Servlet
 */
@WebServlet("/Goods")
public class Goods extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
//		System.out.println("ServletPath=" + request.getServletPath());
//		request.getRequestDispatcher("/advertisement.jsp?age=12").forward(request, response);
		String operate = request.getParameter("operate");
		String id = request.getParameter("id");
		boolean flag = true; 
		boolean isFind = false; 
		request.setAttribute("flag", flag);
		
		//为了简单测试,就直接在这里造一些数据了
		
		Good good1 = new Good("1306", "苹果iphone8", 5699.50, "大降价", "goodsImg/1.jpg");
		Good good2 = new Good("1307", "惠普笔记本电脑", 5288.30, "暑假学生价", "goodsImg/2.jpg");
		Good good3 = new Good("1308", "Mac小苹果", 4266.60, "不卡的苹果电脑", "goodsImg/3.jpg");
		Good good4 = new Good("1309", "罗技鼠标M220", 188.85, "专业鼠标,选罗技鼠标", "goodsImg/4.jpg");
		Good good5 = new Good("1310", "公牛排插", 28.68, "公牛质量牛", "goodsImg/5.jpg");
		Good good6 = new Good("1311", "花露水", 12.50, "防止蚊虫叮咬", "goodsImg/6.jpg");
		Good good7 = new Good("1312", "云南白药药膏", 39.50, "好牙膏就是好", "goodsImg/7.jpg");
		Good good8 = new Good("1313", "保温杯", 46.50, "保温一整天", "goodsImg/8.jpg");
		Good good9 = new Good("1314", "大宝SOD蜜", 9.95, "防止干燥", "goodsImg/9.jpg");
		Good good10 = new Good("1315", "七匹狼钱包", 82.50, "皮具大减价", "goodsImg/10.jpg");
		Good good11 = new Good("1316", "西部数据移动硬盘", 399.50, "只要399元", "goodsImg/11.jpg");
		Good good12 = new Good("1317", "牙刷", 8.50, "好牙齿从牙刷开始", "goodsImg/12.jpg");
		Good good13 = new Good("1318", "猕猴桃", 26.50, "水果大减价", "goodsImg/13.jpg");
		Good good14 = new Good("1319", "哈密瓜", 28.50, "吐鲁番特产", "goodsImg/14.jpg");
		Good good15 = new Good("1320", "圣女果", 6.75, "好味道", "goodsImg/15.jpg");
		Good good16 = new Good("1321", "苹果", 5.95, "每天吃一个苹果,健康", "goodsImg/16.jpg");
		Good good17 = new Good("1322", "火龙果", 7.85, "好好吃", "goodsImg/17.jpg");
		Good good18 = new Good("1323", "榴莲", 75.50, "水果之王", "goodsImg/18.jpg");
		Good good19 = new Good("1324", "山竹", 47.50, "营养价值高", "goodsImg/19.jpg");
		Good good20 = new Good("1325", "葡萄", 18.82, "酸酸的,好好吃", "goodsImg/20.jpg");
		Good good21 = new Good("1326", "香瓜", 6.98, "多吃水果好", "goodsImg/21.jpg");
		
		List<Good> goods = new ArrayList<Good>();
		goods.add(good1);
		goods.add(good2);
		goods.add(good3);
		goods.add(good4);
		goods.add(good5);
		goods.add(good6);
		goods.add(good7);
		goods.add(good8);
		goods.add(good9);
		goods.add(good10);
		goods.add(good11);
		goods.add(good12);
		goods.add(good13);
		goods.add(good14);
		goods.add(good15);
		goods.add(good16);
		goods.add(good17);
		goods.add(good18);
		goods.add(good19);
		goods.add(good20);
		goods.add(good21);
		if ("detail".equals(operate)) {
			for (Good good : goods) {
				if (good.getId().equals(id)) {
					isFind = true;
					request.setAttribute("good", good);
					break;
				}
			}
			if (isFind) {
				String returnPath = request.getServletPath();
				System.out.println("ServletPath=" + returnPath);
				request.setAttribute("returnPath", returnPath);
				setCookies(id, request, response);
				request.getRequestDispatcher("/goodDetail.jsp").forward(request, response);
			}
			else {
				request.getRequestDispatcher("/index.html").forward(request, response);
			}
		}else if ("advertisement".equals(operate)) {
			//从Cookie中获取已经浏览过的商品id,从而生成广告信息
			String[] goodsId = getGoodsId(request, response);
			//通过Cookies找到曾经浏览过的商品id(浏览过的商品id是个数组),通过浏览过的商品id生成相应的广告信息
			List<Good> goodsAdvertisement = new ArrayList<Good>();
			if (goodsId != null) {
//				int count = 0;
//				for (Good good : goods) {
//					for (int index = 0; index < goodsId.length; index++) {
//						if (goodsId[index].equals(good.getId())) {
//							count++;
//							System.out.println("浏览过的商品id" + goodsId[index]);
//							break;
//						}
//					}
//					if (count == goodsId.length) {
//						break;
//					}
//				}
				System.out.println("---------------------我是华丽的分割线---------------------");
				for (int index = 0; index < goodsId.length; index++) {
					for (Good good : goods) {
						if (goodsId[index].equals(good.getId())) {
							System.out.println("浏览过的商品id" + goodsId[index]);
							goodsAdvertisement.add(good);
							break;
						}
					}
				}
			}
			request.setAttribute("goodsAdvertisement", goodsAdvertisement);
			request.getRequestDispatcher("/advertisement.jsp").forward(request, response);
		}
		else{
			request.setAttribute("goods", goods);
			request.getRequestDispatcher("/goodsList.jsp").forward(request, response);
		}
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}
	
	// 向客户端浏览器中写入Cookie
	protected void setCookies(String goodId, HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		Cookie[] cookies = request.getCookies();
		boolean flag = false;
		boolean isRepeat = false;
		Cookie goodsCookie = null;
		if (cookies != null) {
			for (Cookie cookie : cookies) {
				String cookieName = cookie.getName();
				System.out.println("cookieName=" + cookieName + " httpOnly=" + cookie.isHttpOnly());
				if ("goods".equals(cookieName)) {
					// 有名字叫goods的Cookie
					flag = true;
					goodsCookie = cookie;
					break;
				}
			}
			if (flag) {
				String cookieValue = goodsCookie.getValue();
				String[] strCookies = cookieValue.split("-");
				System.out.println("------------------从名称为" + goodsCookie.getName() + "的Cookie中得到值" + cookieValue
						+ "------------------");
				for (String strCookie : strCookies) {
					if (strCookie.equals(goodId)) {
						isRepeat = true;
						break;
					}
				}
				if (!isRepeat) {
					// 商品id没有重复
					cookieValue += "-" + goodId;
					System.out.println("*********写入Cookie的值是" + cookieValue + "*********");
					/**
					 * 可以使用json格式写入到Cookie中,到时候可以读取出该Cookie,为
					 * 了偷懒简单点,我这里暂时不用json格式了,就使用-中划线分隔
					 */
					goodsCookie = new Cookie("goods", cookieValue);
				}

			} else {
				goodsCookie = new Cookie("goods", goodId);
			}
		} else {
			goodsCookie = new Cookie("goods", goodId);
		}
		if (!isRepeat) {
			goodsCookie.setMaxAge(24 * 60 * 60); // 设置在客户端(浏览器)中保存的时间
			response.addCookie(goodsCookie); // 写COOKIE
		}
	}

	protected String[] getGoodsId(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		Cookie[] cookies = request.getCookies();
		boolean flag = false;
		Cookie goodsCookie = null;
		String[] strCookies = null;
		if (cookies != null) {
			for (Cookie cookie : cookies) {
				String cookieName = cookie.getName();
				System.out.println("cookieName=" + cookieName + " httpOnly=" + cookie.isHttpOnly());
				if ("goods".equals(cookieName)) {
					// 有名字叫goods的Cookie
					flag = true;
					goodsCookie = cookie;
					break;
				}
			}
			if (flag) {
				String cookieValue = goodsCookie.getValue();
				strCookies = cookieValue.split("-");
			}
		}
		return strCookies;
	}
}

goodsList.jsp 商品信息列表页面

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:if test="${!(true eq requestScope.flag)}">
<%
response.sendRedirect(request.getContextPath() + "/Goods");
//request.getRequestDispatcher("/Goods").forward(request, response);
%>
</c:if>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>商品列表页面</title>
<link rel="stylesheet" type="text/css" href="css/body.css">
<link rel="stylesheet" type="text/css" href="css/mark.css">
<link rel="stylesheet" type="text/css" href="css/console.css">
<script type="text/javascript" src="js/console.js"></script>
<style type="text/css">
div {
	border-width: 3px!important; 
}

</style>
</head>
<body>
	<center>
		<h1>
		商品列表页面(goodsList.jsp页面)
		<a style="background-color: #8E388E; border-color: #8E388E;" href="${pageContext.request.scheme}://127.0.0.1:${pageContext.request.serverPort}/html5/Goods?operate=advertisement">
		广告页面
		</a>
		</h1>
		
		<c:forEach var="good" items="${requestScope.goods}" varStatus="status">
		<c:if test="${(status.index != 0 )&&(status.index % 4 == 0)}">
		<br><br>
		</c:if>
		<div class="testDiv3" style="width: 20%; height: 320px;display: inline-block;margin-left: 50px;">
		<br>
		<img title="${good.describe}" src="${good.imgPath}" style="width: 200px; height: 150px;">
		<br>
		商品:<font color="blue">${good.name}</font><br>
		价格:<font color="red" style="font-size: 24px;">¥${good.price}</font><br>
		描述:${good.describe}<br>
		<a href="${pageContext.request.contextPath}/Goods?operate=detail&id=${good.id}" target="_blank">商品详情</a>
		</div>
		</c:forEach>
		</center>
	
</body>
</html>

goodDetail.jsp商品详细信息页面

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>商品详细信息goodDetail.jsp页面</title>
<link rel="stylesheet" type="text/css" href="css/body.css">
<link rel="stylesheet" type="text/css" href="css/mark.css">
<link rel="stylesheet" type="text/css" href="css/console.css">
<script type="text/javascript" src="js/console.js"></script>
</head>
<body>
<center>
<h1>商品详细信息goodDetail.jsp页面</h1>
<div class="testDiv3">
<br>
		<img title="${requestScope.good.describe}" src="${requestScope.good.imgPath}" style="width: 200px; height: 150px;">
		<br>
		商品id:<font color="red">${requestScope.good.id}</font><br>
		商品:<font color="blue">${requestScope.good.name}</font><br>
		价格:<font color="red" style="font-size: 24px;">¥${requestScope.good.price}</font><br>
		描述:${requestScope.good.describe}<br>
		<a href="${pageContext.request.contextPath}${requestScope.returnPath}">返回</a><br>
</div>
</center>
</body>
</html>

advertisement.jsp广告页面

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>利用Cookie实现显示第三方广告的功能,我类似于百度的广告页面</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/body.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/mark.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/console.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/console.js"></script>
<style type="text/css">

.div1 {
	border-radius: 8px; /*把边框做成圆角*/
	border-color: blue;
	width: 200px;
	height: 150px;
	border-style: solid;
	border-width: 3px;
	background-color: #F0E68C;
	margin: 0 auto;
	text-align: center; width:16 %;
	overflow: hidden;
	margin-left: 50px;
	display: inline-block;
	cursor: pointer;
}
</style>
</head>
<body style="background-color: #AAAAAA;">
	<center>
	
	<%
		Cookie cookie = new Cookie("city", "ganzhouyudu");
		response.addCookie(cookie);
		out.println("参数=" + request.getParameter("age") + "<br>");
		out.println("服务器IP:" + request.getServerName() + "<br>");
		/*
		测试显示第三方广告的时候,浏览器必须设置成[接受第三方Cookie]才能测试,否则测试不了,你想想如果浏览器禁用了[接受第三方Cookie],那显
		示第三方广告的功能根本就没办法测试了
		*/
		Cookie[] cookies = request.getCookies();
		if (cookies != null) {
			for (int index = 0; index < cookies.length; index++) {
				out.println(cookies[index].getName() + " = " + cookies[index].getValue() + "<br>");
			}
		}
	%>
	<div id="showCookies" class="testDiv3" style="height: auto;"></div>
	<h3>
	<font style="color: red;">
	参数=${param.age}我是第三方web应用程序,我的项目名称是:${pageContext.request.contextPath},当前页是
	${pageContext.request.servletPath}
	<br>
	<a href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}${pageContext.request.servletPath}" target="_blank">
	我的项目地址是
	</a>
	</font>
	</h3>
		<h1>利用Cookie实现显示第三方广告的功能,我类似于百度的广告页面</h1>
		<h3>
			(利用iframe和Cookie来显示第三方的广告,只要在我们自己的网站或者是我们自己的web应用程序中嵌入一个iframe,iframe标
			签的src属性写第三方的广告地址即可)
		</h3>
		<h2>根据曾经浏览过的商品,动态生成的广告信息如下:</h2>
		<c:if test="${empty requestScope.goodsAdvertisement}">
		<font style="color: red;font-size: 25px;">您还未浏览过任何商品信息</font>
		<a target="_blank" href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/goodsList.jsp">浏览商品</a>
		</c:if>
		<c:forEach var="goodAdvertisement" items="${requestScope.goodsAdvertisement}" varStatus="status">
		<c:if test="${(status.index != 0 )&&(status.index % 3 == 0)}">
		<br>
		</c:if>
		<div class="div1" style="width: 20%; height: 320px;">
		<br>
		<a href="${pageContext.request.contextPath}/Goods?operate=detail&id=${goodAdvertisement.id}" target="_blank">
		商品详情<br><br><br><br><br>
		<img title="${goodAdvertisement.describe}" src="${goodAdvertisement.imgPath}" style="width: 200px; height: 150px;">
		</a>
		<br>
		商品id:<font color="red">${goodAdvertisement.id}</font><br>
		商品:<font color="blue">${goodAdvertisement.name}</font><br>
		价格:<font color="red" style="font-size: 24px;">¥${goodAdvertisement.price}</font><br>
		描述:${goodAdvertisement.describe}<br>
		</div>
		</c:forEach>
		
	</center>
</body>
<script type="text/javascript">

	window.onload = function() {
		showAllCookies();
	}

	//显示所有的Cookie
	function showAllCookies() {
		var divNode = document.getElementById("showCookies");
		divNode.innerHTML = document.cookie;
		divNode.innerHTML += "<br>" + '<font style="color: red;">' + "sessionId=${pageContext.session.id}" + "</font>";
	}
</script>
</html>

访问http://127.0.0.1:8888/html5/Goods这个url,Goods是个servlet,然后Goods这个servlet中,会查询商品信息的集合,然后转发到goodsList.jsp 商品信息列表页面


点击商品详情http://127.0.0.1:8888/html5/Goods?operate=detail&id=1308,仍然是提交到Goods是个servlet中处理,根据商品id,查询该商品的实体信息,然后转发到goodDetail.jsp商品详细信息页面



只要用户点击了某个商品详情,就会在Goods这个servlet中把该商品的id写入到用户的浏览器的Cookie中,如下图


因为我是为了测试,所以在把商品id写入到用户浏览器的Cookie中的时候,是用-中划线来追加的,其实可以用json,我这里为了简单和偷懒我就用-中划线来追加

我刚才浏览器了id为1308、1315、1325的这3个商品信息,所以浏览器中的Cookie信息如下


http://127.0.0.1:8888/html5/Goods?operate=advertisement会转发到advertisement.jsp广告页面


http://127.0.0.1:8888/html5/Goods?operate=advertisement也会提交到Goods这个servlet中处理,servlet中会去读取名称叫做goods的Cookie中的内容,读取到商品id,多个商品id就通过-中划线来拆分,然后找到这些商品id的实体信息,放在集合中,然后转发到advertisement.jsp广告页面

大家可以把http://127.0.0.1:8888/html5/Goods?operate=advertisement这个url认为是京东或者百度的广告页面(对于我们自己的web应用程序来说,该url地址即为第三方网站地址),该地址是根据Cookie(用户浏览商品记录)动态生成的广告页面!

好的,接下来是关键了,接下来看我们自己的web应用程序

我们自己的web应用程序的访问路径是http://localhost:8888/xml/showThirdParty.jsp,注意是localhost,不能写http://127.0.0.1:8888/xml/showThirdParty.jsp

showThirdParty.jsp页面中嵌入了一个iframe,

<iframe src="http://127.0.0.1:8888/html5/Goods?operate=advertisement" style="width: 100%; height: 300px;"></iframe>

showThirdParty.jsp页面

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>模拟百度第三方Cookie和iframe完成广告显示</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/body.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/mark.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/console.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/console.js"></script>
</head>
<body>
	<center>
	<h1>像百度(www.baidu.com)一样,利用Cookie,利用第三方Cookie和iframe完成广告显示</h1>
	sessionId=${pageContext.session.id}
		<h2>模拟百度,利用Cookie,利用第三方Cookie和iframe完成广告显示</h2>
		<h3>
		测试显示第三方广告的时候,浏览器必须设置成[接受第三方Cookie]才能测试,否则测试不了,你想想如果浏览器禁
		用了[接受第三方Cookie],那显示第三方广告的功能根本就没办法测试了
		</h3>
		<h3>
		还有一点需要注意:
		我们在测试的时候,需要把iframe标签的src属性的值设置成和我们自己的web应用程序的地址不一样,比如
		说我们在访问我们自己的web应用程序的时候是http://localhost:8888/xml/showThirdParty.jsp 那
		么iframe标签的src属性的值就不能是http://localhost:8888/html5/Goods?operate=advertisement,你可
		以写成http://127.0.0.1:8888/html5/Goods?operate=advertisement或者你可以写
		成http://IP地址:8888/html5/Goods?operate=advertisement,这样才能测试出第三方的Cookie的广告
		</h3>
		<h2>使用javaScript脚本语言来读取Cookie,顺便测试下能否读取到HttpOnly=true的Cookie</h2>
		<%
			Cookie cookie = new Cookie("city", "shenzhen");
			cookie.setMaxAge(30 * 24 * 60 * 60); //保存30天
			
			/*
			把Cookie的domain设置成百度[.baidu.com](经过测试,好像下面的2行代码没有效果,应该是不能
			在自己的web应用程序中把Cookie的domain设置成第三方的域)
			*/
// 			cookie.setDomain(".baidu.com");
// 			cookie.setPath("/");


// 			cookie.setDomain("localhost");
// 			cookie.setPath("/");


//在cookie中设置了HttpOnly属性=true,那么通过js脚本将无法读取到cookie信息,这样能有效的防止XSS攻击
			cookie.setHttpOnly(true);
			response.addCookie(cookie); //写COOKIE
			Cookie cookie2 = new Cookie("hobby", "football");
			response.addCookie(cookie2); //写COOKIE
			
		%>
		<hr>
		<h1>
		利用Cookie和iframe,嵌入第三方广告如下
		</h1>
		<iframe src="${pageContext.request.scheme}://127.0.0.1:${pageContext.request.serverPort}/html5/Goods?operate=advertisement" style="width: 100%; height: 300px;">
	 </iframe>
	 <hr>
		<h1>测试下onkeyup、onkeydown和onkeypress的区别</h1>
		测试onkeyup:<input type="text" id="test1" οnkeyup="testKeyUp()"><br><br>
		测试onkeydown:<input type="text" id="test2" οnkeydοwn="testKeyDown()"><br><br>
		测试onkeypress:<input type="text" id="test3" οnkeypress="testKeyPress()"><br><br>
		测试onkeyup、onkeydown和onkeypress:
		<input type="text" id="test4" οnkeyup="testKeyUp()" οnkeypress="testKeyPress()" οnkeydοwn="testKeyDown()"><br><br>
		<h3>
		在火狐浏览器测试得出结论:
		onkeyup是在键盘按下去并松开后执行
		onkeydown在键盘下去就会执行,不管是数字键还是字母键还是任何的功能键(所有键)
		onkeypress在键盘下去就会执行,不管是数字键还是字母键还是任何的功能键(所有键)
		onkeydown和onkeypress效果是一样的
		</h3>
		<h3>
		在谷歌浏览器测试得出结论:
		onkeyup是在键盘按下去并松开后执行
		onkeydown在键盘下去就会执行,不管是数字键还是字母键还是任何的功能键(所有键)
		onkeypress在键盘下去就会执行,但是按下功能键(F1到F12还有下箭头键下箭头键等这些功能键)不会执行
		onkeydown和onkeypress效果是不一样的
		</h3>
	</center>
	 
</body>
<script type="text/javascript">
function testKeyUp(){
	alert("我是onkeyup");
}

function testKeyDown(){
	alert("我是onkeydown");
}

function testKeyPress(){
	alert("我是onkeypress");
}

</script>
</html>


大家看下效果图就明白了:先把浏览器中的所有的Cookie全部清除。


再去第三方网站http://127.0.0.1:8888/html5/Goods上浏览了id为1308、1315、1325的这3个商品信息

再看看浏览器中的Cookie


浏览器地址栏输入http://localhost:8888/xml/showThirdParty.jsp回车


在我自己的web应用程序的showThirdParty.jsp页面中,居然显示了我刚才在第三方网站上查看过的商品信息!为什么呢?无疑,就是在我自己的web应用程序中使用了iframeiframe的src=http://127.0.0.1:8888/html5/Goods?operate=advertisement,此时,iframe又去请求了src中的url地址,该url地址就是第三方网站的地址,你可以理解成京东或者百度的广告页面地址,该url地址就会去读取Cookie中的商品id,Cookie中就记录了我曾经在京东网站上浏览过的商品的id,所以就在我自己的web应用程序的showThirdParty.jsp页面中看到了精准的广告推送!以后自己开发的web应用程序上线后,如果想要在自己的页面中放置京东或者百度的广告的话,就可以叫百度或者京东把那个动态广告的页面地址给你,然后用iframe的src="京东或者百度的广告url",最后把iframe嵌入到你自己web应用程序的页面中即可!

问大家一个问题,如果我不想在新浪,网易,腾讯看新闻的页面中看到百度京东那些烦人的广告推送怎么办呢?既然大家都知道原理了,很简单,我们用浏览器把所有的Cookie清空掉就可以了,这样就看不到精准的广告了,但是广告还是会有,只是广告不是精准的广告了,其实你浏览器中不清空Cookie也可以,把接受第三方 Cookie这一项给禁用掉就行了!


把接受第三方 Cookie这一项给禁用掉,就相当于在访问我自己的web应用程序的时候,请求http://localhost:8888/xml/showThirdParty.jsp的时候,

showThirdParty.jsp页面中嵌入了iframe的src="百度或京东的广告页面",在请求

iframesrc="百度或京东的广告页面"的时候,百度或京东的广告页面读取不到Cookie信息了!自然就无法在

嵌入第三方广告的页面中看到第三方的精准广告了,记住还能看到广告,但是看到的不是精准广告!


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值