Summary of common front-end security knowledge

This section describes the browser security policies, common attack modes, and defense methods in Web security.

1. Web security policy

(1) Same-origin policy

• Cognate Meaning:host(hostname),schema(Agreement),port(Port) same.
• The specific content
  • iframe
    • Urls that can be embedded from different sources, depending onCSP (Content Security Policy)orX-Frame-Optionsconfiguration
    • But you can’t read it. You can’t get itiframethedocument
  • CSS
    • You can use<link>or@importLoad CSS resources from different sources
    • The requirement is that the resources need to be used correctlyContent-Type
  • forms
    • actionAddresses can cross domains
  • images
    • Images from different sources can be embedded
    • However, reading cross-source images is not allowed
  • multimedia
    • As with images, can be used<video><audio>
  • script
    • You can use<script>Bring in different sources
    • Not allowed to use fetch API, etc
• Refer to the content
  • MDN Same-origin policy
  • web.dev same-origin-policy

(2) CORS: cross-origin-resources-share Cross-source resource sharing

• Precheck determines whether precheck is required based on the request type, and precheck determines whether it is requestable through the response header.
• Request type
  • A simple request
    • Can only beget,post,headOne of the
    • Allowed request header fields
      • Header field automatically set by the user agent
      • Other names defined in the Fetch specification to disable header names
      • It is permissible to set the Fetch specification CORS security head field, for exampleAccept.Accept-LanguageEtc.
    • Content-TypeAllowable value range:text/plain.multipart/form-data.application/x-www-form-urlencoded
    • Not used in the requestReadableStreamobject
  • Preview the request
    • When the request does not match the simple request type
    • Browser initiationoptionsRequest, the request header of which contains two fields
      • Access-Control-Request-Method, the value of the request header is the request method of the actual request
      • Access-control-Request-Headers, the value of the request header is the request header field for the actual request to check
    • The server checks the request header and uses it to inform the browser whether the actual request can be made
      • Access-Control-Allow-OriginTo allow the source of the request
      • Access-Control-Allow-Methods, the request method that allows the request
      • Access-Control-Allow-Headers, the request header field that allows the request
      • Access-Control-Max-Age, the validity period of pre-check
    • If the precheck passes, the actual request is initiated, and if the precheck does not pass, the request is terminated
• Refer to the content
  • web.dev CORS
  • mdn CORS

(3) CSP: Content Security Policy

• Description: The page is restricted by setting a security policyiframe,imageResource request behavior
• Threats to address: XSS, packet sniffing attacks
• Set mode
  • The corresponding head:Content-Security-Policy
  • Head META tag:http-equiv="Content-Security-Policy"
• Common policy configurations:base-uri.child-src.connect-src.default-src.font-src.form-action.frame-ancestor.frame-src.img-src.media-src.object-src.report-uri.script-src.style-src
• Example:default 'self' *.trusted.com; img-src *; media-src media.com media2.com;
• Refer to the content
  • mdn CSP
  • web.dev security headers
  • owasp-cheatsheet-series CSP

2. Common attacks and defenses

(1) XSS

• Cross-site-script cross-site scripting attack refers to the attack caused by the execution of a Script that is not the original Script of the Site.

• Classification, according to the attack mode can be divided into three types:

  • Reflective XSS: Works immediately with input, such as in a URL
  • Stored XSS: Attack script persistence stores to attack other users
  • DOM XSS: Typically also reflective XSS, but works on the DOM, not the server

• Defense, as can be seen from the attack mode, the general attack mode is to have input before attack, so control from the entrance, you can defend against attack.

  • Xss-filter: verifies the input information strictly
  • Filter on output: Encode transformed content, using innerText, with special attention to XSS in rich text editor scenarios
  • Do not insert untrusted data inside page elements: script, HTML comments, attribute names, tag names, style
  • HTML content is encoded and inserted, for example:'.& 等
  • HTML attributes: in view of the space, %, *, +, -, /,,, <, =, >, ^, |
  • JavaScript encoding: In addition to alphanumeric, use\xHHFormat Encodes all characters less than 256 characters
  • JSON processing: Ensure that the content-type isapplication/json
  • CSS encoding: Make sure to support only expressions that start with HTTP and not javascript, otherwise follow javascript encoding rules
  • URL encoding: In addition to alphanumeric, use%HHEncoding format Codes characters with the ASCII value less than 256
  • Rich text processing library:HtmlSanitizer.DomPurify
  • Pay attention tohrefIn thejavascript:As well asiframethesrc
  • usehttp-only cookie
  • The use of CSP
  • Use a template system that automatically encodes
  • Use a modern JS framework
    • Risks that need to be controlled:
      • Presents 2 + :bypassSecurityTrust
      • React:dangerouslySetInnerHTML
      • Svelte:{@html... }
      • Vue2+: v-html

• Refer to the content

  • owasp XSS

CSRF: Cross-site Request Forgery

• Description: The source of the request is not verified, so that an attacker can initiate an HTTP request on a third-party site
• Example: Construct a link that a user clicks to initiate a request to modify the user’s information
• Defense:
  • Determine whether the user clicked the actual modify button
  • Sensitive operations Add secondary verification interaction, such as verification codes, SHORT messages, and links
  • token
• The essence of defense is: unique, credible source
• Refer to the content
  • owasp CSRF

(3) Defense means during file uploading

• Check extension
• Check file Type (not extension), content-Type can be changed
• Changing the file name
• File name length and character limits
• File size limit
• Only authorized users are allowed to upload files
• Save files on different servers
• Use a sandbox or antivirus environment to execute files
• Make sure all libraries used are securely configured and keep latest
• Protects file uploads from CSRF attacks

3. Security vulnerability scanning tool

• Fortify code security vulnerability scanning
• Black Duck Open source component security scanning