JavaScriptcookie cross-origin access: Ad ad_javascript skills

This article mainly introduces information about advertisement promotion of JavaScriptcookie cross-origin access. For more information, see the preceding method, another common feature is to display some e-commerce advertisements, which will scroll through the products you have visited or products promoted to you by Lenovo.

For example, A webpage A displays two types of advertisement:

In an advertisement in the East, all the items shown in the advertisement were visited and related items were pushed.

The advertisement of a certain treasure is basically the same as the presentation method.

When you access a product of a fortune in the East China Region, the information is put into the cookie and displayed based on the product information in the cookie.

The problem arises.

The website where A Web page is located and the website of A fortune in the East region must be two independent domain names. Therefore, the cookies that access A fortune in the East region cannot be obtained because they are different from each other.

It is impossible and inappropriate to present product information on Webpage.

Of course, we need to present product information through cross-origin. The problem to be solved is:

1. The cookie cannot be obtained in the script generated by the cross-origin service. It can only be obtained on the Cross-origin server.

Why ?, The script generated by the cross-origin service will eventually run on webpage A. The cookie accessed by the script generated by the cross-origin service can only be the cookie of the site where webpage A is located, which is incorrect.

2. The cross-origin service background can receive cookies

The answer is yes. As long as the browser initiates a request to a domain name/address, the corresponding cookie will be taken over.

So let's implement a simple demo.

Demo architecture: node. js + express

1. A cross-domain service can be understood as an e-commerce company. It provides a page for inputting product information, simulating accessed items, inputting them, and saving them to cookies.

Page

The Code adds an expiration time to the input and stores it in the cookie. Of course, you can simply compile a code first.

SetCookie
 
 Items viewed
Item 1
Product 2
Item 3
Product 4
Script function saveInCookie () {// all item information var eleS1 = document. getElementById ('s1'); var eleS2 = document. getElementById ('s2 '); var eleS3 = document. getElementById ('s3'); var eleS4 = document. getElementById ('s4 '); // generate the parameter var date = new Date () that expires 24 hours later; var expiresMSeconds = 3*24*3600*1000; date. setTime (date. getTime () + expiresMSeconds); // set all product information to the 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 

2. on the Cross-origin service, write a piece of code for the server to generate the script. When the script is generated, extract the data in the cookie carried by the browser and then compress it into the script.

Here, the cookie is retrieved through the request object. The methods may be different on other platforms, but the principles are the same. The browser will bring the cookie.

Router. get ('/ad', function (req, res) {// concatenate a JS string to complete the html Tag printCookies (req. cookies); var s = 'document. write (\'
Product advertisement '; // extract all the items in the cookie and splice them into the script string for (var p in req. cookies) {s + ='
'+ Unescape (req. cookies [p]) +'
';} S + ='
\ ');'; Console. log (s); res. setHeader ('content-type', 'text/plain cirpt; 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 ('*******************');}

3. Perform A script request for the cross-origin service on Webpage A of the local website.

The script tag references the address of the script provided on the Cross-origin service.

Test