angular 最佳实践_Angular安全最佳实践

angular 最佳实践

Angular is a popular front-end framework made by Google. Like other popular front-end frameworks, it uses a component-based architecture to structure apps.

Angular是Google制作的一种流行的前端框架。 与其他流行的前端框架一样，它使用基于组件的体系结构来构建应用程序。

In this article, we’ll look at some security best practices to follow when writing Angular apps.

在本文中，我们将研究编写Angular应用程序时应遵循的一些最佳安全性最佳实践。

防止跨站点脚本(XSS) (Preventing Cross-Site Scripting (XSS))

Cross-site scripting enables attackers to inject malicious code into web pages.

跨站点脚本使攻击者能够将恶意代码注入网页。

To prevent this, Angular sanitizes variables that are interpolated into templates.

为防止这种情况，Angular会清除插值到模板中的变量。

Angular templates are executable code, so any potentially malicious code snippets have to be sanitized.

Angular模板是可执行代码，因此必须清除所有潜在的恶意代码段。

Interpolation is sanitized but innerHtml is not. For example:

插值已被innerHtml但innerHtml未被innerHtml 。 例如：

<p>{{htmlSnippet}}</p>

is sanitized but:

已消毒，但：

<p [innerHTML]="htmlSnippet"></p>

isn’t.

不是。

Therefore, we should be careful when we use innerHTML to prevent strings with script tag from executing.

因此，当我们使用innerHTML来防止执行带有script标签的字符串时，应该小心。

直接使用DOM API和显式清理调用 (Direct Use of the DOM APIs and Explicit Sanitization Calls)

Built-in DOM APIs don’t automatically protect us from security vulnerabilities.

内置的DOM API不会自动保护我们免受安全漏洞的侵害。

document , ElementRef all have unsafe methods. If we use them, we should run the DomSanitizer.sanitize method and the appropriate SecurityContext .

document ， ElementRef都有不安全的方法。 如果使用它们，则应运行DomSanitizer.sanitize方法和适当的SecurityContext 。

使用离线模板编译器 (Use the Offline Template Compiler)

We can use the offline template compiler in production environment to prevent template injection.

我们可以在生产环境中使用脱机模板编译器来防止模板注入。

信任安全价值观 (Trusting Safe Values)

We can trust safe values by using the DomSanitizer and call one of the following methods:

我们可以使用DomSanitizer信任安全值，并调用以下方法之一：

• bypassSecurityTrustHtml

  bypassSecurityTrustHtml

• bypassSecurityTrustScript

  bypassSecurityTrustScript

• bypassSecurityTrustStyle

  bypassSecurityTrustStyle

• bypassSecurityTrustUrl

  bypassSecurityTrustUrl

• bypassSecurityTrustResourceUrl

  bypassSecurityTrustResourceUrl

to trust the code that’s being set dynamically.

信任动态设置的代码。

For example, we can write the following code to let us run JavaScript code in our href attribute:

例如，我们可以编写以下代码来让我们在href属性中运行JavaScript代码：

app.component.ts :

app.component.ts ：

import { Component } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  dangerousUrl;
  trustedUrl;
  constructor(private sanitizer: DomSanitizer) {
    this.dangerousUrl = 'javascript:alert("Hi")';
    this.trustedUrl = sanitizer.bypassSecurityTrustUrl(this.dangerousUrl);
  }
}

app.component.html :

app.component.html ：

<p><a class="e2e-trusted-url" [href]="trustedUrl">Click me</a></p>

When passing this.dangerousUrl into sanitizer.bypassSecurityTrustUrl , we trust that the code is safe.

将this.dangerousUrl传递到sanitizer.bypassSecurityTrustUrl ，我们相信代码是安全的。

So, when we click Click me, then we see the alert box pop up since the JavaScript code isn’t sanitized.

因此，当单击“单击我”时，由于未清除JavaScript代码，因此我们会看到警告框弹出。

HTTP级漏洞 (HTTP-Level Vulnerabilities)

Angular has built-in support to help prevent 2 common HTTP vulnerabilities. cross-site request forgery (CSRF or XSRF) and cross-site scripting (XSS).

Angular具有内置支持，可帮助防止2个常见的HTTP漏洞。 跨站点请求伪造(CSRF或XSRF)和跨站点脚本(XSS)。

