前言
随着前端技术的发展，我们开发 web 应用时使用的 js 代码越来越复杂。同时，因为 js 代码是在浏览器客户端执行的，所以存在一定的安全隐患。为了解决这个问题，我们需要更多的安全措施来提高我们的线上应用安全性。
Caja 是一款谷歌开发的可信 HTML 和 Javascript 包检测工具，通过沙箱隔离和一些其它机制验证，并对 js 代码进行约束，从而达到保障 web 应用源码安全的目的。而 cajas.js 是 Caja 的前端实现，被封装成了 npm 包，可以轻松地引用与使用。本文将详细介绍 npm 包 cajas 的使用方法。
安装
在你的项目中首先安装 npm 包：
npm install cajas
使用
Caja 提供两种 API：HTMLSanitizer 和 caja.但是 HTMLSanitizer 已经过时，所以我们推荐使用 caja API。在本文的讲解中，我们使用 caja API。
引入依赖
const caja = require('cajas');约束方法
在使用 caja 的时候，我们需要通过定义两个约束规则：白名单和黑名单。
白名单可以放行一些特定的方法和属性，让这些方法和属性可以被执行和访问；黑名单则相反，对一些有安全隐患的方法和属性进行拦截和约束。这两个规则可以通过定义 Policy 来实现：
-- -------------------- ---- ------- ----- - ------ - - ----- ----- ------ - --- -------- ------------ ----- -- ---- -- -- --- ---------- ---------- --------------- -- ----- ---- ----- ----------------- --------------------- -- ----- ---- --- ------------ ------ -- ----- -- ---- ----------- ---------- -- -- --- -- --- ----------- --------- -- -- --- -- -- --- ------------- -------- -- --- -- -------- ------ -- ----- -- ---------------- ------ ------ -------- -- --- -- -------- ---- ----------- ------------- ------- ---
在这里，我们使用了默认的 tagPolicy 和 santitizerPolicy。tagPolicy 默认允许的标签包括：
-- -------------------- ---- ------- ---- ------- ---------- ---------- ------- ---------- -------- -------- ---- ------ ------ ------ ------------- ----- ---------- --------- ------- ------- ------ ----------- ------- ----------- ----- ------ ---------- ------ ------ ----- ----- ----- ----------- ------------- --------- ------- --------- ------- ----- ----- ----- ----- ----- ----- --------- ----- ---- ------ -------- ------ ------ --------- -------- --------- ----- ------- ------- ------ ------- ------- ----------- -------- ------ ----------- --------- ----- ----------- --------- --------- ---- -------- ------ ----------- ---- ----- ----- ----- ------ ------- ---- ------- --------- ---------- --------- -------- --------- ------- --------- --------- -------- ------ ---------- ------ -------- -------- ----- ----------- ----------- -------- ----- -------- ------- -------- ----- -------- ----- ---- ----- ------ -------- -----
santitizerPolicy 默认不过滤任何 html，这里我们演示自定义 santitizerPolicy：
-- -------------------- ---- -------
----- - ---------- - - -----
----- --- - --- ------------
---------- --------------- -- ----- ---------
------------ ----- -- ---- -- --- ---
-------- --------- -------- -- -
-- -------- --- ----- -- ----------- --- --- -
-- ------- ------- --
------ ----------------------------------- -------------
-
--
---这里我们重新定义了 safeTag 方法，对于空 alt 属性的 img 标签，将其转义为特殊的占位符。在之后的过程中再将其转义为安全图片输出。下面我们加上最核心的执行约束函数：
-- -------------------- ---- ------- ----- ------ - --- --------------------------------- ----- - -------------- - - -------------- ----- -------------- - --- ---------------------- ------- --------------- ---------- ----- ------------- ----- ---- ----- ------ - --- ---------------------------- ----- -------- --------- - ------ ------------------------------- -------- -
这里通过 iframe 和 CajaChrome 对资源进行沙箱隔离，再通过 CompileContext 设定约束条件，并使其允许变量和方法的访问和执行。最后通过 virtualMachine 的 compile_ 方法对代码进行约束编译，从而达到线上执行的目的。其中传入的 code 是待验证的 js 代码。
执行 Js 代码
我们定义了约束函数和执行函数后，接下来就是我们写 js 代码的时候，这些代码的执行步骤了。
举个例子，我们有如下 js 代码：
const code = `
function add(x, y) {
return x + y;
}
console.log(add(1, 2))
`;这里我们定义了一个加法函数 add，这个函数会在控制台输出 3。我们使用 run() 函数执行这段代码：
run(code);
在控制台输出应该是：
3
完整的例子代码：
-- -------------------- ---- -------
----- ---- - -----------------
----- - ------ - - -----
----- - ---------- - - -----
---
- ---------
--
----- ------ - --- --------
------------ ----- -- ---- -- -- --- ----------
---------- --------------- -- ----- ---- -----
----------------- --------------------- -- ----- ---- ---
------------ ------ -- ----- -- ---- -----------
---------- -- -- --- -- --- -----------
--------- -- -- --- -- -- ---
------------- -------- -- --- -- -------- ------ -- ----- --
---------------- ------ ------ -------- -- --- -- -------- ---- ----------- ------------- -------
---
---
- -- ----------
--
----- ---------- - --- ------------
---------- --------------- -- ----- ---------
------------ ----- -- ---- -- --- ---
-------- --------- -------- -- -
-- -------- --- ----- -- ----------- --- --- -
-- ------- ------- --
------ ----------------------------------- -------------
-
--
---
----- ------ - --- ---------------------------------
----- - -------------- - - --------------
----- -------------- - --- ---------------------- ------- ---------------
---------- -----
------------- -----
----
----- ------ - --- ---------------------------- -----
---
- ----
--
-------- --------- -
------ ------------------------------- --------
-
---
- --
--
----- ---- - -
-------- ------ -- -
------ - - --
-
------------------ ---
--
----------以上这块代码我们放在一个 html 文件中，通过实现后端发送约束之后的 js 代码，我们可以很好的防止前端代码出现恶意自执行的情况。同时也能够保护用户的信息安全，值得深入了解和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c91ccdc64669dde5948