无涯教程网

Angular 如何设置而不会导致unsafe value不安全值异常</a></h1> </div> <div class="entry-info" style="padding: 4px 0 0 0;"> <time class="entry-date published"> 发布于06月26日 </time> </div> <div class="intro mb20"> <p>我正在编写一个涉及设置<code>iframe</code> <code>src</code>属性的教程: </p> <pre><code><iframe width="100%" height="300" src="{{video.url}}"></iframe> </code></pre> <p>这引发了一个异常:</p> <pre><code>Error: unsafe value used in a resource URL context at DomSanitizationServiceImpl.sanitize... </code></pre> <p>我已经try 过使用<code>[src]</code>个绑定，但没有成功.</p> </div> </div> </div> <div class="q-single mt20"> <div class="intro mb20"> <div class="layui-card"> <div class="layui-card-header"><h2>推荐答案</h2></div> <div class="layui-card-body"> <p><strong>Update v8</strong>个</p> <p>下面的答案是有效的，但只有<a href="https://netbasal.com/angular-2-security-the-domsanitizer-service-2202c83bd90" rel="noreferrer">exposes your application to XSS security risks!</a>个. 不使用<code>this.sanitizer.bypassSecurityTrustResourceUrl(url)</code>，建议使用<code>this.sanitizer.sanitize(SecurityContext.URL, url)</code></p> <p><strong>Update</strong> </p> <p>对于<strong>RC.6^</strong>版本，请使用<strong>DomSanitizer</strong></p> <p><strong>100</strong></p> <p>一个很好的 Select 是使用纯管道:</p> <pre class="lang-typescript prettyprint-override"><code>import { Pipe, PipeTransform } from '@angular/core'; import { DomSanitizer} from '@angular/platform-browser'; @Pipe({ name: 'safe' }) export class SafePipe implements PipeTransform { constructor(private sanitizer: DomSanitizer) {} transform(url) { return this.sanitizer.bypassSecurityTrustResourceUrl(url); } } </code></pre> <p>记住将新的<code>SafePipe</code>添加到AppModule的<code>declarations</code>数组中.(<a href="https://angular.io/docs/ts/latest/guide/pipes.html" rel="noreferrer">as seen on documentation</a>)</p> <pre class="lang-typescript prettyprint-override"><code>@NgModule({ declarations : [ ... SafePipe ], }) </code></pre> <p>html</p> <pre class="lang-typescript prettyprint-override"><code><iframe width="100%" height="300" [src]="url | safe"></iframe> </code></pre> <p><strong>100</strong></p> <p>如果您使用<code>embed</code>标签，这可能会让您感兴趣:</p> <ul> <li><a href="https://stackoverflow.com/questions/39393431/how-with-angular2-rc-6-disable-sanitize-on-embed-html-tag-which-display-pdf/39394814#39394814">how with angular2 rc.6 disable sanitize on embed html tag which display pdf</a>个</li> </ul> <hr> <p><strong>Old version RC.5</strong>个</p> <p>你可以像这样利用<code>DomSanitizationService</code>:</p> <pre class="lang-typescript prettyprint-override"><code>export class YourComponent { url: SafeResourceUrl; constructor(sanitizer: DomSanitizationService) { this.url = sanitizer.bypassSecurityTrustResourceUrl('your url'); } } </code></pre> <p>然后在模板中绑定到<code>url</code>:</p> <pre class="lang-typescript prettyprint-override"><code><iframe width="100%" height="300" [src]="url"></iframe> </code></pre> <p>不要忘记添加以下导入:</p> <pre class="lang-typescript prettyprint-override"><code>import { SafeResourceUrl, DomSanitizationService } from '@angular/platform-browser'; </code></pre> <p><strong>100</strong></p> </div> <div class="layui-card-footer"> <span id="share"></span> </div> </div> </div> </div> <div class="entry-content mt20"> <h2 class="tip_title">Angular相关问答推荐</h2> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/angular/78384003.html" title="Angular material 输入字段中的图标未显示">Angular material 输入字段中的图标未显示</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/angular/78280552.html" title="Angular 信号不更新afterNextender()">Angular 信号不更新afterNextender()</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/angular/78240580.html" title="如何在Angular 17中使用Angular—calendum？">如何在Angular 17中使用Angular—calendum？</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/angular/78046410.html" title="Primeng 12Angular 12自定义库：错误符号字段集声明于...在编译保存后未从Primeng/fieldset中导出">Primeng 12Angular 12自定义库：错误符号字段集声明于...在编译保存后未从Primeng/fieldset中导出</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/angular/78035343.html" title="Toastr在独立组件上的Angular17实现">Toastr在独立组件上的Angular17实现</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/angular/77944861.html" title="Angular：将服务注入非独立组件导致应用程序中断">Angular：将服务注入非独立组件导致应用程序中断</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/angular/77905107.html" title="路由在全局导航中总是给我/甚至使用相对路径">路由在全局导航中总是给我/甚至使用相对路径</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/angular/77905615.html" title="更改物料设计中的复选框勾选 colored颜色 ">更改物料设计中的复选框勾选 colored颜色 </a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/angular/77517946.html" title="Angular 显示来自文字数组的SVG路径">Angular 显示来自文字数组的SVG路径</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/angular/77380039.html" title="ION标签-从子对象中加载页，保留父对象的S内容">ION标签-从子对象中加载页，保留父对象的S内容</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/angular/75419535.html" title="无法在 Angular 中使用 CryptoJS 正确加密">无法在 Angular 中使用 CryptoJS 正确加密</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/angular/75067143.html" title="手动关闭 SSE 连接：Angular">手动关闭 SSE 连接：Angular</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/angular/72660096.html" title="当访问令牌在 MSAL for Angular 中过期时如何重定向用户？">当访问令牌在 MSAL for Angular 中过期时如何重定向用户？</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/angular/72563694.html" title="Angular 项目构建仅在 GitHub Actions 上失败">Angular 项目构建仅在 GitHub Actions 上失败</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/angular/52389376.html" title="如何重新加载当前页面？">如何重新加载当前页面？</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/angular/48493652.html" title="Angular 5 Mat-grid 列表响应式">Angular 5 Mat-grid 列表响应式</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/angular/35985009.html" title="Angular 2 - 什么是Root Scope？">Angular 2 - 什么是Root Scope？</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/angular/45351434.html" title="使用 DomSanitizer 绕过安全性后，安全值必须使用 [property]=binding">使用 DomSanitizer 绕过安全性后，安全值必须使用 [property]=binding</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/angular/43919927.html" title="Angular Material2 主题 - 如何设置应用程序背景？">Angular Material2 主题 - 如何设置应用程序背景？</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/angular/39514564.html" title="'Observable<Event>' 类型上不存在属性 'filter'">'Observable<Event>' 类型上不存在属性 'filter'</a></h3> <div class="clear"></div> </div> </div> <div class="layui-col-xs12 layui-col-md3 pl20 mt20"> <div class="layui-card"> <div class="layui-card-header">实用课程推荐</div> <div class="layui-card-body"> <ul class="geek-ul"> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100023701?code=W3erMfRVguPHX4r2KRl5qpsEeZrXr7s7oSgQq4JmYaI%3D" rel="nofollow" title="">软件工程之美 -〔宝玉〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100023901?code=GYlKg8fg7cWg-RppmPoxuE51%2F2Fq3e0j0vABLk%2FR66Y%3D" rel="nofollow" title="">Java并发编程实战 -〔王宝令〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100027701?code=hje2p86qogonZF81-vDxwnzJE28VsR0eincsPcqymGQ%3D" rel="nofollow" title="">深入拆解Tomcat & Jetty -〔李号双〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100032301?code=2eKjdut%2FBlT93TopVHkxCofVEQzwtwUuegMjyyPiSBg%3D" rel="nofollow" title="">消息队列高手课 -〔李玥〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100053301?code=AmbCXHv7bDB9w%2FTeJRVwmF9zGj7VOYZG9-SumPgZ8BM%3D" rel="nofollow" title="">正则表达式入门课 -〔涂伟忠〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100056201?code=4Zc5h23223z2NzxZkpnQrOEn9i3zFTFM%2Fu0omH7XtMg%3D" rel="nofollow" title="">如何看懂一幅画 -〔罗桂霞〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100057401?code=Ls2%2FCaDNkA8NZrUxcZvRL-vbC4nUXnuGGROUTqsRLw0%3D" rel="nofollow" title="">分布式数据库30讲 -〔王磊〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100065501?code=mHaH9tANneybWmMrEPOfsXFcj013nLkKGljxsxMXw8s%3D" rel="nofollow" title="">A/B测试从0到1 -〔张博伟〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="http://gk.link/a/12ak9" rel="nofollow" title="">HarmonyOS快速入门与实战 -〔QCon+案例研习社〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100098901?code=f59Y55i2NOqNB6EzRru83EFjv7ticHkC-pUlmeFgDWg%3D" rel="nofollow" title="">攻克视频技术 -〔李江〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100099801?code=9muU7veSY90nAEp42Co8zEzusw5OHk51Ou9hTOYQN4M%3D" rel="nofollow" title="">郭东白的架构课 -〔郭东白〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100101501?code=C1N8856VeXdP1ZCWABOyLDENtFQifhEzKDlP4AtqQtQ%3D" rel="nofollow" title="">Web漏洞挖掘实战 -〔王昊天〕</a></p> </li> </ul> </div> </div> <div class="layui-card"> <div class="layui-card-header">相关教程推荐</div> <div class="layui-card-body"> <ul class="geek-ul"> <li class="geek-li layui-elip"> <p class="geekgay"><a href="https://www.learnfk.com/asp.net_mvc/asp.net_mvc-tutorial.html" title="ASP.Net MVC">无涯教程 - ASP.Net MVC教程</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a href="https://www.learnfk.com/csharp/csharp-tutorial.html" title="C#">无涯教程 - C#教程</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a href="https://www.learnfk.com/json/json-tutorial.html" title="JSON">无涯教程 - JSON教程</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a href="https://www.learnfk.com/spring-boot/spring-boot-tutorial.html" title="Spring Boot">无涯教程 - Spring Boot教程</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a href="https://www.learnfk.com/ssh/ssh-tutorial-intro.html" title="SSH">无涯教程 - SSH教程</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a href="https://www.learnfk.com/java8/java8-tutorial-intro.html" title="Java 8 简明教程">无涯教程 - Java 8 简明教程教程</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a href="https://www.learnfk.com/python-web-sec/python-web-sec-tutorial-intro.html" title="Python Web 渗透测试">无涯教程 - Python Web 渗透测试教程</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a href="https://www.learnfk.com/mysql8/mysql8-tutorial-intro.html" title="MySQL8 秘籍">无涯教程 - MySQL8 秘籍教程</a></p> </li> </ul> </div> </div> </div> </div> </div> </div> <div class="layui-footer footer footer-doc"> <div class="layui-main"> <div style="margin: 10px 0;text-align: center;" class="frient-link"> <a href="https://www.xiuxiandou.com" target="_blank" title="休闲君评测"><span>休闲君评测</span></a> |  <a href="https://www.toolfk.com" title="Programmer's toolbox" target="_blank">TOOLFK工具网</a> |  <a href="https://www.poemfk.com" title="古文传承网" target="_blank">古诗文网</a> |  <a href="https://www.lxlinux.net" title="良许Linux教程网" target="_blank">良许Linux教程网</a> |  <a href="https://foofish.net" title="Python之禅" target="_blank">Python之禅</a> |  <a href="https://redstonewill.com" title="红色石头" target="_blank">红色石头</a> |  <a href="https://www.rudangla.com" title="入党申请书" target="_blank">入党申请书</a> |  </div> <p> © 2020 <a href="https://www.learnfk.com/" title="无涯教程">Hi LearnFk</a> <a href="https://support.qq.com/products/163835" target="_blank" rel="nofollow">意见反馈</a> <a href="/disclaimer.html" title="免责声明" rel="nofollow">免责声明</a> <a href="/aboutus.html" title="关于我们" rel="nofollow">关于我们</a> <a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow">桂ICP备11002319号-3</a> <span class="pl20"> 友链&广告位+QQ: 1963612630 </span> </p> </div> </div> <script src="/guide/js/layer/layer.js" charset="utf-8" ></script> <script> IS_ARTICLE = false; SHOW_JUMP = false; IS_SIGN = ""; </script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?autoload=true&lang=css" async></script> <script src="/guide/js/article.min.js?v4=1" async charset="utf-8"></script> <script src="/guide/js/clipboard.min.js" async charset="utf-8"></script> <ul class="layui-fixbar"> <li class="layui-icon layui-icon-transfer change-theme" lay-type="bar1" title="切换模式"></li> <li class="layui-icon layui-icon-print" lay-type="bar1" title="打印"></li> <li class="layui-icon layui-icon-login-wechat login-wechat" lay-type="bar1" title="关注我们"></li> <li class="layui-icon layui-fixbar-top layui-icon-top" lay-type="top" title="Top"></li> </ul> <script type="text/javascript"> $(function(){ $("body").delegate(".login-wechat","click",function(e){ e.stopPropagation(); var offset = "100px"; layer.open({ content: '<img src="/common/learnfk.jpg?v=2" width="220px;">', scrollbar: false, title:"关注我们", offset:offset }); }); $("a").click(function(){ if($(this).hasClass("demo-copy")){ return; } if($(this).hasClass("noload")){ return; } layer.load(); setTimeout(function(){ layer.closeAll(); },3000); }); $("pre").map(function(item){ if(!$(this).hasClass("prettyprint")){ $(this).addClass("prettyprint"); $(this).before('<div class="demo-view"><a href="javascript:;" class="demo-copy" title="Copy Code">复制代码</a></div>'); } }); $("body").delegate(".demo-view a.demo-copy", "click", function () { var that = $(this); var tran_text = that.parent(".demo-view").next(".prettyprint").text(); new ClipboardJS("a.demo-copy", { text: function (trigger) { layer.msg("复制成功"); return tran_text; } }); }); }); </script> <script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=5fab445f7efc200012ec7197&product=sop' async='async' defer></script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234706520155299" crossorigin="anonymous"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-31321715-15"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-31321715-15'); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?fbe07850803babb5bcec215bbd0dc6a4"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?44422bbce4f642f723e6931a2fce9d632bd6aa77580fe4aad81efd527b26ed8a30632485602430134f60bc55ca391050b680e2741bf7233a8f1da9902314a3fa"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script> </body> </html>