Cross-site request forgery is an attack where an attacker pretends to be a legitimate user and makes the request on behalf of that user.

跨站点请求伪造是一种攻击，攻击者伪装成合法用户，并代表该用户提出请求。

A common anti-CSRF technique is to send a randomly generated authentication token in a cookie. The client reads the cookie and adds a custom request header with the token in all subsequent requests.

常见的反CSRF技术是在Cookie中发送随机生成的身份验证令牌。 客户端读取cookie，并在所有后续请求中添加带有令牌的自定义请求标头。

The server compares the received cookie vale to the request header value and rejects the request if the values are missing or don’t match.

服务器将接收到的cookie值与请求标头值进行比较，如果这些值缺失或不匹配，则拒绝请求。

All browsers implement the same-origin policy. Only code from a website on which cookies are set can read the cookie and set custom headers on the site.

所有浏览器都实施同源策略。 只有来自设置了Cookie的网站的代码，才能读取Cookie并在网站上设置自定义标题。

Angular’s HTTP client can receive the cookie from the server and add the custom request header in all subsequent requests.

Angular的HTTP客户端可以从服务器接收cookie，并在所有后续请求中添加自定义请求标头。

Photo by Rayner Simpson on Unsplash

雷纳·辛普森 ( Rayner Simpson)在 Unsplash上 拍摄的照片

跨站点脚本包含(XSSI) (Cross-Site Script Inclusion (XSSI))

This is a vulnerability that’s on older browsers by overriding native JavaScript object constructors and including an API URL using a script tag.

通过覆盖本机JavaScript对象构造函数并包括使用script标记的API URL，这是旧版浏览器中的漏洞。

It’s only successful if the JSON has executable JavaScript code.

仅当JSON具有可执行JavaScript代码时，它才会成功。

Angular’s HttpClient automatically strings brackets and parentheses from JSON to prevent this attack.

Angular的HttpClient自动从JSON中添加括号和括号，以防止这种攻击。

结论 (Conclusion)

Cross-site scripting attacks are where malicious scripts are injected into an app’s code and run.

跨站点脚本攻击是将恶意脚本注入到应用程序的代码中并运行的地方。

This is prevented by sanitizing strings. Angular also provides options to bypass sanitization.

这可以通过清理字符串来防止。 Angular还提供了绕过消毒的选项。

DOM methods aren’t safe and so we should be aware of that when using them directly.

DOM方法并不安全，因此我们在直接使用它们时应注意这一点。

Cross-sitre request forgery is where an attack makes requests as a legitimate user by pretending to be them.

跨站点请求伪造是攻击通过假装成为合法用户的方式发出的请求。

Angular’s HttpClient can read custom cookies from the server and send a request header with a unique identification that’s validated by the server to prevent this attack.

Angular的HttpClient可以从服务器读取自定义cookie，并发送带有服务器已验证的唯一标识的请求标头，以防止这种攻击。

We can prevent a Cross-Site Script Inclusion attack by sanitizing JSON to prevent executable JSON string from executing.

我们可以通过清除JSON来阻止执行可执行JSON字符串，从而防止跨站点脚本包含攻击。

JavaScript用纯英语的注释 (A note from JavaScript In Plain English)

We have launched three new publications! Show some love for our new publications by following them: AI in Plain English, UX in Plain English, Python in Plain English — thank you and keep learning!

我们推出了三本新出版物！ 通过关注它们来表达对我们新出版物的热爱： 普通英语的AI，普通英语的 UX，普通英语的 Python -谢谢，继续学习！

We are also always interested in helping to promote quality content. If you have an article that you would like to submit to any of our publications, send us an email at submissions@plainenglish.io with your Medium username and we will get you added as a writer. Also let us know which publication/s you want to be added to.

我们也一直对帮助推广高质量的内容感兴趣。 如果您有文章要提交给我们的任何出版物，请给我们发送电子邮件至submittings@plainenglish.io 使用您的中等用户名，我们将把您添加为作家。 另外，请告诉我们您要添加到哪个出版物。

翻译自: https://medium.com/javascript-in-plain-english/angular-security-best-practices-54fadf8974a1

angular 最佳实践