在使用 Angular 开发扩展页面的过程中，你可能会遇到一个问题：Angular 在加载某些外部资源时，会将 URL 更改为 "unsafe:"。这是由于 Angular 的安全策略所导致的，目的是防止跨站脚本攻击（XSS）。
问题原因
当 Angular 在扩展页面中加载外部资源时（如图片、CSS 或 JavaScript 文件），它会检查这些资源的源是否与当前域名相同。如果不同，则认为这是一次跨站请求，并且将 URL 更改为 "unsafe:"。
这种安全策略可以有效地防止 XSS 攻击，但也会影响到某些情况下的资源加载。例如，在使用第三方库或 CDN 时，这些资源的域名通常与当前域名不同，因此会被认为是不安全的。
解决方法
要解决这个问题，有两种方法可供选择。
方法一：使用 $sce.trustAsResourceUrl()
Angular 提供了一个 $sce 服务，可以用来信任指定的 URL。你可以在组件中注入 $sce 服务，并使用 trustAsResourceUrl() 方法来指定需要信任的 URL。
示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- ------- - ---- ----------------------------
------------
--------- ------
------------ ----------------------
--
------ ----- ------------ -
------------------- ---------- ------------- --
------ ------------------ -------- ------- -
------ ---------------------------------------------------
-
-在模板中使用：
<img [src]="getTrustedUrl('https://example.com/image.jpg')">方法二：禁用安全策略
如果你确定你的页面没有 XSS 漏洞，并且需要加载跨域资源，可以考虑禁用 Angular 的安全策略。这可以通过在应用程序的启动时设置一个配置选项来实现。
示例代码：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ---------------------- - ---- ------------------------------------ ------ - --------- - ---- --------------- ------ - ------------------ -------------- - ---- ---------------- ----------------- -------------------- --------------------------------------------------- - -- ---------------- ---- ------- ------- -- -- ------- ---------------------- ----- -- ------ --------------- ---- ---
总结
在开发 Angular 扩展页面时，URL 被更改为 "unsafe:" 可能会是一个问题。我们可以使用 $sce.trustAsResourceUrl() 方法来信任指定的 URL，或者禁用 Angular 的安全策略。但需要注意的是，禁用安全策略会降低页面的安全性，应谨慎使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25059