angular - Angular 6 清理本地驱动器 url
问题描述
我尝试使用 DomSanitizer 方法来清理以下类型的 url,但没有成功
C:\path\to\executable
有没有办法清理这个 url 以用作 href 值?
此外,我用 [] 表示法绑定了该值,因此我确定它不会被插入为字符串。
解决方案
首先,网址不应该是C:/path/to/executable
那个 C:\path\to\executable
根据http://www.ietf.org/rfc/rfc2396.txt反斜杠字符不是 URL 中的有效字符
大多数浏览器将反斜杠转换为正斜杠。从技术上讲,如果您需要在 URL 中使用反斜杠字符,则需要使用 %5C 对其进行编码。
现在关于消毒
您可以使用Angular DomSanitizerbypassSecurityTrustUrl()
绑定 一个返回安全 url 的函数
app.component.html
<a [href]="getlink()"> link </a>
app.component.ts
import { DomSanitizer} from '@angular/platform-browser';
export class AppComponent {
constructor(private sanitizer:DomSanitizer) { }
name = 'Angular';
getlink():SafeUrl {
return this.sanitizer.bypassSecurityTrustUrl("C:/path/to/executable");
}
}
受到推崇的
使用管道:您可以创建一个管道来禁用 Angular 的内置清理功能
安全管道.ts
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';
@Pipe({
name: 'safe'
})
export class SafePipe implements PipeTransform {
constructor(protected sanitizer: DomSanitizer) {}
public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
switch (type) {
case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
default: throw new Error(`Invalid safe type specified: ${type}`);
}
}
}
注意:不要忘记在你的 app.module.ts 中注入这个管道服务
import { SafePipe } from './shared/safe-url.pipe';
@NgModule({ declarations: [SafePipe],...});
现在您可以使用管道禁用内置消毒
<a [href]="'C:/path/to/executable' | safe: 'url'"> link </a>
我建议使用管道,因为代码是可重用的,这里也是工作演示:https ://stackblitz.com/edit/angular-vxcvfr
推荐阅读
- sql-server - 从两个表中都存在记录的带有子查询的 2 个表中选择列
- php - 使用 python 将图像 blob 插入 MySQL 数据库并检索 blob 以使用 PHP 显示图像
- c++ - 结构中的动态数组长度
- lstm - Keras LSTM 模型数据重塑
- java - ImageView 条件替代方案 (Android Studio)
- firebase - 使用二维码从 Firebase 存储下载
- python - 在 Pandas 中计算 Rolling Geomean 窗口,就像在 EXCEL 中计算一样
- python - 如果数字是 n 的倍数 - Python
- arrays - 在循环 x86-64 程序集之前和内部使用 printf
- jquery-ui-datepicker - 根据另一个值禁用 jsviews datepicker