vlambda博客
学习文章列表

前言

以下几种方式，目前你采用哪些呢？今日前端早读课文章由@飘飘翻译分享。

正文从这开始~~

These practices will help to secure your JavaScript execution

这些实践将有助于确保JavaScript执行安全

JavaScript is used everywhere today. It runs in your browser as well as in your backend. Besides, JavaScript is a highly dependent ecosystem on third-party libraries. Therefore, securing JavaScript requires following best practices to reduce the attack surface.

今天，JavaScript的使用无处不在。它运行在你的浏览器和后端中。此外，JavaScript是一个高度依赖第三方库的生态系统。因此，确保JavaScript的安全需要遵循最佳实践来减少攻击面。

But, how do we keep JavaScript applications secure? Let’s find out.

但是，我们如何保持JavaScript应用程序的安全？让我们来了解一下。

1. JavaScript Integrity Checks JavaScript的完整性检查

As a frontend developer, you may have used <script> tags to import third-party libraries. Have you thought about the security risks of doing so?

作为一个前端开发者，你可能使用过<script>标签来导入第三方库。你想过这样做的安全风险吗？

What if the third-party resource has been tampered with?

如果第三方资源被篡改了怎么办？

Yes, these are things that can happen when you render external resources on your site. As a result, your site may face a security vulnerability.

是的，当你在网站上渲染外部资源时，可能会发生这些事情。因此，网站可能会面临一个安全漏洞。

As a safety measure for this, you can add an integrity (also known as Subresource integrity — SRI) code to your script as follows.

作为对此的安全措施，你可以在脚本中添加一个完整性（也称为Subresource integrity--SRI）代码，如下所示。

<script
 
 integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
 crossorigin="anonymous">
</script>

The integrity attribute allows a browser to check the fetched script to ensure that the code is never loaded if the source has been manipulated.

Integrity属性允许浏览器检查获取的脚本，以确保如果源头被篡改，代码永远不会被加载。

Note: Still, you have to ensure that the code you refer initially doesn’t contain any vulnerabilities.

注意：还是要确保你最初引用的代码不包含任何漏洞。

2. Frequent Tests for NPM Vulnerabilities 对NPM漏洞的频繁测试

I hope all of you know that we can use npm audit command to detect vulnerabilities for all installed dependencies. It provides vulnerability reports and provides fixes for them. But how often do you do that?

希望大家都知道，我们可以使用npm audit命令来检测所有已安装的依赖项的漏洞。它提供漏洞报告并为其提供修复。但你多长时间做一次呢？

Unless we automate it, these vulnerabilities will stack up, making it difficult to fix them. Remember, some of them could even be critical, allowing severe exploits.

除非我们把它自动化，否则这些漏洞会堆积起来，使之难以修复。记住，其中一些甚至可能是关键的，允许严重的漏洞。

As a solution, you can run NPM in your CI for each pull request to identify vulnerabilities. Therefore, you can prevent any vulnerabilities from going unnoticed.

作为一个解决方案，你可以在每个pull request的CI中运行NPM来识别漏洞。因此，你可以防止任何漏洞被忽视。

However, there are some vulnerabilities that will require a developer’s manual intervention to be solved.

然而，有一些漏洞需要开发人员的手动干预才能解决。

An extra mile from GitHub 来自GitHub的提示

Lately, GitHub introduced a bot name Dependabot, to scan the NPM dependencies automatically and notify you by email stating the risks.

最近，GitHub推出了一个名为Dependabot的机器人，可以自动扫描NPM的依赖关系，并通过电子邮件通知你说明风险。

Besides, suppose you enabled the “automated security fix PRs” option. In that case, GitHub will send an automated PR to fix these issues, addressing the security risks in advance.

此外，假设你启用了 "自动安全修复PR "选项。在这种情况下，GitHub 会自动发送 PR 来修复这些问题，提前解决安全风险。

2. Keep Minor and Patch Version Updates Enabled 保持启用小版本和补丁版本更新

Have you ever seen ^ or ~ symbol in front of any NPM package version? These symbols indicate the automatic version bump for minor and patch versions (depending on the symbol).

你有没有见过任何NPM软件包版本前面的^或~符号？这些符号表示小版本和补丁版本（取决于符号）的自动版本提升。

Technically, minor and patch versions are both backward compatible, reducing the risk of introducing bugs to the application.

从技术上讲，次要版本和补丁版本都是向后兼容的，从而降低向应用程序引入错误的风险。

Since most third-party libraries release hot-fixes vulnerabilities as patch version bumps, at least enabling automated patch updates helps to reduce security risks.

因为大多数第三方库都会在补丁版本不稳定时发布热修复漏洞，因此至少启用自动补丁更新有助于降低安全风险。

3. Have Validations in Place to Avoid Injections 建立有效的验证来避免注入

As a rule of thumb, we should never rely only on client-side validations since attackers can change them as required. However, some JavaScript injections can be omitted by having validations for every input.

作为一条经验法则，我们不应该只依赖客户端验证，因为攻击者可以根据需要改变它们。然而，通过对每个输入进行验证，可以省略一些JavaScript的注入。

