Why upgrade HTTPS

  1. Protect the security of user data during transmission.
  2. The problem of operator network hijacking is becoming more and more serious. All kinds of advertising insertion, forced skipping App download and other means seriously affect user experience. If there is illegal content or users are cheated, Koala will also be implicated.
  3. Apple requires iOS apps to be forced to enable HTTPS from January 1, 2017, otherwise they will not be allowed to be listed on the App Store. To ensure that HYPERtext Transfer Protocol Secure (HTTPS) enabled applications run properly on all platforms, you must enable HTTPS for all sites opened by the webView inside the application.
  4. As web standards change, more and more new features (such as Service workers) require sites to turn on HTTPS.

Second, the target

  • Adjust koala front-end code, so that it can support HTTPS, HTTP access;
  • It is carried out synchronously with daily development and does not affect daily development;
  • Steadily enable HTTPS and support HTTP dual-protocol to avoid HTTPS online problems to the maximum extent.

Third, what adjustments have been made to the front end

The upgrade scope is all the sites of koala front desk, including WAP, Web and other projects, with a large amount of historical code; It is mainly to transform the original dead HTTP protocol into a relative protocol, so that it can be compatible with HTTP and HTTPS services;

1. Modify the resource protocol on the page

Page resources consist of several parts: static resources (JS, CSS, UI images, videos, etc.), and dynamic content modification

  • Static resource
    • Js: Adjusts HTTP resource references within JS to relative protocols, but data passed to external applications is automatically completed to the protocol used by the current page according to location.protocol; Secondly, adjust the reference of JS page to make JS resource reference to relative protocol.
    • CSS: Adjust the reference URL of resources such as images in MCSS to the relative protocol. Adjust page-facing CSS references to relative protocols;
    • Package adjustment: Adjust the configuration of the package tool to output static resources as relative protocols.
    • Pictures: Adjust thumbnail functions in JS and FTL to distinguish koala and NOS pictures, determine whether they support HTTPS to perform corresponding thumbnail processing, and prevent external pictures that do not support HTTPS from being displayed. Find and replace the hard-coded image tag SRC attribute throughout the project;
    • External library adjustment: For example, some modules or tools of NEJ think that the URL is not an absolute address when it is changed to a relative protocol, and an error will be reported when it is resolved according to the relative protocol, which will lead to resource loading problems; For example, the file upload function, when fallback to Flash scheme, flash information is written to HTTP, also made adjustments;
  • Dynamic content

    Back-end to data, front-end display type of content:
    • Text details: match img and video tags in text details with re, and replace HTTP protocol with relative agreement;
    • Page internal interpolation output: adjust JS and FTL thumbnail filters, add filters for images without filters and other resources, automatic relative protocol processing;
  • Page jump As part of the operating configuration page, are direct links to configure the HTTP, users click on the page link, it’s easy to jump back to HTTP, cannot be used for a long time under the HTTPS, so when we are in a tag of the page click automatically according to the current page agreement, adjust a href attribute of the agreement for the current labels, to support the normal jump.

2. Adjust CSP rules

The original CSP rules limit the resources that can be loaded inside the page, and the protocol must be always. However, it is inevitable to ease the content when HTTPS is launched. Therefore, the rules are added in THE CSP to allow the browser to load mixed content (only images and videos).

3. External association adjustment

  • Wechat Pay: Adjust the wechat pay background registration of secure domain name information, add HTTPS URL, make it support dual protocol; However, this adjustment should not be made during peak business hours, otherwise online payment may be affected.

Iv. Upgrade process

Here are just the main steps, with more details:

  1. The front end modifies the dual protocol support after the code line, and lets the CDN support HTTPS
  2. Enable dual-protocol on the Intranet for internal trial in a small scale
  3. The online dual-protocol function is enabled, but HTTPS forcible forwarding is not enabled
  4. Online Feature Level Grayscale enabled HTTPS, allowing users to start using HTTPS from some pages
  5. All let go

Five, follow-up other can do

  1. H2 live, already in progress, internal testing will start soon
  2. Domain of convergence
  3. Other optimizations etc.

By the