AngularJS mengubah URL menjadi "tidak aman:" di halaman ekstensi

Saya mencoba menggunakan Angular dengan daftar aplikasi, dan masing-masing adalah tautan untuk melihat aplikasi lebih detail ( apps/app.id):

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

Setiap kali saya mengklik salah satu tautan ini, Chrome menampilkan URL sebagai

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

Dari mana datangnya unsafe:?

Anda perlu menambahkan protokol URL secara eksplisit ke daftar putih Angular menggunakan ekspresi reguler. Hanya http, https, ftpdan mailtodiaktifkan secara default. Angular akan mengawali awalan URL yang tidak masuk daftar putih unsafe:ketika menggunakan protokol seperti chrome-extension:.

Tempat yang baik untuk membuat daftar putih chrome-extension:protokol adalah di blok konfigurasi modul Anda:

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

Prosedur yang sama juga berlaku ketika Anda perlu menggunakan protokol seperti file:dan tel:.

Silakan lihat dokumentasi API $ compileProvider AngularJS untuk info lebih lanjut.

Dalam hal siapa pun memiliki masalah dengan gambar ini, juga:

app.config(['$compileProvider', function ($compileProvider) {
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
}]);

Jika Anda hanya membutuhkan surat, telp dan sms gunakan ini:

app.config(['$compileProvider', function ($compileProvider) {
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|sms|tel):/);
}]);

Google Chrome memerlukan ekstensi untuk bekerja sama dengan Content Security Policy (CSP).

Anda perlu mengubah ekstensi Anda untuk memenuhi persyaratan CSP.

https://developer.chrome.com/extensions/contentSecurityPolicy.html

https://developer.mozilla.org/en-US/docs/Security/CSP

Juga, angularJS memiliki ngCsparahan yang perlu Anda gunakan.

http://docs.angularjs.org/api/ng.directive:ngCsp

<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):/);

        }]);

Untuk Angular 2+Anda dapat menggunakan DomSanitizer's bypassSecurityTrustResourceUrlmetode.

import {DomSanitizer} from '@angular/platform-browser';

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

    constructor(
        private sanitizer: DomSanitizer){
        this.sanitizedURL = this.sanitizer.bypassSecurityTrustResourceUrl(); 
    }
}