Browser kernel:

chrome safari: webkit

Firefox browser, using Gecko browser kernel;

Opera browser, currently using the Blink browser kernel

The front security

XSS cross-site scripting attacks

CSRF cross-site identity disguise

ccsf  

Cookies are safe

set-cookie: a=name; secure; httponlyCopy the code

csp   content-securety-policy

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';" /> Http Response: Content-Security-Policy: default-src 'self';Copy the code

instruction

Base-url Indicates the base URL of a document

default-src

Child-src connect-src font-src: Controls the font file source

Img-src: Controls the image source

Media-src: Controls resource sources in the video and audio tags

Object-src: controls the source of resources in,, and labels

Script-src: an effective source of JavaScript control

Style-src: an effective source of CSS control

Plugin-types controls the source of,, and plug-in resources

Reflected – XSS controls the browser’s policy towards reflective XSS

Report-url Indicates the address where the receiving browser sends a report on a CSP violation page

Sandbox controls whether controls prevent pop-ups, plug-ins, script execution, etc

Browser front-end cache

Cookies store a small number of information domains

The sessionStorage page will be cleared after closing

The localStorage page will not be deleted even after being closed

.setItem

.getItem

.removeItem

.clear

Browser event mechanism

Events trigger

Event

Var click=new Event('click',{cancelable: true, // Whether to disable browser default Event preventDefault () bubbles: }) document.dispatchEvent(click);Copy the code

AddEventListener is the third parameter

{capture: whether the event is triggered during the capture phase. The default value is false. Once: whether the event is triggered once.Copy the code

The operation of the event triggering procedure

Cancelable E.preventDefault () is in effect. CancelBubble E.propgation () is in effectCopy the code

Duis for the event triggering object

CurrentTarget Target triggers the current binding elementCopy the code

Js: BOM (Browser Object Model)

The window object

The timer

RequestAnimationFrame (in line with the browser’s drawing frame rate, manipulating many dynamic styles)

setImmediate  setTimeout setInterval

Window. Open (url [, target])

The ability to move, zoom, and close browser Windows

Scroll event of a window

A Navigator object that provides details about the browser

A Location object that provides details about the page loaded by the browser

Screen object that provides details about the resolution of the user’s display

Custom objects like XMLHttpRequest and IE’s ActiveXObject

Support for cookies

Window Route information History

The pop-up alert to confirm

window.performance

memory: Navigation: Current page redirection, how to click over timing: Url Loading process unload Redirect (FetchStart) AppCache (connectStack Secure-ConnectStart) TCP DNS Request Response DOM LoadCopy the code

postmessage

sessionStorage

localStorage

queueMicrotask?

Observable?

IntersectionObserver

useEffect(() => {

console.log();

Let Observer = new IntersectionObserver((item) => {if (item[0]. IntersectionRatio === 1) {console.log(‘ Enter the area!! ‘) } }, options);

document.getElementById(‘id1’) && observer.observe(document.getElementById(‘id1’));

}, [])