问题标签 [angular-dom-sanitizer]

我想在我的数据库中包含包含组件指令的 html，然后将其用作 Angular 中组件模板的一部分。

例如，如果我有：

在 App 组件模板中，这在应用程序组件的代码中：

然后创建一个名为注入的组件：

模板：

代码：

我在控制台中收到“清理 HTML 删除了一些内容”的警告。在该链之后，我尝试添加一个调用以将字符串标记为安全使用：this.sanitizer.bypassSecurityTrustHtml

这导致指令标签留在 HTML 中，没有控制台警告关于清理删除任何内容，但组件似乎没有被 Angular 处理。我看到您可以使用组件工厂来动态创建组件，但是，除非我想手动解析 HTML 以检查组件，否则我认为这对我的情况没有帮助。

离子 4 电容器相机插件在拍照然后消毒但仍然出现此错误：

SafeValue must use [property]=binding: data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/4UHuRXhpZgAATU0AKgAAAAgABgEaAAUAAAABAAAAVgEbAAUAAAABAAAAXgEoAAMAAAABAAIAAAITAAMAAAABAAEAAIdpAAQAAAABAAAIcuocAAcAAAgMAAAAZgAAEOQAAAEsAAAAAQAAASwAAAABHOoAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA....

这是我在 .ts 文件中的方法：

在 .html 文件中： <ion-item> <span (click)="takePicture()">Camera</span> </ion-item> <ion-item> <ion-img [src]="takenImg" alt=""></ion-img> </ion-item>

为元素提供背景图像时，一切正常：

但是如何为元素提供掩码图像？这个：

不管用。还

不起作用。我什至没有在控制台中收到警告。

这是由于 DomSanitizer 不知道掩码图像的存在权，还是有其他方法可以实现这一点？

语境

我想创建一个IconComponent，我可以在其中创建一个Input()图标名称，该名称将用作遮罩图像的 url 的一部分。另一个Input()持有背景颜色。这样，我可以将不同的图标与不同的颜色组合起来。

我想防止为每个可能的图标创建 CSS 类。

自从将我的 Angular 应用程序从版本 8 升级到版本 9 后，我在运行 Jest 单元测试时出现了一个新错误：

我正在测试的组件使用 DomSanitizer：

这个 url 用在 iframe 上：

我在 Angular 9 中使用 Jest，这发生在拍摄快照时。

我的测试（我试过嘲笑它而不是嘲笑它）：

有谁知道我该如何解决这个问题？

当我通过 DomSanitizer 传递远程 url 时，http://localhost:4200会作为 url 的前缀，结果是 404。

原文网址：https ://www2.cs.uic.edu/~i101/SoundFiles/Fanfare60.wav

我的代码：

还有我的模板：

有什么我想念的吗？为什么是前缀？FWIW bypassSecurityTrustUrl(url) 具有相同的效果。

谢谢

我正在创建一个动态 Angular Web 应用程序，当从我的数据库中读取信息时，虽然我通过替换所有出现的\nto 来适应 html <br />，但 Angular 8 只会将此 html 代码呈现为文本，而不是出现新的换行符。

为了将 static 转换<br />为换行符（html 代码），我创建了一个自定义管道并尝试使用[InnerHtml]. 但是，这不起作用，现在网页不再显示我的数据库条目，而是显示消息“未定义”。

有谁知道这是为什么？

下面是我的自定义管道的代码：

以下是我的 app.compoment.ts，其中包括相关导入：

下面是我的 [InnerHtml] 和我的 trees.component.html 页面上的自定义管道的用法。

任何帮助/建议将不胜感激，并提前感谢您！

我需要在页面上使用双反斜杠“\\”呈现一个字符串，但 Angular 从 temaplte 中删除了一个字符串，将其视为正则表达式。

问题的一个例子在这里： https ://codepen.io/bental/pen/xxZdYZv

我也尝试过有和没有转义，DomSanitizer但似乎无法让它工作。

我不想操纵数据，因为它来自后端并且无法考虑所有可能性

我将 HTML 数据存储在 Firebase 数据库的一个字段中，其中一些包含<img src='[myImageUrl]'>. 在我的 HTML 文件中显示该字段时，图像已被阻止，我在控制台中收到以下消息：

GET unsafe:[myImageUrl] net::ERR_UNKNOWN_URL_SCHEME

通过几天的研究（无论是在 stackoverflow 上还是独立的），我已经实现了一个管道（如下）来清理和绕过安全性，但是我仍然遇到同样的问题。有人可以对这个问题有所了解，并为我指明解决方案的正确方向吗？

pub.html

<div [innerHTML]="((publication$ | async)?.body) | safeHtml "></div>

安全HTML.pipe.ts

*** 更新 *** 这似乎是 Firebase 存储的问题。在测试期间，我在 Firebase 上的单独实现中托管了相同的图像，并且图像显示没有任何问题。我已经确认每个实现的所有设置都是相同的。不知道为什么会这样，但看来我的代码不是问题。如果其他人遇到过这个问题，请告诉我。谢谢

我在 Angular 9 中有应用程序并使用 DomSanitazer 构建 img url。我得到错误：

在 component.ts 我有：

当我加载 img 时：

在html中我有：

我得到像上面这样的错误。

我遇到了 DomSanitizer.bypassSecurityTrustResourceUrl 没有按预期工作的问题。

我创建了以下管道，可在许多在线资源中找到：

这应该创建一个 SafeResourceUrl，它具有一个包含字符串的属性 'changedThisBreaksApplicationSecurity'。但是在我的情况下，该属性包含一个具有 url 属性的对象，该属性包含字符串。

预期结果： {"changingThisBreaksApplicationSecurity": "whatever the value of url is"}

我的结果： {"changingThisBreaksApplicationSecurity": { "url": "whatever the value of url is" }}

因此，将其设置为 iframe 的 src 时它不起作用，因此作为一种解决方法，我目前正在覆盖该值

safeResource["changingThisBreaksApplicationSecurity"] = safeResource["changingThisBreaksApplicationSecurity"].url;

这显然不是一个好的解决方案，所以我希望其他人知道如何正确解决这个问题。