Angular 使用DomSanitizer防范跨站脚本攻击

跨站脚本Cross-site scripting

简称XSS,是代码注入的一种,是一种网站应用程序的安全漏洞攻击。它允许恶意用户将代码注入到网页上,其他用户在使用网页时就会收到影响,这类攻击通常包含了HTML和用户端脚本语言(JS)。

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

Angular中的DomSanitizer服务

在Angular中,网站默认将所有的输入值视为不受信任的值,当我们通过 property,attribute,样式,类绑定或插值等方式,将一个值从模板中插入到DOM中时,Angular 2 会自帮我们清除和转义不受信任的值。
DomSanitizer服务主要用于在Angular应用中对HTML、CSS和URL进行安全的处理和转换,以防止XSS安全漏洞。
在前端需要根据后端接口返回的数据进行显示时,就需要使用DomSanitizer进行处理。

DomSanitizer的几种用法

在Angular中使用DomSanitizer时,首先在组建中引入DomSanitizer服务,随后在组建构造器中通过依赖注入的方式获取到它的实例,如下面代码所示,这就是在一个最简单的组件中引入DomSanitizer服务器的方法。

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';@Component({selector: 'app-index',templateUrl: './app-index.component.html',styleUrls: ['./app-index.component.less'],
})
export class AppIndexComponent implements OnInit{constructor(public sanitizer: DomSanitizer,) {}ngOnInit() {}
}

通过this.sanitizer.使用这个服务时发现,它有六个方法供开发者使用,如下所示:
在这里插入图片描述

abstract class DomSanitizer implements Sanitizer {abstract sanitize(context: SecurityContext, value: SafeValue | string | null): string | null
abstract bypassSecurityTrustHtml(value: string): SafeHtml
abstract bypassSecurityTrustStyle(value: string): SafeStyle
abstract bypassSecurityTrustScript(value: string): SafeScript
abstract bypassSecurityTrustUrl(value: string): SafeUrl
abstract bypassSecurityTrustResourceUrl(value: string): SafeResourceUrl
bypassSecurityTrustHtml
import { Component, OnInit} from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';@Component({selector: 'app-test',templateUrl: './app-test.component.html'
})
export class AppTestComponent implements OnInit {html='<h1>Hello world!<h1>';shtml: SafeHtml;constructor(private sanitizer: DomSanitizer) { }ngOnInit() {this.shtml =this.sanitizer.bypassSecurityTrustHtml(this.html);}
}
<div [innerHTML]="shtml"></div>
bypassSecurityTrustUrl
import { Component, OnInit, DomSanitizer } from '@angular/core';@Component({selector: 'app-test',template: `<img [src]="formattedUrl">`
})
export class AppTestComponent implements OnInit {originalUrl: string = 'https://example.com/images/{{ imageName }}.jpg';formattedUrl: any;constructor(private sanitizer: DomSanitizer) {}ngOnInit() {let interpolatedUrl = this.originalUrl.replace('{{ imageName }}', 'malicious-script');this.formattedUrl = this.sanitizer.bypassSecurityTrustUrl(interpolatedUrl);}
}

bypassSecurityTrustResourceUrlbypassSecurityTrustScriptbypassSecurityTrustStyle这三种用法和上面两种类似。

<!-- bypassSecurityTrustStyle -->
<div [style]="sstyle"></div>
<!-- bypassSecurityTrustResourceUrl -->
<iframe [src]="surl"></iframe>  
sanitize

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/820985.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微博百度热搜收集

背景 大家都有使用微博、百度吧&#xff0c;而每天的热搜想必大家也用的不少。微博、百度的热搜有7、8种分类&#xff0c;每个单独查看比较耗费时间&#xff0c;效率极低&#xff0c;大概要花费3&#xff0c;4分钟左右。最近闲来无事&#xff0c;冒出个想法&#xff0c;是不是有…

Python编程:高效数据处理与自动化任务实践

一、引言 Python,作为一种解释型、交互式、面向对象的编程语言,凭借其简洁易懂的语法和强大的功能库,已经成为数据科学、机器学习、Web开发等多个领域的首选工具。本文将探讨Python在数据处理和自动化任务方面的应用,通过具体的代码案例展示Python的强大功能。 二、数据处理…

官宣:2024第二十届国际铸造件展12月精彩呈现!

Shanghai International Die-casting Casting Expo 2024第二十届上海国际压铸、铸造展览会 2024第二十届上海国际压铸、铸件产品展 时间&#xff1a;2024年12月18-20日 地点&#xff1a;上海新国际博览中心&#xff08;浦东区龙阳路2345号&#xff09; 报名参展&#xff1…

Spring ApplicationEvent 事件处理--不用引入中间件

一、背景 有一天&#xff0c;小王向小李请教&#xff1a;“我碰到了一个功能需求&#xff0c;用户注册完账号后&#xff0c;我们需要通知他们进行激活。我想实现异步处理&#xff0c;但不知道怎么做才更优雅。”小李听后&#xff0c;不假思索地说&#xff1a;“你可以直接开启…

【Git】初识 Git

文章目录 1. 提出问题2. 如何解决&#xff1f;版本控制器3. 注意事项 1. 提出问题 不知道你工作或学习时&#xff0c;有没有遇到这样的情况&#xff1a;我们在编写各种文档时&#xff0c;为了防止文档丢失、更改失误、失误后能恢复到原来的版本&#xff0c;不得不复制出一个副…

CC工具箱使用指南:【浙江省村规结构调整表(杨欢)】

一、简介 群友定制工具。 这个工具的功能简单易懂&#xff0c;就是根据输入的现状用地和规划用地图层&#xff0c;生成浙江村规的结构调整表。 村规的结构调整表格式&#xff0c;各个省份都不太一样&#xff0c;无法做一个通用的工具&#xff0c;实在很让人头痛。 看了之后表…

