javascript - 来自 WEB API 的 Javascript 类

问题描述

我目前正在研究 CMS，我想尝试一些如果它可以工作将非常有用的东西，但它非常不稳定并且可能是一个安全问题。基本上，我想制作一个所见即所得的编辑器（使用 EditorJS https://editorjs.io）。CMS 有一个 JSON WEB API，它服务于所有客户端（不同的网站）。前端解决方案是 Angular 11.2。在 EditorJS 中，我们可以通过实现一个接口来制作不同的工具，例如：

class MyBlockTool{
    render(){
      return document.createElement('someelement');
    }
    save(blockContent){
      return { something: blockContent.someproperty };
    }
}

整个目标是使这些类不在 Angular 应用程序中，而是在实际网站 PHP MVC 框架中，在 mvc 上创建一个端点，返回有关自定义块的数据，并在 Angular 应用程序中检索它们。因此，除了基本工具之外，不同的网站还可以拥有不同的、独特的工具，例如，一个网站横幅块广告产品或某些东西会有不同的 css，最重要的是不同的 html 结构、不同的输入等......

到目前为止，我知道我可以在 EditorJS 的构造函数中动态定义这些类所以我的问题是：我如何才能从 http 请求中获取 javascript 类，使其在 Angular 应用程序中实际可用？

我想到的一种可能的解决方案是尝试获取 .js/ts 文件的原始文本内容，在 http 请求中返回并使用 eval()，但这显然是安全漏洞的旗舰，我也尝试过它有点行不通。

其他，实际上我想到的第一个解决方案是在 JSON 中传递类定义本身，但我尝试在我的 IDE 中的 .json 文件中定义它，整个事情变成了那种可怕的红色，所以我猜 json 不是完全是为了这个。

我只是想不出一个好的方法，甚至只是一个可行的坏方法（可能是因为没有一个，甚至不应该是一个哈哈）

标签： javascriptangulartypescripthttp

我找到了一个解决方案（有点）。我将 TypeScript 导入模块，转译代码，然后在其上使用 eval()，它按我的意愿工作：从字符串创建类 -> 将其传递到编辑器 -> 编辑器工具正常工作。

import * as ts from "typescript";
const myClassInString = "()=> { const myclass = class MyBlockTool { render(){ return document.createElement('input'); } static get toolbox(){ return { title:'Test', icon: 'halo' }; } save(blockContent){ return { 'dik': 'dik' }; } }; return myclass; }";
//This is basically this:
function(){
   const myclass = new class MyBlockTool{
       //typescript stuff
   }
   return myclass;
}

const myTool = eval(ts.transpile(myClassInString))();

//pass it into editorjs, its working!

这显然是非常肮脏的，并且在一个基本上独立的项目中开发它们时测试新块（WEB API、实际的 cms 前端和网站都是独立的）。但也许我可以只创建一个 PHP 类，用一些参数制作 typescript，以便可以将 typescript 转换为可以由 typescript 转换并由 javascript 评估的字符串，这就是为什么我称这是一个糟糕的解决方案。我也可以跳过打字稿部分，因为最后只使用了 javascript。

javascript - 来自 WEB API 的 Javascript 类

问题描述

解决方案

推荐阅读