当前位置: 首页 > article >正文

Interview preparation.md

Vue

1.1 响应式系统

Vue 3 使用 Proxy 代替 Vue 2 中的 Object.defineProperty 来实现响应式系统。Proxy 可以监听对象的所有操作,包括属性的添加和删除,从而解决了 Vue 2 的一些局限性。

Vue 2:使用 Vue.set 添加响应式属性
new Vue({
  el: "#app",
  data: {
    obj: {},
  },
  created() {
    // 使用 Vue.set 添加一个新属性
    Vue.set(this.obj, "newProp", "initial value");

    // 监听新添加的属性
    this.$watch("obj.newProp", function (newVal, oldVal) {
      console.log(`newProp changed from ${oldVal} to ${newVal}`);
    });
  },
  methods: {
    updateProp() {
      // 更新新添加的属性
      this.obj.newProp = "updated value";
    },
  },
});

1.2 Vue 3 对比 Vue 2 的编译优化

1. 静态提升

Vue 3 的模板编译器会将不变的部分(如 <button> 标签的内容)提升为静态节点,只在初次渲染时创建一次,后续渲染时直接处理,减少不必要的计算。

Vue 3:
const _hoisted_1 = /*#__PURE__*/ createVNode(
  "button",
  { onClick: updateMessage },
  "Update Message"
);

function render(_ctx, _cache) {
  return (
    openBlock(),
    createBlock("div", null, [
      createVNode("p", null, toDisplayString(_ctx.message), 1 /* TEXT */),
      _hoisted_1,
    ])
  );
}
Vue 2:
render: function(createElement) {
  return createElement('div', [
    createElement('p', this.message),
    createElement('button', { on: { click: this.updateMessage } }, 'Update Message')
  ]);
}

2. 缓存事件处理函数

Vue 3 会缓存事件处理函数(如 updateMessage),避免每次渲染时都重新创建新的函数。

Vue 3:
const _hoisted_1 = /*#__PURE__*/ createVNode(
  "button",
  {
    onClick:
      _cache[1] ||
      (_cache[1] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
  },
  "Click Me"
);

function render(_ctx, _cache) {
  return openBlock(), createBlock("div", null, [_hoisted_1]);
}
Vue 2:
render: function(createElement) {
  return createElement('div', [
    createElement('button', { on: { click: this.handleClick } }, 'Click Me')
  ]);
}

3. 优化指令

Vue 3 对 v-ifv-for 等常用指令进行了优化,使得运行时的性能更高:

  • 减少不必要的节点创建和销毁(如 v-if 使用 createCommentVNode)。
  • 高效的列表渲染(如 v-for 使用 renderListopenBlockcreateBlock)。
  • 优化属性绑定(如 v-bind 使用对象展开操作和标志位)。
Vue 3 示例:
function render(_ctx, _cache) {
  return (
    openBlock(),
    createBlock("div", null, [
      _ctx.isVisible
        ? (openBlock(), createBlock("p", { key: 0 }, "Visible"))
        : createCommentVNode("v-if", true),
      (openBlock(true),
      createBlock(
        Fragment,
        null,
        renderList(_ctx.items, (item) => {
          return (
            openBlock(),
            createBlock(
              "li",
              {
                key: item.id,
                title: item.title,
              },
              toDisplayString(item.name),
              9 /* TEXT, PROPS */,
              ["title"]
            )
          );
        }),
        128 /* KEYED_FRAGMENT */
      )),
    ])
  );
}
  • Fragments:Vue 3.0 支持组件返回多个根节点(Fragments),不再需要使用额外的包裹元素。
  • Teleport:Teleport 允许将组件的 DOM 渲染到指定的 DOM 节点之外,提供了更灵活的布局方式。

es6

在 JavaScript 中,箭头函数与传统函数(使用 function 关键字定义的函数)有一些显著的区别,其中之一就是箭头函数没有自己的 arguments 对象。

示例代码

传统函数

传统函数可以访问 arguments 对象,该对象包含了传递给函数的所有参数。

function traditionalFunction() {
  console.log(arguments);
}

traditionalFunction(1, 2, 3); // 输出: [Arguments] { '0': 1, '1': 2, '2': 3 }
箭头函数

箭头函数没有自己的 arguments 对象。如果在箭头函数中访问 arguments,它会从包含它的最近的非箭头函数中获取 arguments

const arrowFunction = () => {
  console.log(arguments);
};

arrowFunction(1, 2, 3); // ReferenceError: arguments is not defined

解决方案

如果需要在箭头函数中访问参数,可以使用剩余参数语法(rest parameters)来代替 arguments 对象。

const arrowFunctionWithRest = (...args) => {
  console.log(args);
};

arrowFunctionWithRest(1, 2, 3); // 输出: [ 1, 2, 3 ]
手写promise
function myPromise(executer) {
  let resolve, reject;
  this.thenCallbacks = [];
  this.catchCallback = null;

  this.then = (callback) => {
    this.thenCallbacks.push(callback);
    return this;
  };
  this.catch = (callback) => {
    this.catchCallback = callback;
    return this;
  };

  resolve = (value) => {
    setTimeout(() => {
      this.thenCallbacks.forEach((callback) => {
        value = callback(value);
      });
    }, 0);
  };
  reject = (reason) => {
    setTimeout(() => {
      if (this.catchCallback) {
        this.catchCallback(reason);
      }
    }, 0);
  };
  try {
    executer(resolve, reject);
  } catch (error) {
    reject(error);
  }
}
new myPromise((resolve, reject) => {
  setTimeout(() => {
    resolve("Hello, promise!");
  }, 1000);
})
  .then((value) => {
    console.log(value);
    return value + " Then 1";
  })
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.log(error);
  });

