AngularJS change les URL en "unsafe:" dans la page d'extension
Je suis en train d'utiliser Angulaire avec une liste d'applications, et chacun est un lien pour voir une application plus en détail (apps/app.id
):
<a id="{{app.id}}" href="apps/{{app.id}}" >{{app.name}}</a>
Chaque fois que je clique sur l'un de ces liens, Chrome affiche l'URL comme
unsafe:chrome-extension://kpbipnfncdpgejhmdneaagc.../apps/app.id
D'où vient le unsafe:
?
6 réponses
Vous devez ajouter explicitement des protocoles D'URL à la liste blanche D'Angular à l'aide d'une expression régulière. Seulement http
, https
, ftp
et mailto
sont activées par défaut. Angulaire sera préfixe non-adresse URL avec unsafe:
lors de l'utilisation d'un protocole tel que chrome-extension:
.
Un bon endroit pour mettre en liste blanche le protocole chrome-extension:
serait dans le bloc de configuration de votre module:
var app = angular.module( 'myApp', [] )
.config( [
'$compileProvider',
function( $compileProvider )
{
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
// Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)
}
]);
La même procédure s'applique également lorsque vous avez besoin d'utiliser des protocoles tels que file:
et tel:
.
Veuillez consulter les AngularJS $ compileProvider API documentation pour plus d'informations.
Dans le cas où quelqu'un a ce problème avec les images, aussi:
app.config(['$compileProvider', function ($compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
}]);
Si vous avez juste besoin de courrier, de téléphone et de sms, utilisez ceci:
app.config(['$compileProvider', function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|sms|tel):/);
}]);
Google Chrome a besoin de ses extensions pour coopérer avec Content Security Policy (CSP)
.
Vous devez modifier votre extension pour répondre aux exigences de CSP
.
Https://developer.chrome.com/extensions/contentSecurityPolicy.html
Https://developer.mozilla.org/en-US/docs/Security/CSP
En outre, angularJS a la directive ngCsp
que vous devez utiliser.
<a href="{{applicant.resume}}" download> download resume</a>
var app = angular.module("myApp", []);
app.config(['$compileProvider', function($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
}]);
Pour Angular 2+
vous pouvez utiliser la méthode bypassSecurityTrustResourceUrl
de DomSanitizer
.
import {DomSanitizer} from '@angular/platform-browser';
class ExampleComponent {
sanitizedURL : SafeResourceUrl;
constructor(
private sanitizer: DomSanitizer){
this.sanitizedURL = this.sanitizer.bypassSecurityTrustResourceUrl();
}
}