在前端开发领域中使用安全类型可以有效的防止跨站脚本攻击（XSS）和其它的安全漏洞。在本文中，我们将介绍如何使用npm包 @types/trusted-types提供的类型来解决安全问题。
什么是 Trusted Types？
在之前，如果你想要通过安全类型来防止XSS攻击，你需要自己创建一些库来实现这个目的。 Trusted Types 提供了官方标准的支持，它通过约束用户提供的代码为它们指定的可信内容。这将来自不安全渠道的php, js等脚本内容转换为浏览器可以正常响应的标记，而不会被用于攻击。
包的安装和使用
如何安装：
- 使用npm安装
npm install --save-dev @types/trusted-types
- 使用yarn安装
yarn add @types/trusted-types --dev
使用范例：
-- -------------------- ---- ------- ------ - ------------ ------------- - ---- ----------------------- ----- ----------- ------ - ----------- ------------- ----- --------- ----------- - ------------------------------------------ ----------------------- - -------------------- ----- --------- ------ - ---------------- ----- ------- ------------- - -------------------------------------------- ----------------------------------
在上面的例子中，我们使用了两个 Trusted Types，名为 TrustedHTML 和 TrustedScript。
- TrustedHTML : 用于处理 HTML 标记内容。
- TrustedScript : 用于处理 script 标记内容。
在forEach迭代一些来自外部的数据对象时，可以使用TrustedHTML或 TrustedScript 来处理可能包含用户代码的字符串。
创建类型
在使用 Trusted Types 时，可以通过 policy 方法来创建类型。这样可以满足你和你的团队的安全策略，而不用担心可能发生的恶意攻击。
在很多例子中，我们看到了 TrustedHTML.policy.createHTML 和 TrustedScript.policy.createScript 方法。可以与 createEval 和 createURL 方法一样使用它们来创建其他类型。
createHTML
createHTML 方法用于创建 TrustedHTML 的实例。我们可以使用此方法将一个字符串转换为 TrustedHTML 类型。
const htmlString: string = '<h1>Hello, World!</h1>'; const safeHtml: TrustedHTML = TrustedHTML.policy.createHTML(htmlString);
createScript
createScript 方法用于创建 TrustedScript 的实例。与 createHTML 方法一样，我们可以使用此方法将字符串转换为TrustedScript类型。
const jsString: string = 'alert("Hack")';
const safeJs: TrustedScript = TrustedScript.policy.createScript(jsString);createEval
createEval方法创建 TrustedScriptURL 类型，但它是用于 eval 函数的URL。这个URL 可以帮助 preventScriptInjection 阻止程序被恶意攻击。
const evalUrl = 'eval://localhost:8080/myscript.js'; const safeEval: TrustedScriptURL = TrustedScriptURL.policy.createEval(evalUrl);
createURL
createURL方法创建TrustedURL类型，它用于安全的URL输入的策略筛选系统。它可以防止使用恶意代码破坏程序记录在表单提交数据的引用标签的手段。
const url = 'https://google.com'; const safeUrl: TrustedURL = TrustedURL.policy.createURL(url);
Conclusion
开始使用 Trusted Types 以提升前端应用程序的安全是一件好事。我们可以使用@types/trusted-types npm 包来有效地防止 XSS 攻击等安全问题。在本文中，我们讨论了如何使用TrustedHTML和TrustedScript类型、如何创建Trusted Types。我们还讨论了在 policy 策略和其他方法中Trusted Types 的主要优点。因此，可以根据实际情况和个人需求来设计你自己的策略，并掌握这个npm包的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f0922fd403f2923b035c013