面试题：JavaScript 基于类对象和闭包模块安全策略的深度融合与实践

基于类对象和闭包模块的安全策略

输入验证

基于类对象：在类的方法中，对传入的参数进行严格的验证。例如，定义一个接收用户输入的类方法：

class UserInput {
  constructor() {}
  processInput(input) {
    if (typeof input!=='string') {
      throw new Error('Input must be a string');
    }
    // 进一步的验证，比如长度等
    if (input.length > 100) {
      throw new Error('Input length exceeds limit');
    }
    return input;
  }
}

闭包模块：在闭包内部定义验证函数。

const inputModule = (function () {
  function validateInput(input) {
    if (typeof input!=='string') {
      throw new Error('Input must be a string');
    }
    return input;
  }
  return {
    processInput: function (input) {
      return validateInput(input);
    }
  };
})();

输出编码

基于类对象：在类中添加方法对输出进行编码，防止 XSS 攻击。以输出到 HTML 为例：

class OutputEncoder {
  constructor() {}
  encodeForHTML(output) {
    const div = document.createElement('div');
    const text = document.createTextNode(output);
    div.appendChild(text);
    return div.innerHTML;
  }
}

闭包模块：

const outputModule = (function () {
  function encodeForHTML(output) {
    const div = document.createElement('div');
    const text = document.createTextNode(output);
    div.appendChild(text);
    return div.innerHTML;
  }
  return {
    encodeOutput: function (output) {
      return encodeForHTML(output);
    }
  };
})();

CSRF 防护

基于类对象：在类中管理 CSRF 令牌。例如，在一个处理表单提交的类中：

class FormHandler {
  constructor() {
    this.csrfToken = generateCSRFToken();// 假设此函数生成 CSRF 令牌
  }
  submitForm(data) {
    const headers = {
      'X - CSRF - Token': this.csrfToken
    };
    // 发送 AJAX 请求等操作
  }
}

闭包模块：

const formModule = (function () {
  const csrfToken = generateCSRFToken();
  function submitForm(data) {
    const headers = {
      'X - CSRF - Token': csrfToken
    };
    // 发送 AJAX 请求等操作
  }
  return {
    submit: function (data) {
      return submitForm(data);
    }
  };
})();

在 React 框架中落地安全策略

输入验证

使用 React 的 propTypes 进行输入验证（对于函数式组件）或 getDefaultProps 和 propTypes 在类组件中。例如：

import React from'react';
import PropTypes from 'prop-types';

class InputComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <input type="text" value={this.props.inputValue} />;
  }
}

InputComponent.propTypes = {
  inputValue: PropTypes.string.isRequired
};

输出编码
- React 自动对 JSX 中的数据进行转义，防止 XSS 攻击。例如：
```
import React from'react';

const userInput = '<script>alert("XSS")</script>';
const App = () => {
  return <div>{userInput}</div>;
};
```
- React 会将 userInput 中的 <script> 标签转义，不会执行恶意脚本。

CSRF 防护

在发起 AJAX 请求时，通过 React 的 fetch 或第三方库（如 axios），在请求头中添加 CSRF 令牌。例如，使用 axios：

import React, { useEffect } from'react';
import axios from 'axios';

const App = () => {
  useEffect(() => {
    const csrfToken = getCSRFToken();// 假设此函数获取 CSRF 令牌
    axios.defaults.headers.common['X - CSRF - Token'] = csrfToken;
  }, []);
  return null;
};

在 Vue 框架中落地安全策略

输入验证

在 Vue 组件的 props 选项中进行输入验证。例如：

<template>
  <input type="text" :value="inputValue" />
</template>

<script>
export default {
  props: {
    inputValue: {
      type: String,
      required: true
    }
  }
};
</script>

输出编码

Vue 会自动对插值表达式中的内容进行转义，防止 XSS 攻击。例如：

<template>
  <div>{{ userInput }}</div>
</template>

<script>
export default {
  data() {
    return {
      userInput: '<script>alert("XSS")</script>'
    };
  }
};
</script>

Vue 会将 userInput 转义，不会执行恶意脚本。

CSRF 防护

在 Vue 中使用 axios 等库发起请求时，在请求拦截器中添加 CSRF 令牌。例如：

import axios from 'axios';
import Vue from 'vue';

const csrfToken = getCSRFToken();// 假设此函数获取 CSRF 令牌
axios.interceptors.request.use(config => {
  config.headers['X - CSRF - Token'] = csrfToken;
  return config;
});

Vue.prototype.$http = axios;

星途面试题库

面试题：JavaScript 基于类对象和闭包模块安全策略的深度融合与实践

知识考点

面试题答案

基于类对象和闭包模块的安全策略

在 React 框架中落地安全策略

在 Vue 框架中落地安全策略