大家有没有在自己的代码里面，动态的下载并执行一段第三方的 js 文件或者代码？

[yazoox]

现在客户有一个需求，要在我们的一个包 /package （ React, typescript,编写的，用于显示数据的)，展示数据的之前，要从客户的一个服务器上，下载一个.js 文件，执行一下，生成一些数据，导入到我们的数据中，然后再渲染展示数据。

这个 js 文件，是动态决定的。甚至可能不止一个。

这个有没有比较好的实践方法？

[puzzle9]

无头浏览器？

[terranboy]

定时任务？

[nicevar]

在客户端执行？看 js 多复杂了，简单的 js 解释器就行，如果复杂的话创建一个不可见的 webview 来处理，服务端可以用 headless chrome 。

[shintendo]

创建 script 标签不就行了

[DrakeXiang]

为啥不能在服务端干这个，客户端的话只能 eval 了吧，看起来挺不安全的样子

[crysislinux]

动态 import 就可以了，如果文件名会变化或者可能会加载多个文件，可以先 import 一个动态的列表，然后再根据列表 import 其他的。以前我用 systemjs 做过，现在可以用 dynamic import

[ysc3839]

先说清楚运行环境？是浏览器吗？

[3dwelcome]

@DrakeXiang 为什么都说客户端用 eval 不安全呢，我觉得挺安全啊。

又不是服务器远程调用 RPC 不安全，本地就算 JS 被注入修改，也不会影响到其他用户。

[3dwelcome]

而且浏览器环境下，chrome 插件拥有至高无上的权利，JS 代码随时随地会被入侵。

本来就没指望 JS 运行绝对的安全，用个 eval 或者创建 script 标签，都是常规操作了。

[seakingii]

浏览器的话,可以动态插入 script 到 dom 里.

var script = document.createElement('script'),
script.type = 'text/javascript';


....

后面自己搞定

[Puteulanus]

这不就是 JSONP 吗

[icyalala]

@3dwelcome 它要是拿了用户 token 传走，或者挂马攻击别人，再或者挂个挖矿的导致运营商封禁，这都有可能啊。
对面这种显然没有安全意识，如果你选择相信对面，结果对面被攻击了导致你程序影响用户，那最终你还得背锅。

另外浏览器插件里面乱搞这个屡见不鲜了: https://www.v2ex.com/t/390135 ，但使用插件的时候你的角色是用户，不是开发者了，你可以做出合理选择来保护自己。

[DOLLOR]

第三方应该只提供接口返回数据，而不是返回 js 代码。

[dany813]

6 楼说的不错，如果就一个 js 直接动态加载就行，你现在是没发确定有多少个 js ，需要一个 js 映射文件

[libook]

JS 动态在 DOM 树里插 script 标签就行。
或者浏览器比较新就动态 import 。

当然安全问题还是得考虑的，否则会有扯皮风险，可以考虑让客户的服务端提供处理数据的接口，或者前端加个沙盒机制从沙盒里跑客户的 js 文件。

[ychost]

为啥一定要 js ，他们给接口返回 JSON 不行吗，js 太 hack 了

[yazoox]

@seakingii 如果这段 js 运行完，有返回值，比如回返一个 json 文件，怎么获取到呢？

[yazoox]

@libook
"或者前端加个沙盒机制从沙盒里跑客户的 js 文件。"兄弟，这段话是什么意思？怎么在前端添加沙盒？
开一个 worker.js ？跑在这个里面，然后通过 postmessage 通讯？,etc.

[seakingii]

@yazoox 动态导入的 JS 你们约定好,里面有约定好的方法

比如你动态导入一个名字为 get_user_info_1.js ,里面必定有个同名的方法 get_user_info1_(你传入的数据)

[seakingii]

@yazoox

下面是例子代码,不一定能直接跑,没测试过

```
function importJsFile(jsUrl){

let jsId = hash(jsUrl);//根据 jsUrl 生成一个唯一的 hash 值,避免重复 import

if(document.getElementById(jsId)) return;


let newElement=document.createElement("script");
newElement.type="text/javascript";
newElement.id = jsId;
newElement.src=jsUrl;

var head=document.getElementsByTagName("head")[0];
head.appendChild(newElement);

}


function importJsAndInvoke(userId){
let functionName = 'get_user_info_1';
let jsUrl = 'http://baidu.com/js/get_user_info_1.js';

//导入外部 JS
importJsFile(jsUrl);

//调用外部 JS 里的一个方法
let result = window[functionName](userId);
console.dir(result);

}
```

[libook]

@yazoox #16 我没有具体做过，我的思路就是用 WebWorkers 、WebAssembly 等天然提供沙盒的机制来跑，注意它们的沙盒基本是运行方面的隔离，一些同域的资源也可能可以访问，具体可以去 MDN 上仔细研究一下。
还可以找找看有没有一些前端沙盒的库，我听说 Deno 可以在浏览器端作为一个沙盒环境运行（本质好像也是 WebAssembly ），本人没用过，你可以去看一下是不是满足需要。

沙盒和外界程序之间使交流用 postmessage 等机制，对数据交流进行严格管制，就可以避免安全问题，同时记得记录关键日志（可以从前端发到你们自己的日志服务器），以便于审计和回溯。

[yazoox]

@seakingii
let result = window[functionName](userId);
加载的 script 中的函数是通过 window[name]访问的啊。got it. thx

@libook 嗯，用 WebWorkers 试试~ thx

[han3sui]

npm i loadjs

[SmiteChow]

web 标准原生支持模块动态载入，文档： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports

实例参考： https://github.com/DistPub/dshell/blob/main/shell.js#L321