For Example, if you type in the comment field anything with quotes <script><script/>, those quotes will be replaced with double — <<script>><</script>>. Then the entered JavaScript code will not be executed. This is called Cross-Site Scripting (XSS).

例如，如果你在评论区输入任何带有引号的内容<script></script/>，这些引号将被替换成双引号--<<script><</script>>。那么输入的JavaScript代码将不会被执行。这就是所谓的跨站脚本攻击（XSS）。

Likewise, there are a few other common ways to conduct JavaScript injection.

同样，还有一些其他常见的方法来进行JavaScript注入。

Use the developer’s console to insert or change the JavaScript.

使用开发人员的控制台来插入或更改JavaScript。

Entering “javascript:SCRIPT” into the address bar.

Preventing JS injections is important to keep your application secure. Like I mentioned before, having validations place is one method to prevent it. For example, before saving any input to the database, replace all < with <, and all > with > .

防止JS注入对于保证应用程序的安全是很重要的。就像我之前提到的，有验证的地方是防止它的一个方法。例如，在保存任何输入到数据库之前，用<替换所有<，用>替换所有>。

Content Security Policies (CSP) are another way to avoid malicious injections. Using CSP is quite straightforward as follows.

内容安全策略（CSP）是另一种避免恶意注入的方法。使用CSP是非常简单的，如下所示。

Content-Security-Policy: trusted-types;
Content-Security-Policy: trusted-types 'none';
Content-Security-Policy: trusted-types <policyName>;
Content-Security-Policy: trusted-types <policyName> <policyName> 'allow-duplicates';

5. Always Keep Strict Mode On 始终保持开启严格模式

Having Strict mode on will limit you from writing unsafe code. Besides, its straightforward to enable this mode. It’s as simple as adding the below line as the first in your JavaScript files.

开启Strict模式将限制你编写不安全的代码。此外，启用这种模式是很简单的。就像在你的JavaScript文件中加入下面这一行一样简单。

use strict

When the strict mode is on;

当严格模式开启时。

• It throws errors for some errors that were previously kept silent. 它会抛出一些错误，而这些错误之前是沉默

• Fixes mistakes that make it difficult for JavaScript engines to perform optimizations. 修正了使JavaScript引擎难以进行优化的错误.

• Prohibits the use of reserved words likely to be defined in future versions of ECMAScript. 禁止使用可能会在未来版本的ECMAScript中定义的保留词.

Throws errors when ‘unsafe’ actions are taken (such as gaining access to the global object).

当采取 "不安全 "的操作（如获得对全局对象的访问）时抛出错误。

Every modern browser has supported strict mode for years. If the browser does not support strict mode, the expression is simply ignored.

多年来，所有现代浏览器都支持严格模式。如果浏览器不支持严格模式，该表达式将被简单地忽略。

6. Lint Your Code 仔细检查你的代码

Linters perform static analysis on your codebase. It helps to establish quality and avoid common pitfalls. Since quality goes hand in hand with security, Linting helps to reduce the security risks. Few popular tools that we use for JavaScript as follows.

Linters对代码库进行静态分析。它有助于建立质量和避免常见的陷阱。由于质量与安全是相辅相成的，Linting有助于减少安全风险。我们对JavaScript使用的一些流行工具如下。

• JSLint

• JSHint

• ESLint

Further, tools like SonarCloud can also be used to identify code smells and known security vulnerabilities. A Sonar report would look like the following.

此外，像SonarCloud这样的工具也可以用来识别代码质量和已知的安全漏洞。一份Sonar报告将看起来像这样。

7. Minify & Uglify Your Code 压缩和混淆你的代码

Attackers will most often try to understand your code to hack their way through. Therefore, having a readable source code in the production build increases the attack surface.

攻击者通常会试图理解你的代码来破解。因此，在生产版本中拥有一个可读的源代码会增加受攻击的可能性。

As a common practice, if you minify and ugly your JavaScript code, it is difficult to exploit vulnerabilities in the code you have written.

作为一种常见的做法，如果你对你的JavaScript代码进行了压缩和混淆，就很难利用你编写的代码中的漏洞。

However, if you want extreme measures to hide your code from users/clients, it should be kept on the server-side without sending it to the browser at all.

然而，如果你希望采用极端的方法来对用户/客户端来隐藏你的代码，那么它应该被保存在服务器端，而根本不需要发送到浏览器上。

Summary 摘要

Focusing on security is very important, especially in JavaScript applications, to make your application secure. With minimal tools, you can secure JavaScript to prevent common attacks.

注重安全性是非常重要的，特别是在JavaScript应用程序中，要使你的应用程序安全。通过最小的工具，你可以保护JavaScript的安全以防止常见的攻击。

Besides, suppose you look for advanced solutions. In that case, there are tools like Snyk, WhiteSource which are specialized to scan the vulnerabilities in your code and automate it with continuous integrations.

此外，假设你在寻找高级的解决方案。在这种情况下，有一些工具，如Snyk、WhiteSource这样的工具专门扫描你的代码中的漏洞，并通过连续的集成将其自动化。

为你推荐

欢迎自荐投稿，前端早读课等你来。