This is the 9th day of my participation in the August More Text Challenge

1. Background: Multiple VUE front-end projects need to be combined into a large system, which includes the jump from the main system to subsystems and the transfer of values, especially the transfer of user information or user token, as shown below:

2. Problem: when using window.open() and window.location.href, the address bar of the new page will display parameters as follows:

http://127.0.0.1:8071/?t= “dddddasdasdasda”. \ This will expose the parameter content, users can modify the address bar parameters. If the submitted parameter modification may cause service errors, you can even skip permission verification to implement the original permission.

3. Try to solve directions:

For example, js encryption and decryption methods escape() and unescape() are used to combine the user name and password into an object or string and pass it as a parameter

This parameter value is encrypted, but the address is correct, with the parameters have been opened, as long as the address is correct then you can use this address to open, directly into the background management page, this is and dangerous, and the other people all don’t need to decrypt your true value, may now 3 years old children can copy and paste, Therefore, this method is not desirable, must be hidden, or better still, the whole jump address does not need to be displayed

3.2 According to the thinking of 3.1, we decided to hide the parameters

The methods used include post submission and form assembly to pass parameters and jump, but failed, can not jump out of the system’s login interception, simple code is shown as follows:

(1) Write parameters into the form and submit it by constructing the form. The code is as follows:

(function () {/ var/set namespace CodeSTD = window. CodeSTD | | {}; window.CodeSTD = CodeSTD; * @author shaohsuai * @param config Object * <p>url: Form Action, </p> * <p>params: K -v </p> * @return Form */ codestd. Form = function(config){ config = config || {}; var url = config.url, method = config.method || 'GET', params = config.params || {}; var form = document.createElement('form'); form.action = url; form.method = method; form.target = "_blank"; for(var param in params){ var value = params[param], input = document.createElement('input'); input.type = 'hidden'; input.name = param; input.value = value; form.appendChild(input); } return form; } })() function f_status(id){ //window.open("${ctx}/sbgl/sbgl! getHostStautsInfo? hostid="+id); var form = new CodeSTD.form({ url:'${ctx}/sbgl/sbgl! getHostStautsInfo', method:'POST', params:{ hostid:id, } }) $(form).submit(); form = null; }Copy the code

(2) Submit parameters by Post, and the main idea is as follows:

Function httpPost(URL, PARAMS) {var temp = document.createElement("form"); temp.action = URL; temp.method = "post"; temp.style.display = "none"; for (var x in PARAMS) { var opt = document.createElement("textarea"); opt.name = x; opt.value = PARAMS[x]; temp.appendChild(opt); } document.body.appendChild(temp); temp.submit(); return temp; }Copy the code

3.3 Try scheme 3, save the user information in window.localstorage or shared cookie, and then judge whether there is an object when other projects log in. If there is an object, jump to open the project directly, and there is no need to log in in the subsystem again

But this is buggy

  • Window.localstorage is not shared between subsystems and is only used within each system
  • In the case of the user does not know the data stored in the cookie, skip login this method is also extremely insecure, as long as the user opens the system page do not need to log in, even if we in the main system of cookie strictly control, cookie can also solve the problem of kua sub-domain, but it is not desirable, too dangerous

4. Final solution

Using postMessage Window.addeventListener The master system distributes user information and the subsystem receives the master system information to obtain user parameters, so as to obtain the master system user information when accessing the subsystem and skip login

The demo about PostMessage is as follows, the company code will not be posted here, it is confidential, please understand, if necessary, you can leave a message below, also add my public account to leave a message to me, I will reply to you when I see

Outter. HTML home page

<! DOCTYPE HTML > < HTML lang="zh-cn"> <head> <meta charset="UTF-8"> <title>outter</title> </head> <body> < div id = "getMessage" > < / div > < iframe SRC = "http://192.168.0.214:8088/test/inner.html" frameborder = "1" > < iframe > < hr > To pass in internal information: <input type="text" id="out"> <input type="button" value=" id="but"> <script> var message=document.getElementById("getMessage"); var text=document.getElementById("out"); window.addEventListener("message",function(e){ if(e.data! =null){ message.innerText=e.data; }}); Document. The getElementById (" but "). The onclick = function () {. Window frames [0]. PostMessage (text) value, "http://192.168.0.214:8088");  text.value=""; } </script> </body> </html>Copy the code

Inner. The HTML page

<! DOCTYPE HTML > < HTML lang=" en-cn "> <head> <meta charset=" utF-8 "> <title>inner</title> </head> <body> <div id="getMessage"></div> <hr> <input type="text" id="text"> <input type="button" value=" id="but" message=document.getElementById("getMessage"); var text=document.getElementById("text"); Document. The getElementById (" but "). The onclick = function () {window. The parent. PostMessage (text) value, "http://192.168.0.214:8088"); text.value=""; } window.addEventListener("message",function(e){ if(e.data! =null){ message.innerText=e.data; }}); </script> </body> </html>Copy the code

This example, which includes the main system and the subsystem, is most representative and is posted here

Startup method:

Create outter. HTML and inner. HTML pages respectively, copy the contents into them, change the IP and port to your own IP and tomcat port of your computer, and then create a test folder under tomcat WebApp directory, whatever name you want. I’m going to call test, and I’m going to put in those two HTML files, and I’m going to start Tomcat

As shown in figure:

​

Once started, you can see sample values for the home page and child pages, which is very simple

5. More: See PostMessage for more information about how to use PostMessage

6. Step on pits:

The postMessage fetch problem is not worth it

It is because when the main page sends the message, the sub-page has not been generated and cannot accept the parameters. You can use a click event to drive the data to be sent again after the main page is loaded, so it is ok, or use a timer to solve the problem

—The End—-