Angular 6清理本地驱动器URL [英] Angular 6 sanitize local drive url
问题描述
我尝试使用DomSanitizer方法来净化以下类型的url,但没有成功
I have tried using DomSanitizer methods to sanitize the following type of url with no success
C:\path\to\executable
有什么办法可以清理此网址以用作href值?
Is there any way to sanitize this url to be used as href value?
我还要用[]表示法绑定值,所以我确定它不会作为字符串插值.
Also I am binding the value with [] notation so I am sure it is not interpolated as string.
推荐答案
首先,URL应该是C:/path/to/executable
而不是C:\path\to\executable
First the url should be C:/path/to/executable
not the one C:\path\to\executable
根据 http://www.ietf.org/rfc/rfc2396.txt反斜杠字符不是网址中的有效字符
According to http://www.ietf.org/rfc/rfc2396.txt backslash characters are not valid characters in URLs
大多数浏览器都将反斜杠转换为正斜杠.从技术上讲,如果您在URL中需要反斜杠字符,则需要使用%5C对其进行编码.
Most of the browsers convert the backslash into forward slashes. Technically, if you required backslash characters in your URL you need to encode them using %5C.
现在要进行消毒
您可以在 DomSanitizer bypassSecurityTrustUrl()返回安全网址的函数>
You could just bind a function that returns safe url using bypassSecurityTrustUrl()
in angular DomSanitizer
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的内置清理功能
Using Pipe: You can create a pipe to disable Angular’s built-in sanitization
safe.pipe.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
NOTE : Don't forget to inject this pipe service in your app.module.ts
import { SafePipe } from './shared/safe-url.pipe';
@NgModule({ declarations: [SafePipe],...});
现在您可以使用管道禁用内置清理
Now you can use the pipe to disable the built-in sanitization
<a [href]="'C:/path/to/executable' | safe: 'url'"> link </a>
我建议使用管道,因为代码是可重用的,这也是工作示例: https://stackblitz.com/edit/angular-vxcvfr
I would recommend using pipe as the code is reusable , also here is the working demo : https://stackblitz.com/edit/angular-vxcvfr
这篇关于Angular 6清理本地驱动器URL的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!