AngularJS 将 URL 更改为“不安全:"在扩展页面 [英] AngularJS changes URLs to "unsafe:" in extension page

问题描述

我正在尝试将 Angular 与应用程序列表一起使用，每个应用程序都是一个链接，可以更详细地查看应用程序 (apps/app.id):

I am trying to use Angular with a list of apps, and each one is a link to see an app in more detail (apps/app.id):

<a id="{{app.id}}" href="apps/{{app.id}}" >{{app.name}}</a>

每次我点击这些链接之一时，Chrome 都会将 URL 显示为

Every time I click on one of these links, Chrome shows the URL as

unsafe:chrome-extension://kpbipnfncdpgejhmdneaagc.../apps/app.id

unsafe: 从何而来?

推荐答案

您需要使用正则表达式将 URL 协议显式添加到 Angular 的白名单.默认情况下仅启用 http、https、ftp 和 mailto.当使用诸如 chrome-extension: 之类的协议时，Angular 会在未列入白名单的 URL 前加上 unsafe: 前缀.

You need to explicitly add URL protocols to Angular's whitelist using a regular expression. Only http, https, ftp and mailto are enabled by default. Angular will prefix a non-whitelisted URL with unsafe: when using a protocol such as chrome-extension:.

将 chrome-extension: 协议列入白名单的好地方是在您的模块的配置块中:

A good place to whitelist the chrome-extension: protocol would be in your module's config block:

var app = angular.module( 'myApp', [] )
.config( [
    '$compileProvider',
    function( $compileProvider )
    {   
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
        // Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)
    }
]);

当您需要使用诸如 file: 和 tel: 之类的协议时，同样的过程也适用.

The same procedure also applies when you need to use protocols such as file: and tel:.

有关详细信息，请参阅 AngularJS $compileProvider API 文档.

Please see the AngularJS $compileProvider API documentation for more info.

这篇关于AngularJS 将 URL 更改为“不安全:"在扩展页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！