Front-end safety protection

Security skill 1: Do not abuse Storage, add Token to cookie and do HTTPOnly, Samesite, secure restrictions

Scene reappear: today try, in Chrome and Firefox open their own project website, first Chrome login, will its sessionStorage all data, copy again, put on Firefox
Result: Refresh the site without logging in (you can also try your own site)
Dangerous vulnerability: When someone uses cross-site scripting to gain access to your locally cached data, they can gain access to your site without requiring account secrecy
Analysis: This is because the login status information such as token is stored in the session storage
Solution:
- Because the local cache localStorage or sessionStorage, there is no encryption or restriction function, can use JS scripts to obtain storage data at will, and then exist once the cross-site script attack is successful GG.
- And the client data storage scheme, there is cookie technology, and cookies are being limited options, can limit whether can be read.
- Of course, the front end only needs to configure the Credentials, and there is no need to operate cookies. The set-cookies in the response header sent from the back end are automatically sent together with the cookies in the next HTTP request header.
  - Cookie Main configuration items:
    - httpOnly: true/false;
      - Cookies with the HttpOnly attribute set to true cannot be accessed using JavaScript via the Document.cookie attribute, XMLHttpRequest, and Request APIs to protect against cross-site scripting attacks.
    - secure: true/false;
      - A cookie with a secure property is sent to the server only if the request uses SSL and HTTPS.
    - sameSite: None/Strict/Lax;
      - The SameSite property prevents third-party cookies from being sent along with cross-domain requests, preventing cross-site request forgery attacks (CSRF) and reducing security risks.
      - Note: IfsameSiteAttribute values forNone, the cookiesecureMust betrueOtherwise, blocks are rejected by the client and cookies cannot be written
