Angular怎么防御xss攻击?

跨站点脚本（XSS）攻击是一种注入类型，其中恶意脚本被注入到其他良性和可信赖的网站中。那么Angular怎么防御xss攻击？

当攻击者使用Web应用程序将恶意代码（通常以浏览器端脚本的形式）发送给不同的最终用户时，就会发生XSS攻击。允许这些攻击成功的缺陷非常普遍，并且发生在Web应用程序在其生成的输出中使用来自用户的输入而无需验证或编码它的任何地方。

Angular怎么防御xss攻击?

要阻止XSS攻击，必须防止恶意代码进入DOM。Angular将所有数据视为不受信任的数据；因此，默认情况下，它会清理所有数据。这实质上意味着您的数据中找到的任何html标记都会被转义。为了使您仍能够在页面上显示html数据，Angular可以使用不同的技术（如使用DOMSanitizer API等）来清理数据，以便以足够安全的形式转换数据，被插入到DOM树中。

清理可以对不受信任的值的检查，将其转换为可安全插入DOM的值。

防止服务器XSS攻击的方法：

避免XSS攻击的主要要求是防止不受信任的数据（恶意脚本/代码）被注入DOM树。

●　作为服务器端处理的一部分，在将所有数据作为Http响应发送之前将其转义。这意味着如果响应数据由HTML / JavaScript标签组成，它们将被转义。

●　避免生成Angular模板作为服务器端处理的一部分。这可能导致模板注入，从而当页面在浏览器中加载时导致DOM操纵。

资源搜索网站大全https://55wd.com 广州品牌设计公司http://www.maiqicn.com

防止客户端XSS攻击的方法：

防止客户端XSS攻击的主要目标是避免因执行恶意脚本执行而修改DOM树。请注意，恶意脚本可能会因反射或存储的XSS攻击而到达。Angular使用以下一些技术来避免客户端XSS攻击：

●　使用innerHTML属性显示带有HTML标记的内容：

Angular提供innerHTML属性，可用于防止所有数据的自动化，以显示为组件视图的一部分。由HTML标记组成的HTML代码段可以通过将其分配给模板中元素的innerHTML属性来专门从不安全的脚本标记元素进行清理，如下所示。

脚本中的不安全标记元素将从内容中删除。使用innerHTML属性有助于从脚本注入中清理服务器响应数据，同时确保HTML元素显示为可信数据。

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  htmlSnippet = '<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" 
     data-wp-preserve="%3Cscript%3Ealert(%22Hello%20World!%22)%3C%2Fscript%3E" data-mce-resize="false" 
     data-mce-placeholder="1" width="20" height="20" alt="<script>" 
     title="<script>" /> <b>How are you doing?</b>';
}

以下是模板代码app.component.html，如上面的组件中所述。请注意组件的成员变量htmlSnippet，它包含HTML代码段。

<div>
<div>{{htmlSnippet}}</div>
<div [innerHTML]="htmlSnippet"></div>
</div>

加载到页面中的上述模板显示如下：

<script>alert("Hello World!")</script> <b>How are you doing?</b></pre>
alert("Hello World!") <strong>How are you doing?</strong>
<pre>

●　使用DOMSanitizer API防止Angular自动清理：

Angular提供了DOMSanitizer bypassSecurityTrustXXX API，可用于防止数据的自动清理。

●　必须避免直接使用DOM API：

应该避免直接使用DOM API，例如ElementRef。浏览器内置DOM API不会自动清理数据。因此，可以注入脚本，从而创建XSS漏洞。

●　内容安全策略（CSP）：

应适当设置CSP以避免XSS攻击。所有需要做的是将content-security-policy设置为HTTP标头的一部分。