在graphql（JS）中清理/拒绝包含不安全html的用户输入

Question

我一直在上下搜索这个，但我找不到任何相关的东西，但是有没有一个好的解决方案可以在 graphql 突变中清理用户输入中的 html 字符？

我知道一个事实，像name: "<script>{alert('foo')}</script>" 这样的输入被graphql（在我的例子中是apollo-server-express）接受，但那不行。当然，像 React 这样的框架不会将该字符串设置为 html，因此它在那里是“安全的”，但是如果 graphql 端点被一个将字符串嵌入为 html 的站点使用呢？

所以有人知道这个问题的好解决方案吗？我看过几个包裹，但它们大多都很小，几乎没有活动。

另一种解决方案是在数据库级别进行清理，例如sanitize-html，但我想看看在架构级别是否有适当的解决方案

Answer 1

最终只是在模型级别进行了清理，创建了一个通用的模型类来清理 args 中的所有内容：

export default class Model {
  constructor(parent, args, context, info) {
    this.db = db;
    this.parent = null;
    this.args = null;
    this.context = null;
    this.info = null;

    this.#init(parent, args, context, info);
  }

  #init = (parent, args, context, info) => {
    this.parent = parent;
    this.args = this.#sanitizeObject(args);
    this.context = context;
    this.info = info;
  };

  #sanitizeObject = (args) => {
    let sanitizedArgs = {};

    Object.entries(args).forEach(([key, value]) => {
      if (Array.isArray(value)) {
        sanitizedArgs[key] = this.#sanitizeArray(value);
      } else if (typeof value === 'object') {
        sanitizedArgs[key] = this.#sanitizeObject(args[key]);
      } else {
        sanitizedArgs[key] = this.#sanitizeInput(value);
      }
    });

    return sanitizedArgs;
  };

  #sanitizeArray = (args) => {
    return args.map((value) => {
      if (Array.isArray(value)) {
        return this.#sanitizeArray(value);
      } else if (typeof value === 'object') {
        return this.#sanitizeObject(value);
      } else {
        return this.#sanitizeInput(value);
      }
    });
  };

  #sanitizeInput = (input) => {
    return DOMPurify.sanitize(input);
  };
}