柯里化
function curry(fn) {
    return function curried(...args) {
        if (args.length >= fn.length) {
            return fn.apply(this, args);
        } else {
            return function(...args2) {
                return curried.apply(this, args.concat(args2));
            }
        }
    };
}

SSR

SSR 的优点

  1. 更快的首屏加载速度:由于服务器预先生成了 HTML 内容,客户端可以立即显示页面,而不需要等待 JavaScript 加载和执行。
  2. 更好的 SEO:搜索引擎爬虫可以直接抓取到完整的 HTML 内容,从而更好地索引页面。
  3. 更好的社交媒体分享效果:当页面被分享时,社交媒体平台可以抓取到完整的 HTML 内容,从而生成更丰富的预览信息。

SSR 的缺点

  1. 服务器负载增加:服务器需要处理更多的渲染工作,可能会增加服务器的负载。
  2. 开发复杂度增加:SSR 需要处理更多的服务器端逻辑,开发和调试可能会更加复杂。
  3. 客户端和服务器端代码共享:需要确保客户端和服务器端的代码能够正确地共享和执行,可能会增加代码管理的复杂度。

Webpack

//常用webpack配置
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    //  filename: '[name].[contenthash].js', // 使用 contenthash 生成文件指纹
  },
  cache: {
    type: 'filesystem', // 使用文件系统缓存
    cacheDirectory: path.resolve(__dirname, '.webpack_cache'), // 缓存目录
    buildDependencies: {
      config: [__filename], // 当配置文件更改时使缓存失效
    },
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
       {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[name].[contenthash][ext]', // 为静态资源生成文件指纹
        },
      },
    ],
  },
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.esm.js',
    },
    extensions: ['*', '.js', '.vue', '.json'],
  },
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    compress: true,
    port: 8080,
  },
  plugins: [
    new VueLoaderPlugin(),
    new webpack.PrefetchPlugin({
      context: path.resolve(__dirname, 'src'),
      request: './components/HeavyComponent.js',
    }),
    //PrefetchPlugin是Webpack提供的一个插件。用于预加载资源。预加载资源可以在浏览器空闲时提前加载将来可能会用到的资源,从而提高应用的性能和用户体验。
    // 使用 PrefetchPlugin
    // PrefetchPlugin 插件会在生成的 HTML 文件中插入 <link rel=“prefetch“> 标签,以便浏览器在空闲时预加载资源。
  ],
};


## <font color=#ff0000 >Vite</font>

