我尝试使用 DomSanitizer 方法来清理以下类型的 url,但没有成功
C:\path\to\executable
有没有办法清理这个 url 以用作 href 值?
此外,我用 [] 表示法绑定了该值,因此我确定它不会被插入为字符串。
我尝试使用 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
我这样使用它:
在 ts 文件中。
import { DomSanitizer } from '@angular/platform-browser';
constructor(
public domSanitizer: DomSanitizer
) { }
在 HTML 文件中
<img [src]="domSanitizer.bypassSecurityTrustUrl(pazar.imagedata)" class="zoom">