Extended knowledge: XSS & CSRF
- XSS cross-site scripting attack means to steal user information
  - Non-persistent XSS vulnerability attack
    - By URL (similar to:https://xxx.com/xxx?default=<script>alert(sessionStorage)</script>) to steal data by injecting executable script code
  - Persistent XSS vulnerability attack
    - Form submission, the submission of content into the database for saving, the front end of the page to get the back end read from the database of the injection code, it happens to render the execution, such as in a text field or rich text input<script>alert(sessionStorage)</script>
  To defend against the above two XSS attacks, generally escape characters or set CSP whitelists
- CSRF: Cross-site request forgery
  - There are three conditions for completing a CSRF attack:
    1. The user has logged in to site A and logged the cookie locally
    2. Without logging out of site A (that is, when the cookie is in effect), the user visits site B, which is A lure hazard provided by A malicious attacker (site B requires access to site A).
    3. Site A does not do any CSRF defense
  CSRF defense: Cookie SameSite, Referer Check, Anti-CSRF Token, and verification code

Safety Skill 2: Code obfuscation compression:

For code obfuscation compression using Vue, plug-ins are availableuglifyjs-webpack-pluginorterser-webpack-plugin
Vue-cli3 packs compressed, obfuscated, and uncommented reference documents

Security skill 3: JS signature rule encryption

Scenario case Reference: can’t solve the front-end encryption AGAIN I eat shi
- Personally tested the method of this tough person. Although the encryption rules and field parameters of this Tmall website have been changed, the acquisition process remains the same. Debug gets the encryption rules rsaPassword and local. e, and can obtain the value of Password2
Problem: since can be cracked, want you to encrypt why use?
- Although the front end after confusion and compression, as well as function encryption, still can not completely and effectively protect the code, but can improve the difficulty of attackers to attack, make it increase the cost of attackers, rather than directly climb js script can know the encryption rules at a glance, then our purpose of protection has been achieved

JS signature rule encryption

Although the front end is confused and compressed, it can still be searched by the DEBUG step by step to obtain the corresponding generation rule of the signature, as in the previous case. Therefore, in order to add obstacles to the attacker, so that the attacker can see “a pile of gibberish”, can not see any actual content, further encryption of the signature rule function is a necessary means of protection!

Encryption mode: One or more encryption modes are used at the same time (the encryption rules of the front and back ends are the same as those of the signatures).
1. Base64:window.btoa / window.atob
2. md5: hex_md5 / b64_md5 / str_md5(Encryption is not reversible)
3. Sha1 (Encryption irreversible)
4. escape
5. AES
6. …

Other encryption methods:JsEncrypto encryption script tool

With this tool, you can tweak it for your current project, encrypt your code more deeply, or even encrypt your entire script, if you don’t care about server bandwidth pressures for security.

Example:

Sign rule function before encryption:

function sign(obj, util, md5, APP_SECRET) {
   let str = util.addStr(util.objKeySort(obj));
   str = encodeURIComponent(str);
   str = str.replace(/\'/g."% 27");
   str = str.replace(/ \! /g."% 21");
   str = str.replace(/\*/g."%2A");
   str = str.replace(/@/g."% 40." ");
   str = str.replace(/\(/g.28 "%");
   str = str.replace(/\)/g."% 29");
   str = APP_SECRET + str.toUpperCase() + APP_SECRET;
   str = md5.hex_md5(str);
   return str;
}
Copy the code

The encrypted sign rule function:

let dF = new Function('return '+ unescape('%66%75%6E%63%74%69%6F%6E%20%64%46%28%73%29%7B%76%61%72%20%73%31%3D%75%6E%65%73%63%61%70%65%28%73%2E%73%75%62%73%74%72%2 8%30%2C%73%2E%6C%65%6E%67%74%68%2D%31%29%29%3B%20%76%61%72%20%74%3D%27%27%3B%66%6F%72%28%6C%65%74%20%69%3D%30%3B%69%3C%7 3%31%2E%6C%65%6E%67%74%68%3B%69%2B%2B%29%74%2B%3D%53%74%72%69%6E%67%2E%66%72%6F%6D%43%68%61%72%43%6F%64%65%28%73%31%2E%6 3%68%61%72%43%6F%64%65%41%74%28%69%29%2D%73%2E%73%75%62%73%74%72%28%73%2E%6C%65%6E%67%74%68%2D%31%2C%31%29%29%3B%72%65%7 4%75%72%6E%28%75%6E%65%73%63%61%70%65%28%74%29%29%3B%7D'()))let sign = new Function('return '+ dF('kzshynts*75xnls*7%3Dtgo*7H*75zynq*7H*75ri%3A*7H*75FUUdXJHWJY*7%3E*75*%3CG*5F*75*75qjy*75xyw*75*8I*75zynq3fiiXyw*7%3Dzyn q3tgoPj%7EXtwy*7%3Dtgo*7%3E*7%3E*8G*5F*75*75xyw*75*8I*75jshtijZWNHtrutsjsy*7%3Dxyw*7%3E*8G*5F*75*75xyw*75*8I*75xyw3wjuqf hj*7%3D4*%3AH*7%3C4l*7H*75*77*7%3A7%3C*77*7%3E*8G*5F*75*75xyw*75*8I*75xyw3wjuqfhj*7%3D4*%3AH*764l*7H*75*77*7%3A76*77*7%3 E*8G*5F*75*75xyw*75*8I*75xyw3wjuqfhj*7%3D4*%3AH/4l*7H*75*77*7%3A7F*77*7%3E*8G*5F*75*75xyw*75*8I*75xyw3wjuqfhj*7%3D4E4l*7 H*75*77*7%3A95*77*7%3E*8G*5F*75*75xyw*75*8I*75xyw3wjuqfhj*7%3D4*%3AH*7%3D4l*7H*75*77*7%3A7%3D*77*7%3E*8G*5F*75*75xyw*75* 8I*75xyw3wjuqfhj*7%3D4*%3AH*7%3E4l*7H*75*77*7%3A7%3E*77*7%3E*8G*5F*75*75xyw*75*8I*75FUUdXJHWJY*750*75xyw3ytZuujwHfxj*7%3 D*7%3E*750*75FUUdXJHWJY*8G*5F*75*75xyw*75*8I*75ri%3A3mj%7Ddri%3A*7%3Dxyw*7%3E*8G*5F*75*75wjyzws*75xyw*8G*5F*%3CI5'()))Copy the code

Extension: The role of Token, Sing and encryption
- Token functions:
  - Identifies the user
- The function of signature:
  - Ensure data security during API interface communication and verify whether insecure fields are submitted to prevent information from being tampered or forged
- What encryption does:
  - Encrypts data or code so that the plain text is turned into dark text so that an attacker can’t see anything real

Code vulnerability scan optimization

Security has no silver bullet, and werewolves are still rampant

Vue security
- Vue security official document
NPM third-party dependency security risks

Node relies on the security scan tool reference document
- [email protected] features:npm audit
  1. npm auditRequires the current project to existpackage.jsonandpackage-lock.jsonFile.
    - If these two files are not available, they will be reported accordinglyEAUDITNOPJSONandEAUDITNOLOCKError message
    - generatepackage.jsonFile:npm init
    - generatepackage-lock.jsonFile:npm i --package-lock-only
  2. npm auditRelevant command
    1. NPM audit [- json | — parseable] : default output table format, – json output json format, parseable plain text output
      - The first line of the figure below:
        
        Severity: There are four levels: Critical, High, Moderate, Moderate
        
        Description: Describes the vulnerability
      - Package: which Package has a problem
      - Patched in: Patched. Which versions can fix the vulnerability version range
      - Dependency of: Which package in your project depends on the package in question
      - Path: The dependent Path between this package in the project and the package in question
      - More Info: Link to security report for More details on this issue
      - NPM audit Official document: about-audit-reports
      - NPM Audit Official document: Auditing Package Dependencies
      Note 1: The NPM audit command is available at npm@6. To upgrade, run NPM install npm@latest -g. Note 2: NPM Audit checks for direct dependencies, devDependencies, bundledDependencies, and optionalDependencies, but not peerDependencies.
      
      Note 3: NPM audit command on taobao mirror does not support the use, must be the beginning of NPM original https://registry.npmjs.org/.
    2. npm audit fix
      - npm aduit [fix]Scans and automatically updates to semver-compatible versions to eliminate vulnerabilities
    3. npm audit fix --force
      - --forceForce updates to secure versions, even if semantic Versioning is not compatible
      - However, it may not be able to help you fix all the vulnerabilities. Some dependencies need to be manually installed or uninstalled as prompted by Audit
      - Sometimes the restored dependencies do not match the current project and crash, so be sure to make a backup before fixing for rollback
    Note: after NPM audit fix [–force] is forcibly repaired, remember to re-load the dependencies of NPM I, and then re-run the project NPM run dev to avoid the project failure due to dependency loss
- NPM commands:
  - View the current NPM source:npm config get registry
  - Configure the NPM source:
    - Original image: NPM config set registry at https://registry.npmjs.org
    - Taobao mirror: NPM config set registry at https://registry.npm.taobao.org

Security skill 1: Do not abuse Storage, add Token to cookie and do HTTPOnly, Samesite, secure restrictions

Safety Skill 2: Code obfuscation compression:

Security skill 3: JS signature rule encryption

Code vulnerability scan optimization

Related Posts

Webpack Plugin development – Get git version information

18- Design Patterns – State Patterns (Design Patterns Learning Notes)

Tencent Map + Element-UI address search marking function