//常用vite配置
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  root: process.cwd(), // 项目根目录
  base: '/', // 公共基础路径
  mode: 'development', // 模式
  plugins: [
    vue(), // 使用 Vue 插件
    webpackLoaderPlugin({
      include: '**/*.scss',
      loaderOptions: {
        loader: 'sass-loader',
        options: {
          // sass-loader 选项
        },
      },
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 路径别名
    },
    extensions: ['.js', '.vue', '.json'], // 自动解析的扩展名
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`, // 全局引入 SCSS 变量
      },
    },
  },
  json: {
    namedExports: true, // 支持命名导出
    stringify: false, // 禁用 JSON 字符串化
  },
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
  },
  server: {
    port: 3000, // 开发服务器端口
    open: true, // 自动打开浏览器
    hmr: true, // 确保 HMR 已启用
    proxy: {
      '/api': {
        target: 'http://localhost:4000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
  build: {
    outDir: 'dist', // 输出目录
    sourcemap: true, // 生成 sourcemap
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, 'index.html'),
      },
       treeshake: false, // 禁用 Tree Shaking
    },
  },
  optimizeDeps: {
    include: ['vue', 'vue-router'], // 强制预构建的依赖
  },
  define: {
    'process.env.NODE_ENV': JSON.stringify('development'), // 定义全局常量
  },
});

代码分割

// 代码分割

// - `app` 入口点包含应用程序的代码。
// - `splitChunks` 配置选项用于控制代码分割的行为。
//   - `chunks: 'all'`:对所有类型的代码进行分割,包括同步和异步代码。
//   - `minSize` 和 `maxSize`:控制模块的最小和最大大小。
//   - `minChunks`:控制模块的最小引用次数。
//   - `maxAsyncRequests` 和 `maxInitialRequests`:控制最大并行请求数。
//   - `automaticNameDelimiter`:控制生成文件名的分隔符。
//   - `name`:控制是否自动生成名称。
//   - `cacheGroups`:定义缓存组,用于控制哪些模块应该被提取到单独的文件中。
//     - `vendors` 缓存组:将 node_modules 目录中的模块提取到 `vendors` 文件中。
//     - `default` 缓存组:将引用次数大于等于 2 的模块提取到默认文件中,并复用已经存在的块。

const path = require("path");

module.exports = {
  entry: {
    app: "./src/app.js",
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  optimization: {
    splitChunks: {
      chunks: "all", // 对所有类型的代码进行分割
      minSize: 30000, // 模块的最小大小
      maxSize: 0, // 模块的最大大小,0 表示不限制
      minChunks: 1, // 模块的最小引用次数
      maxAsyncRequests: 5, // 按需加载时的最大并行请求数
      maxInitialRequests: 3, // 入口点的最大并行请求数
      automaticNameDelimiter: "~", // 文件名分隔符
      name: true, // 自动生成名称
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10, // 优先级
          name: "vendors", // 提取到的文件名
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true, // 复用已经存在的块
        },
      },
    },
  },
};

React

useRef 是 React 中的一个 Hook,用于创建一个可变的引用对象。这个引用对象在组件的整个生命周期内保持不变。useRef 常用于以下几种情况:

  1. 访问 DOM 元素:可以通过 useRef 获取和操作 DOM 元素。
  2. 存储可变值:可以存储任何可变值,而不会触发组件重新渲染。

总结

  • useState:状态变化会触发组件重新渲染。
  • useRefref 对象的 .current 属性变化不会触发组件重新渲染。
  • 使用 useRef 可以存储和访问可变值,而不会影响组件的渲染性能。这在需要频繁更新但不需要重新渲染的情况下非常有用。

网络协议

HTTP 建立过程包括以下几个主要步骤:

  1. DNS 解析:将域名解析为 IP 地址。
  2. 建立 TCP 连接:通过三次握手建立客户端和服务器之间的 TCP 连接。
  3. 发送 HTTP 请求:浏览器向服务器发送 HTTP 请求。
  4. 服务器处理请求并返回响应:服务器处理请求并返回 HTTP 响应。
  5. 浏览器渲染页面:浏览器解析响应并渲染页面。
  6. 关闭连接:在 HTTP/1.1 中,使用持久连接,可以在一个连接上发送多个请求/响应对。

CDN 的作用总结

  1. 加速内容传输:通过将内容分发到多个地理位置的服务器上,CDN 可以显著减少内容传输的延迟,提高用户访问速度。
  2. 减轻服务器负载:CDN 边缘服务器缓存内容,减少了对原始服务器的请求次数,从而减轻了原始服务器的负载。
  3. 提高可用性和可靠性:CDN 提供了冗余和负载均衡,确保即使某些服务器出现故障,内容仍然可以从其他服务器获取。
  4. 优化带宽使用:通过缓存和压缩技术,CDN 可以优化带宽使用,降低传输成本。

浏览器缓存

浏览器缓存是指浏览器将请求的资源(如 HTML、CSS、JavaScript、图片等)存储在本地,以便在后续请求中直接使用缓存的资源,从而减少网络请求,提高页面加载速度。浏览器缓存机制是前端性能优化的重要手段之一。下面详细解释浏览器缓存的工作原理、缓存策略和常见的缓存控制方法。

浏览器缓存策略主要分为两类:强缓存和协商缓存。

1. 强缓存(Strong Caching)

强缓存是指浏览器在缓存有效期内直接使用缓存的资源,而不向服务器发送请求。强缓存通过 Cache-ControlExpires 头部字段控制。

  • Cache-Control:是 HTTP/1.1 中定义的头部字段,用于指定缓存策略。常见的指令包括:
    • max-age=<seconds>:指定资源的最大缓存时间(以秒为单位)。
    • no-cache:强制浏览器在使用缓存前向服务器验证资源的有效性。
    • no-store:禁止缓存,浏览器每次请求都必须从服务器获取资源。
    • public:资源可以被任何缓存(如浏览器、CDN)缓存。
    • private:资源只能被浏览器缓存,不能被共享缓存(如 CDN)缓存。
  • Expires:是 HTTP/1.0 中定义的头部字段,用于指定资源的过期时间(绝对时间)。如果 Cache-ControlExpires 同时存在,Cache-Control 优先级更高。
2. 协商缓存(Conditional Caching)

协商缓存是指浏览器在缓存过期后向服务器发送请求,验证资源的有效性。如果资源未修改,服务器返回 304 状态码,浏览器继续使用缓存的资源。协商缓存通过 ETagLast-Modified 头部字段控制。

  • ETag:是资源的唯一标识符(通常是哈希值)。浏览器在请求资源时会发送 If-None-Match 头部字段,服务器根据 ETag 判断资源是否修改。
  • Last-Modified:是资源的最后修改时间。浏览器在请求资源时会发送 If-Modified-Since 头部字段,服务器根据 Last-Modified 判断资源是否修改。

缓存策略示例

以下是一些常见的缓存策略示例:

1. 静态资源缓存

对于不经常变化的静态资源(如图片、CSS、JavaScript 文件),可以设置较长的缓存时间:

Cache-Control: max-age=31536000, public
2. 动态资源缓存

对于经常变化的动态资源,可以使用协商缓存:

Cache-Control: no-cache
ETag: "5d8c72a5edda8"
Last-Modified: Wed, 21 Oct 2025 07:28:00 GMT
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/data", true);
xhr.setRequestHeader("X-Custom-Header", "CustomHeaderValue");
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

import $ from "jquery";
$.ajax({
  url: "https://example.com/api/data",
  method: "GET",
  headers: {
    "X-Custom-Header": "CustomHeaderValue",
  },
  success: function (data) {
    console.log(data);
  },
  error: function (error) {
    console.error("Error:", error);
  },
});

fetch("https://example.com/api/data", {
  method: "GET",
  headers: {
    "X-Custom-Header": "CustomHeaderValue",
  },
});
axios.get("https://example.com/api/data", {
  headers: {
    "X-Custom-Header": "CustomHeaderValue",
  },
});

图片懒加载

是一种优化技术,通过延迟加载图片资源,可以减少初始加载时间,提高页面加载速度和用户体验。可以使用 HTML5 的 loading 属性或 JavaScript 和 Intersection Observer API 来实现图片懒加载。懒加载的基本原理是延迟加载资源,直到资源进入视口或接近视口时才开始加载。通过合理使用懒加载,可以显著优化 Web 应用的性能和用户体验。

<img
  src="path/to/image.jpg"
  alt="Description"
  loading="lazy"
/>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const lazyImages = document.querySelectorAll(".placeholder");

    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const img = document.createElement("img");
          img.src = entry.target.getAttribute("data-src");
          img.alt = "Lazy loaded image";
          entry.target.appendChild(img);
          observer.unobserve(entry.target);
        }
      });
    });

    lazyImages.forEach((image) => {
      observer.observe(image);
    });
  });
</script>

前端网络安全性

1. 跨站脚本攻击(XSS)

解释

跨站脚本攻击(XSS,Cross-Site Scripting)是指攻击者在网页中注入恶意脚本,当用户访问该网页时,恶意脚本会在用户的浏览器中执行,从而窃取用户信息或执行其他恶意操作。

防范措施
  • 输入验证:对用户输入进行严格的验证和过滤,防止恶意脚本注入。
  • 输出编码:对输出到网页的内容进行编码,防止恶意脚本执行。可以使用库如 DOMPurify 来清理用户输入。
    • 使用 DOMPurity 库来清理用户输入,防止 XSS 攻击。
    <script>
      document.getElementById('commentForm').addEventListener('submit', function(event) {
        event.preventDefault();
        const comment = document.getElementById('comment').value;
        const sanitizedComment = DOMPurify.sanitize(comment);
        const commentDiv = document.createElement('div');
        commentDiv.innerHTML = sanitizedComment;
        document.getElementById('comments').appendChild(commentDiv);
      });
    </script>
    
  • 使用 CSP(内容安全策略):通过设置 Content Security Policy 头部,限制网页中可以执行的脚本来源。
    • Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com
      
CSP 头部通过 `Content-Security-Policy` 头部字段来设置,格式如下:

```http
Content-Security-Policy: <directive> <source-list>; <directive> <source-list>; ...
  • directive:指令,用于指定要限制的资源类型。

  • source-list:来源列表,用于指定允许加载资源的来源。

  • default-src:默认资源来源,适用于所有未单独指定来源的资源类型。

  • script-src:脚本来源,限制可以执行的 JavaScript 代码的来源。

  • style-src:样式来源,限制可以应用的 CSS 样式的来源。

  • img-src:图片来源,限制可以加载的图片的来源。

  • font-src:字体来源,限制可以加载的字体的来源。

  • connect-src:连接来源,限制可以发起的网络请求的来源(如 AJAX、WebSocket)。

  • media-src:媒体来源,限制可以加载的音频和视频的来源。

  • object-src:对象来源,限制可以加载的插件内容(如 Flash、Java Applet)。

  • frame-src:框架来源,限制可以嵌入的框架和 iframe 的来源。

  • base-uri:限制 <base> 标签的来源。

  • form-action:限制可以提交表单的 URL。

  • ‘self’:表示同源,即与当前页面相同的来源。

  • ‘none’:表示不允许加载任何资源。

  • ‘unsafe-inline’:允许内联资源(如内联的 <script><style>),不推荐使用。

  • ‘unsafe-eval’:允许使用 eval() 和类似的方法,不推荐使用。

  • URL:指定具体的 URL 或域名。

  • data::允许 data: 协议的资源。

  • https::允许 HTTPS 协议的资源。

2. 跨站请求伪造(CSRF)

解释

跨站请求伪造(CSRF,Cross-Site Request Forgery)是指攻击者诱导用户在已登录的情况下执行未授权的操作。攻击者通常会构造恶意请求,并通过用户的浏览器发送到受信任的网站。

例如
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Malicious Site</title>
  </head>
  <body>
    <h1>Welcome to the Malicious Site</h1>
    <img
      src="http://localhost:3000/change-email?email=attacker@example.com"
      style="display:none;"
    />
  </body>
</html>
防范措施
  • 使用 CSRF 令牌:在每个表单或请求中包含一个唯一的 CSRF 令牌,服务器验证令牌的有效性。
  • 验证 Referer 头部:检查请求的 Referer 头部,确保请求来源于受信任的页面。
  • 使用 SameSite Cookie 属性:设置 Cookie 的 SameSite 属性,限制跨站请求携带 Cookie。
示例:设置 SameSite Cookie 属性
Set-Cookie: sessionid=abc123; SameSite=Strict

SameSite 属性有三个可选值:

  1. Strict:严格模式,完全禁止跨站请求携带 Cookie。只有在同一站点的请求中,Cookie 才会被发送。
  2. Lax:宽松模式,允许部分跨站请求携带 Cookie,但限制条件较严格。通常用于导航请求(如链接点击)和顶级导航(如表单提交)。
  3. None:不限制跨站请求,允许所有跨站请求携带 Cookie。需要同时设置 Secure 属性,确保 Cookie 仅通过 HTTPS 传输。
const express = require("express");
const cookieParser = require("cookie-parser");

const app = express();
app.use(cookieParser());

app.get("/", (req, res) => {
  res.cookie("sessionid", "abc123", { sameSite: "Strict" });
  res.send("<h1>SameSite Cookie Example</h1>");
});

app.listen(3000, () => {
  console.log("Server is running on http://localhost:3000");
});

3. 点击劫持(Clickjacking)

解释

点击劫持(Clickjacking)是指攻击者通过在透明的 iframe 中嵌入受害者网站,并诱导用户点击,从而执行未授权的操作。

防范措施
  • 使用 X-Frame-Options 头部:通过设置 X-Frame-Options 头部,防止网页被嵌入到 iframe 中。
  • 使用 CSP:通过设置 Content Security Policy 头部,限制网页可以嵌入的框架来源。
示例:设置 X-Frame-Options 头部
X-Frame-Options: DENY

X-Frame-Options 头部有三个可选值:

  1. DENY:完全禁止页面在任何框架中加载。
  2. SAMEORIGIN:允许页面在相同来源的框架中加载。
  3. ALLOW-FROM uri:允许页面在指定的来源的框架中加载(注意:此选项在现代浏览器中已被弃用,建议使用 CSP 代替)。

4. 不安全的依赖

解释

使用不安全的第三方库或依赖可能导致安全漏洞,攻击者可以利用这些漏洞进行攻击。

防范措施
  • 定期更新依赖:保持依赖库的最新版本,修复已知的安全漏洞。
  • 使用安全扫描工具:使用工具如 npm audit、Snyk 等扫描依赖库的安全性。

5. 数据泄露

解释

数据泄露是指敏感数据(如用户信息、密码等)被未授权访问或泄露。

防范措施
  • 加密敏感数据:在传输和存储敏感数据时使用加密技术,如 HTTPS、AES 等。
  • 最小权限原则:限制用户和应用程序的权限,确保只有必要的权限才能访问敏感数据。
  • 使用安全存储:在客户端使用安全的存储机制,如 Web Storage、IndexedDB 等。

6. 安全的身份验证和授权

解释

确保用户身份验证和授权机制的安全性,防止未授权访问和操作。

防范措施
  • 使用强密码策略:要求用户设置强密码,并定期更换密码。
  • 多因素认证(MFA):使用多因素认证提高身份验证的安全性。
  • 使用 OAuth 2.0 和 OpenID Connect:使用标准的身份验证和授权协议,确保安全性。

7. 安全的 API 调用

解释

确保前端与后端 API 调用的安全性,防止数据泄露和未授权访问。

防范措施
  • 使用 HTTPS:确保所有 API 调用使用 HTTPS 加密传输。
  • 验证 API 请求:在服务器端验证所有 API 请求的合法性。
  • 使用 API 密钥和令牌:使用 API 密钥和令牌进行身份验证和授权。

http://www.kler.cn/a/585419.html

相关文章:

  • 分享一个工具可以国内无限制访问GitHub(来源于GitHub开源项目)
  • Linux--操作系统/进程
  • golang算法二叉搜索树
  • 游戏引擎学习第158天
  • 图像分割技术深度解析:语义、实例与全景分割,及FCN、U-Net、Mask R-CNN、UPSNet的应用
  • Pycharm实用技巧
  • 泛目录技术:智能缓存提升网站速度与稳定性
  • 【Qt】QWidget属性介绍
  • 便捷开启 PDF 功能之旅,绿色软件随心用
  • CUDA编程之内存零拷贝技术
  • 保姆级离线TiDB V8+解释
  • C语言练习四(vscode)循环语句专练
  • linux中yum和wget指令的区别
  • 【 <一> 炼丹初探:JavaWeb 的起源与基础】之 Servlet 3.0 新特性:异步处理与注解配置
  • 上下左右移动的悬浮框/气泡
  • 基础知识《Redis解析》
  • Linux常用命令速查手册
  • MATLAB中edit函数用法
  • qt style-sheet样式不起作用问答
  • 什么是 Redis