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

186

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:?

— ebi
sumber

1

Perlu diingat bahwa Anda harus menggunakan ng-hrefdalam kasus ini daripada hanya href: docs.angularjs.org/api/ng/directive/ngHref

— hartz89

Saya hanya menggunakan metode pengontrolfunction gotoURL(url) { $window.location.href = url; }

— Todd Hale

362

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.

— Philip Bulley
sumber

11

Dalam Angular 1.2 nama metode menjadi$compileProvider.aHrefSanitizationWhitelist

— Mart

6

ImgSrcSanitizationWhitelist Angular 1.2-rc2 default adalah /^\s*(https?|ftp|file):|data:image\//, untuk mengakses sistem file lokal untuk aplikasi yang dikemas dengan chrome |filesystem:chrome-extension:harus ditambahkan ke akhir regex.

— Henning

29

Perhatikan bahwa dalam Angular 1.2, sebenarnya ada dua metode - Satu untuk tautan (aHrefSanitizationWhitelist) dan satu untuk gambar (imgSrcSanitizationWhitelist). Ini membuat saya terjebak untuk sementara waktu.

— mdierker

1

Untuk Aplikasi yang Dipaket Chrome, Anda harus menambahkannya |blob:chrome-extension:sampai akhir.

— adam8810

1

— Arnaud Leyder

56

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

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

— R. Salisbury
sumber

Saya mencoba menggunakan ekspresi reguler untuk daftar putih tangkapan layar gambar yang saya ambil dengan html2canvas, sekarang tidak ada kesalahan yang mengatakan tidak aman: data; tetapi gambar tidak ditangkap. Adakah ungkapan reguler apa yang akan saya gunakan? Saya mengambil gambar / png sebagai url base64. Sekarang html terlihat seperti: <img ng-src = "data :," class = "img-responsif" src = "data:,"> bukannya url base64 yang sebenarnya

— hakuna

6

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

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

— Ivasyliv
sumber

2

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

— Umur Kontacı
sumber

Saya sudah memiliki arahan ngCsp untuk halaman itu '<html ng-app = "myApp" ng-csp>'. Ini adalah CSP dari manifes saya: "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", Apakah saya perlu mengubah csp di manifes?

— ebi

2

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

        }]);

— DC
sumber

2

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(); 
    }
}

— Raman
sumber

Hai, Bisakah Anda memberikan contoh yang lebih terperinci untuk hal yang sama.

— Jayesh Choudhary

Hai @JayeshChoudhary, Bisakah Anda memberi tahu saya apa yang Anda cari secara spesifik dan saya mungkin bisa membantu Anda dengan lebih baik.

— Raman