JavaScript-性能与安全

// 严格模式
1. 在文件的第一行写 'use strict' 就开启全局的严格模式，默认在函数体内的第一行写则开启函数体内的严格模式
2. 特点
  1. 全局变量必须先声明
  2. 禁止使用 with
  3. eval 会创建自己的作用域，和全局的作用域不相干
  4. 函数体内中的 this 如果指向的是 window，在严格模式下会是 undefined
  5. 函数参数名称不能重复
----------------------------------------------------------------------------------------------
// 网页渲染过程(html代码从上往下执行)
1. html代码生成DOM Tree
2. css代码生成CSSDM
3. 将DOM Tree和CSSDM整合生成Render Tree
4. 根据Render Tree渲染页面
5. 遇到<script>则暂停,优先执行js再进行渲染(js线程和渲染线程共用一个线程)，img 标签不会阻塞渲染
6. 渲染完成
----------------------------------------------------------------------------------------------
// onload和DOMContentLoaded的区别
1. window.onload: 页面上的DOM、样式表、脚本、图片、flash、都加载完成时触发
2. document.DOMContentLoaded: 仅当DOM加载完成, 不包括样式表、图片、flash
----------------------------------------------------------------------------------------------
// 性能优化原则
1. 多使用内存、缓存或其他方法
2. 减少cpu计算量,减少网络加载耗时
3. 空间换时间（适用于所有编程的性能优化）
----------------------------------------------------------------------------------------------
// 性能优化——让加载更快
1. 减少资源体积: 压缩代码
2. 减少访问次数: 合并代码、SSR服务器端渲染、缓存
3. 使用更快的网络: CDN
----------------------------------------------------------------------------------------------
// 性能优化——让渲染更快
1. css放在head,js放在body最下面
2. 尽早开始执行js,用DOMContentLoaded触发
3. 懒加载(图片懒加载、上滑加载更多)
4. 对DOM查询进行缓存
5. 频繁DOM操作合并到一起插入DOM结构
6. 节流throttle、防抖debounce
----------------------------------------------------------------------------------------------
// 安全
1. xss(跨站脚本攻击): 防止别人内嵌js脚本获取网站信息，如内嵌了 script 脚本请求了对应的图片地址
   把对应的信息带上，这样就把信息获取到了，而且请求图片不会跨域，或请求到自己的服务器上（做跨域处理）
   1. 概念：XSS 是一种安全漏洞，它允许攻击者将恶意脚本注入到受害者的浏览器中并执行。
        这些脚本可以窃取用户的敏感信息（如登录凭证、会话令牌等），或者进行其他恶意操作（如弹出广告、篡改网页内容等）。
        XSS 攻击通常发生在网站未对用户输入的数据进行充分的验证和过滤时。攻击者可以利用这个漏洞，
        通过精心构造的恶意输入，将脚本代码插入到网站的页面中，从而当其他用户浏览这些页面时，他们的浏览器会执行这些恶意脚本。
    2. 例子：假设有一个论坛网站，用户可以在其中发布帖子和回复。该网站没有对用户输入的内容进行任何过滤或转义，
            导致攻击者可以发布包含恶意脚本的帖子。
            攻击者可能会发布如下内容的帖子：
            <img src="x" onerror="alert('You have been XSSed!')" />
            这里的 <img> 标签的 src 属性被设置为一个无效的值（"x"），因此 onerror 事件会被触发。
            onerror 事件处理器中包含了一个 JavaScript 脚本，当事件发生时，该脚本会执行，并弹出一个警告框，
            显示 "You have been XSSed!"。
            当其他用户浏览这个包含恶意脚本的帖子时，他们的浏览器会尝试加载图片（虽然 src 属性是无效的），
            然后触发 onerror 事件，并执行其中的脚本。这样，攻击者就成功地利用了 XSS 漏洞，向受害者展示了恶意内容。
2. xss预防方法:
    1. 阻止注入：改变括号,把左右的<>括号替换成 &lt; 和 &gt;, 或使用npm包xss, 输入验证和过滤
    2. 阻止执行：使用 npm i dompurify，这个包可以把对应的 HTML 内容过滤掉有危险的元素和属性，只保留安全的内容
3. csrf(跨站请求伪造)：黑客诱导用户去访问另一个网络的接口，伪造请求
    1. 概念：CSRF攻击是指攻击者通过一些技术手段欺骗用户的浏览器去访问一个用户以前认证过的站点，并运行一些操作
        （如发邮件、发消息，甚至财产操作如转账和购买商品）。因为浏览器之前已经认证过，
        所以被访问的站点会觉得这是真正的用户操作而去运行
    2. 例子：假设受害者已经登录到他的银行网站，并且在同一浏览器中打开了一个恶意网站。恶意网站上有一个图片标签，
        其src属性指向银行网站上的转账页面，同时还有一个隐藏的表单，其中包含了转账所需的相关信息，如下所示：
        <img src="http://bank.com/transfer?amount=1000&to=attackeraccount/" />
        或者，攻击者可能通过构造恶意的表单提交来实现攻击，如下所示：
        <form action="http://bank.com/transfer" method="POST">
        <input type="hidden" name="amount" value="1000" />
        <input type="hidden" name="to" value="attackeraccount" />
        </form>
        <script>document.forms[0].submit();</script>
        当受害者浏览恶意网站时，浏览器会自动加载图片或提交表单，并向银行网站发送一个请求，触发了转账操作。
        由于受害者已经在银行网站上登录，浏览器会自动携带受害者的身份认证信息，使得该请求看起来像是受害者自己发起的。
        银行网站接收到这个请求后，由于认为是受害者的合法操作，便会执行转账操作，将一定金额的资金转到攻击者指定的账户上。
        通过这种方式，攻击者成功利用了受害者的登录状态，伪装成受害者发起了一个合法请求，从而实施了CSRF攻击。
4. csrf预防方法:
  1. 使用POST接口,增加验证,例如密码、指纹等，严格的跨域请求限制，如判断 referrer
  2. 为 cookie 设置 SameSite，禁止跨域传递 cookie
  3. 限制同源策略
5. 点击劫持：诱导界面上蒙一个透明的 iframe，诱导用户点击
  1. 预防：让 iframe 不能跨域加载
6. DDos：分布式拒绝服务，大规模的流量访问，使服务器瘫痪
  1. 预防：软件层不好做，需要硬件预防，如阿里云 WAF
----------------------------------------------------------------------------------------------
// 内容安全策略（CSP）是一种安全措施，它允许网站管理员控制页面可以加载和执行的资源。
// CSP 的目的是减少跨站脚本（XSS）和数据注入攻击等安全威胁。通过定义资源的有效来源，CSP 帮助浏览器确定哪些是可信的脚本和内容，从而防止恶意脚本的执行。
1. content-security-policy: default-src、connect-src、img-src、style-scr
2. 限制资源获取
3. 报告资源获取越权
4. 参数
    1. default-src：设置默认的资源加载策略。
    2. script-src：指定有效的脚本资源来源。
    3. style-src：定义哪些样式表是有效的。
    4. img-src：指定哪些图片资源可以加载。
    5. media-src：限制音频和视频资源的来源。
    6. frame-src：控制可以加载的框架资源。
5. 也可以通过 meta 标签进行设置 <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">
    这种方法的缺点是某些功能（例如发送 CSP 违规报告）只有在使用 HTTP 头部时才可用。