多语言vue-i18n (vue2,uniapp)

安装vue-i18n npm install vue-i18n8 --save // npm install vue-i18n–save 9版本需要vue3.0 // 在vue2环境下&#xff0c;默认安装 npm install vue-i18n 的版本是 vue-i18n9.2.2&#xff0c; // 报错信息里提示这个版本要求是vue3&#xff0c;所以我们安装适合vue2版本的vu…

FactoryMethod工厂方法模式详解

目录 模式定义实现方式简单工厂工厂方法主要优点 应用场景源码中的应用 模式定义 定义一个用于创建对象的接口&#xff0c;让子类决定实例化哪一个类。 Factory Method 使得一个类的实例化延迟到子类。 实现方式 简单工厂 以下示例非设计模式&#xff0c;仅为编码的一种规…

linux系统简介与环境搭建

linux系统简介与环境搭建 注&#xff1a;该题册一旦提交不可见不可修改&#xff0c;甚至不知道成绩&#xff0c;请谨慎提交&#xff0c;以下答案均为个人见解&#xff0c;非标准答案&#xff0c;如有意见&#xff0c;请评论&#xff01;&#xff01;&#xff01; 一、单 选 题…

libcurl 简单使用

LibCurl是一个开源的免费的多协议数据传输开源库&#xff0c;该框架具备跨平台性&#xff0c;开源免费&#xff0c;并提供了包括HTTP、FTP、SMTP、POP3等协议的功能&#xff0c;使用libcurl可以方便地进行网络数据传输操作&#xff0c;如发送HTTP请求、下载文件、发送电子邮件等…

数据结构DAY4--哈希表

哈希表 概念&#xff1a;相当于字典&#xff0c;可以根据数据的关键字来寻找相关数据的查找表。 步骤&#xff1a;建立->插入->遍历->查找->销毁 建立 建立数据&#xff0c;形式随意&#xff0c;但一般为结构体&#xff08;储存的数据量大&#xff09;&#xff…

Pytorch深度学习完整GPU图像分类代码

1. CPU与GPU不同 1.输入数据 2.网络模型 3.损失函数 .cuda() 说明&#xff1a;下面代码中GPU版本中取消下划线的即为CPU版本 2.完成的分类代码(GPU) import torch import torchvision from torch.utils.tensorboard import SummaryWriter# from model import * # 准备数据集 …

vue3 依赖-组件tablepage-vue3说明文档,列表页快速开发,使用思路及范例(Ⅳ)其他配置项

github求⭐ vue3 依赖-组件tablepage-vue3说明文档&#xff0c;列表页快速开发&#xff0c;使用思路及范例&#xff08;Ⅰ&#xff09;配置项文档 vue3 依赖-组件tablepage-vue3说明文档&#xff0c;列表页快速开发&#xff0c;使用思路及范例&#xff08;Ⅱ&#xff09;搜索…

OpenHarmony实战开发-如何实现发布图片评论功能。

介绍 本示例将通过发布图片评论场景&#xff0c;介绍如何使用startAbilityForResult接口拉起相机拍照&#xff0c;并获取相机返回的数据。 效果图预览 使用说明 通过startAbilityForResult接口拉起相机&#xff0c;拍照后获取图片地址。 实现思路 1.创建CommentData类&…

进程替换execl

#include<stdio.h> #include<unistd.h> // int execl(const char *path, const char *arg, ...); int main() {printf("start:\n");execl("/usr/bin/ls","ls","-a",NULL);printf("end!\n"); }如果没有exe…

JavaScript 高性能编程 —— 加载和运行

JavaScript 在浏览器中的性能,可认为是开发者所要面对的最重要的可用性问题。此问题因 JavaScript 的阻塞特征而复杂,也就是说,当 JavaScript 运行时其他的事情不能被浏览器处理。 事实上,大多数浏览 器使用单进程处理 UI 更新和 JavaScript 运行等多个任务,而同一时间只能…

华硕ROG幻16笔记本电脑模式切换管理工具完美替代华硕奥创中心管理工具

文章目录 华硕ROG幻16笔记本电脑模式切换管理工具完美替代华硕奥创中心管理工具1. 介绍2. 下载3. 静音模式、平衡模式、增强模式配置4. 配置电源方案与模式切换绑定5. 启动Ghelper控制面板6. 目前支持的设备型号 华硕ROG幻16笔记本电脑模式切换管理工具完美替代华硕奥创中心管理…

记录一下我hive连不上DataGrip的问题

用户名和密码都没问题&#xff0c;但报如下这个错误 原因&#xff1a;是因为我在linux上没启hiveserver2服务 解决&#xff1a; [atguiguhadoop102 hadoop]$ hiveserver2 which: no hbase in (/usr/local/bin:/usr/bin:/usr/local/sbin:/usr/sbin:/opt/module/jdk1.8…

Vue3——html-doc-js(html导出为word的js库)

一、下载 官方地址 html-doc-js - npm npm install html-doc-js 二、使用方法 // 使用页面中引入 import exportWord from html-doc-js// 配置项以及实现下载方法 const wrap document.getElementById(test)const config {document:document, //默认当前文档的document…

文件分发软件有哪些?最值得推荐的文件分发软件

文件分发软件有哪些&#xff1f;最值得推荐的文件分发软件 文件分发软件通常用于在企业或个人之间高效、安全地分发大量文件或软件包。文件分发软件在功能、安全、兼容性上各有差异&#xff0c;以下是一些文件分发软件的列举&#xff0c;以及它们的特点或优势&#xff0c;希望…