AngularJS thay đổi URL thành không an toàn:

Tôi đang cố gắng sử dụng Angular với danh sách các ứng dụng và mỗi ứng dụng là một liên kết để xem ứng dụng chi tiết hơn ( apps/app.id):

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

Mỗi lần tôi nhấp vào một trong những liên kết này, Chrome sẽ hiển thị URL dưới dạng

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

Nơi nào unsafe:đến từ đâu?

Bạn cần thêm rõ ràng các giao thức URL vào danh sách trắng của Angular bằng cách sử dụng biểu thức chính quy. Chỉ http, https, ftpvà mailtođược kích hoạt theo mặc định. Angular sẽ thêm tiền tố vào một URL không có trong danh sách trắng unsafe:khi sử dụng giao thức như chrome-extension:.

Một nơi tốt để đưa danh sách trắng vào chrome-extension:giao thức sẽ nằm trong khối cấu hình của mô-đun của bạn:

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

Quy trình tương tự cũng được áp dụng khi bạn cần sử dụng các giao thức như file:và tel:.

Vui lòng xem tài liệu API AngularJS $ compileProvider để biết thêm thông tin.

Trong trường hợp bất cứ ai cũng có vấn đề này với hình ảnh, cũng:

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

Nếu bạn chỉ cần thư, tel và sms hãy sử dụng điều này:

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

Google Chrome yêu cầu các tiện ích mở rộng của nó hợp tác với Content Security Policy (CSP).

Bạn cần sửa đổi phần mở rộng của mình để đáp ứng các yêu cầu của CSP.

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

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

Ngoài ra, angularJS có ngCspchỉ thị mà bạn cần sử dụng.

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

        }]);

Đối với Angular 2+bạn có thể sử dụng DomSanitizer's bypassSecurityTrustResourceUrlphương pháp.

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

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

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