The introduction

  • Origin of the event
  • Technical solution
  • Browser Cookie Problem
  • The Safari browser on ios is faulty
  • Wechat web page authorization problem
  • Final technical implementation

1. The demand originates from the business. We hope that our platform can provide a JS SDK package for the third party to authorize and use

Details:

  • When tuning up, need to tune up the popbox (said to experience good)
  • Need to support mobile browser and wechat browser
  • The leader said he wanted it done quickly
  • MMP in heart

2. Communicate and confirm technical solutions

  • 1, the front-end JS directly calls the background interface (unsafe, easy to expose the interface brush, secondly can not get whether the user has logged in, each time need to fill in the mobile phone number login) ×
  • 2, refer to the Facebook JS login SDK, call up an IFrame, iframe nested PHP page, to handle authorization and login logic (need iframe to communicate with the page)
  • 3. Finally, Plan 2 is selected

3. Iframe opens the failure of cookie writing of 3-party link

The main reason for this is that chrome has been upgraded to SameSite=Lax by default (to prevent CSRF attacks).

Three values supported by SameSite

  • Strict
  • Lax
  • None
Request type The sample normal Lax
link can can
preload can can
GET the form can can
POST form can Can not be
iframe can Can not be
AJAX $.get(“…” ) can Can not be
Image can Can not be

Solution: after PHP7.3, setcookie supports setting the value of SameSite, but it is very possible that we are 7.2, version will not be easily upgraded,

You can only copy cookie methods yourself

Easily set through the header

  function setnewcookie($name.$value.$options){
    $expire = isset($options['expires'])?$options['expires'] : 0;
    $path = isset($options['path'])?$options['path'] : ' ';
    $domain = isset($options['domain'])?$options['domain'] : ' ';
    $secure = isset($options['secure'])? boolval($options['secure') :false;
    $httponly = isset($options['httponly'])? boolval($options['httponly') :false;
    $samesite = isset($options['samesite'])?$options['samesite'] : ' ';

    $expire = 0 < $expire ? (int) $expire : 0;
    $date = gmdate('D, d-M-Y H:i:s T'.$expire);
    $maxAge = ($expire-time()>0)?$expire-time():0;
    $path = empty($path)?'/' : $path;
    $cookie = sprintf("Set-Cookie:%s=%s; expires=%s; Max-Age=%d; path=%s; domain=%s; secure=%d; HttpOnly=%d; SameSite=%s", urlencode($name),urlencode($value), $date.$maxAge.$path.$domain.$secure.$httponly.$samesite);
    //dump($cookie); exit;
    header($cookie);
}
Copy the code

Github found an encapsulated class

  https://github.com/ovunctukenmez/SameSiteCookieSetter
Copy the code

Iframe access cookie writing problem resolved

4. The ios end has its own browser pit

  • After the last cookie pit is fixed, a new problem occurs. Safari on ios suddenly says that cookies cannot be written, so users can only log in to the login page
  • Did a lot of research on the Internet, MMP of Apple
  • Solution: In older versions, if a third party had any cookies first, it could be written to (probably a bug). The latest version no longer supports this method, unless safarir browser Settings are turned off to prevent cross-site tracking
  • And the boss said a good meal, said the concubine can not be ignored

5. Wechat web page authorization

  • One problem is always followed by another. There were also problems with wechat web page authorization
  • You can’t load iframe in Android, it’s just a blank screen
  • The ios side just jumped the page
  • You can only talk to the leader
  • Related articles

Wechat web page authorization iframe cannot be opened

6. Final solution

All go browser authorization

7. Something that might be useful

If ios finds that it can’t write cookies, try writing a cookie in the third party first

At the end

Through this climb pit road, learned a lot of new knowledge, development of the road and cherish