Kuki JavaScript akses merentas domain pengiklanan promotion_javascript kemahiran-tutorial js-php.cn

Kuki JavaScript akses merentas domain pengiklanan promotion_javascript kemahiran

WBOY

Lepaskan： 2016-05-16 15:04:39

asal

2096 orang telah melayarinya

Dalam aplikasi praktikal, penggunaan merentas domain komponen ramalan cuaca boleh dilaksanakan menggunakan kaedah di atas satu lagi kaedah yang biasa adalah untuk memaparkan iklan daripada syarikat e-dagang tertentu Iklan ini akan menatal produk yang telah anda lawati atau persatuan anda ingin mengesyorkan kepada produk anda.

Sebagai contoh, dua jenis iklan dipaparkan pada halaman web A:

Beberapa perkara yang dipaparkan dalam iklan Dongdong telah dikunjungi oleh Didi dan perkara yang berkaitan telah disyorkan

Iklan produk tertentu pada asasnya dipersembahkan dengan cara yang sama.

Apabila mengakses produk Dongmoubao, maklumat akan diletakkan dalam kuki, dan pembentangan akan berdasarkan maklumat produk dalam kuki.

Inilah masalahnya.

Tapak di mana halaman web A terletak dan tapak Dongbao mestilah dua nama domain bebas Apabila anda mengakses kuki Dongbao pada halaman web A, anda tidak boleh mendapatkannya kerana ia adalah daripada sumber yang berbeza, kemudian

Adalah mustahil dan tidak sesuai untuk membentangkan maklumat produk pada halaman web A itu sendiri.

Sudah tentu, maklumat produk mesti dibentangkan secara merentas domain Masalah yang perlu diselesaikan ialah:

1. Kuki tidak boleh diperoleh daripada skrip yang dihasilkan oleh perkhidmatan merentas domain Kuki hanya boleh diperoleh daripada pelayan merentas domain

Kenapa? , skrip yang dijana oleh perkhidmatan merentas domain akhirnya akan dijalankan pada halaman web A. Kuki yang diakses dalam skrip yang dijana oleh perkhidmatan merentas domain hanya boleh menjadi kuki tapak di mana halaman web A terletak, yang salah

2. Latar belakang perkhidmatan merentas domain boleh mendapatkan kuki

Jawapannya adalah ya selagi penyemak imbas membuat permintaan kepada nama/alamat domain tertentu, ia akan membawa kuki yang sepadan.

Jadi, mari kita laksanakan demo ringkas

Seni bina demo: node.js+express

1. Dalam perkhidmatan merentas domain, ia boleh difahami sebagai syarikat e-dagang yang menyediakan halaman untuk memasukkan maklumat produk, mensimulasikan perkara yang telah dilawati dan menyimpannya ke kuki selepas input.

Halaman

Kod ini adalah untuk menyimpan input serta masa tamat tempoh ke dalam kuki Sudah tentu, cukup kodkannya dahulu.

<!DOCTYPE html>
<html>
<head>
<title>setCookie</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<h1>看过的商品</h1>
<div>
<span>商品1</span><input id="s1">
</div>
<p></p>
<div>
<span>商品2</span><input id="s2">
</div>
<p></p>
<div>
<span>商品3</span><input id="s3">
</div>
<p></p>
<div>
<span>商品4</span><input id="s4">
</div>
<p></p>
<div>
<input id="b" type="button" value="保存进cookie" onclick="saveInCookie();">
</div>
<script>
function saveInCookie(){
//所有商品信息
var eleS1=document.getElementById('s1');
var eleS2=document.getElementById('s2');
var eleS3=document.getElementById('s3');
var eleS4=document.getElementById('s4');
//生成24小时后过期的参数
var date=new Date();
var expiresMSeconds=3*24*3600*1000;
date.setTime(date.getTime()+expiresMSeconds);
//商品信息全部设置到cookie中
document.cookie='s1='+escape(eleS1.value)+";expires="+date.toGMTString();
document.cookie='s2='+escape(eleS2.value)+";expires="+date.toGMTString();
document.cookie='s3='+escape(eleS3.value)+";expires="+date.toGMTString();
document.cookie='s4='+escape(eleS4.value)+";expires="+date.toGMTString();
alert(document.cookie);
}
</script>
</body>
</html>

Salin selepas log masuk

2. Pada perkhidmatan merentas domain, tulis sekeping kod untuk menjana skrip pada bahagian pelayan Apabila menjana skrip, nyahkod data dalam kuki yang dibawa oleh penyemak imbas dan masukkannya ke dalam skrip.

Di sini, kuki diambil melalui objek permintaan Kaedah ini mungkin berbeza pada platform lain, tetapi prinsipnya adalah sama, dan penyemak imbas akan membawanya.

router.get('/ad', function (req, res) {
//拼接一JS字符串，完成向html页面中输出html标记
printCookies(req.cookies);
var s = 'document.write(\'<div style="background-color:red;width:10rem;height:10rem">商品广告';
//将cookie中所有的商品取出，拼到脚本字符串中
for (var p in req.cookies) {
s += '<div>' + unescape(req.cookies[p]) + '</div>';
}
s+='</div>\');';
console.log(s);
res.setHeader('content-type', 'text/javascirpt;charset=utf-8');
res.write(s);
res.end();
});
function printCookies(cookies) {
console.log('******cookies******');
for (var p in cookies) {
console.log(p + '=' + unescape(cookies[p]));
}
console.log('*******************');
}

Salin selepas log masuk

3. Buat permintaan skrip kepada perkhidmatan merentas domain dalam halaman web A tapak web tempatan.

Antaranya, alamat skrip yang disediakan pada perkhidmatan merentas domain dirujuk melalui tag skrip.

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="/stylesheets/style.css"></head>
<body>
<script src="http://localhost:3001/ad"></script>
<h1>航班信息</h1>
<h4>航班号：MU532</h4>
<h4>起飞：北京</h4>
<h4>抵达：上海</h4>
</body>
</html>

Salin selepas log masuk

Selepas halaman dijalankan, seperti yang ditunjukkan dalam gambar di bawah, maklumat produk yang dilawati akan disenaraikan, yang kelihatan seperti iklan kecil.

Itu sahaja, selesai.

Ini adalah semua pengetahuan yang berkaitan tentang akses merentas domain kuki JavaScript dan promosi pengiklanan saya harap ia akan membantu semua orang!