विस्तार पृष्ठ में AngularJS "असुरक्षित:" URL बदलता है

186

मैं ऐप की सूची के साथ कोणीय का उपयोग करने की कोशिश कर रहा हूं, और प्रत्येक एक ऐप को और अधिक विस्तार से देखने के लिए एक लिंक है apps/app.id:

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

जब भी मैं इनमें से किसी एक लिंक पर क्लिक करता हूं, तो क्रोम URL को दिखाता है

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

कहाँ से unsafe:आता है?

— ebi
स्रोत

1

ध्यान रखें कि आपको ng-hrefइस मामले में केवल के बजाय का उपयोग करना चाहिए href: docs.angularjs.org/api/ng/directive/ngHref

— hartz89

मैं सिर्फ एक नियंत्रक विधि का उपयोग करता हूंfunction gotoURL(url) { $window.location.href = url; }

— टॉड हेल

362

आपको नियमित रूप से अभिव्यक्ति का उपयोग करके कोणीय के श्वेतसूची में URL प्रोटोकॉल को स्पष्ट रूप से जोड़ना होगा। केवल http, https, ftpऔर mailtoडिफ़ॉल्ट रूप से सक्षम कर रहे हैं। कोणीय एक गैर-श्वेतसूची URL को उपसर्ग के साथ unsafe:प्रयोग करेगा जब वह किसी प्रोटोकॉल का उपयोग करता है chrome-extension:।

chrome-extension:प्रोटोकॉल को श्वेतसूची में रखने का एक अच्छा स्थान आपके मॉड्यूल के कॉन्फ़िगरेशन ब्लॉक में होगा:

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

कृपया अधिक जानकारी के लिए AngularJS $ compileProvider API प्रलेखन देखें ।

— फिलिप बुले
स्रोत

11

कोणीय 1.2 में विधि नाम बन गया$compileProvider.aHrefSanitizationWhitelist

— मार्ट

6

डिफ़ॉल्ट imgSrcSanitizationWhitelist कोणीय 1.2-आरसी 2 है /^\s*(https?|ftp|file):|data:image\//, क्रोम पैक किए गए ऐप के लिए स्थानीय फाइल सिस्टम तक पहुंचने |filesystem:chrome-extension:के लिए रेगेक्स के अंत में जोड़ा जाना चाहिए।

— हेनिंग

29

ध्यान दें कि कोणीय 1.2 में, वास्तव में दो विधियाँ हैं - लिंक के लिए एक (aHrefSanitizationWhitelist) और छवियों के लिए एक (imgSrcSanitizationWhitelist)। इससे मैं कुछ देर के लिए अटक गया था।

— mdierker

1

Chrome पैकेज्ड ऐप के लिए आपको |blob:chrome-extension:अंत में जोड़ना होगा।

— adam8810

1

— अरनॉड लेडर

56

मामले में किसी को भी छवियों के साथ यह समस्या है:

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

— आर। सालिसबरी
स्रोत

मैंने सफेद स्क्रीन के लिए नियमित अभिव्यक्ति का उपयोग करने की कोशिश की छवि स्क्रीन शॉट्स मैं html2canvas के साथ कैप्चर कर रहा हूं, अब कोई त्रुटि नहीं है जो असुरक्षित, डेटा कहती है; लेकिन छवि पर कब्जा नहीं हो रहा है। किसी भी विचार जो मैं नियमित अभिव्यक्ति का उपयोग करेगा? मैं base64 url के रूप में एक इमेज / png कैप्चर कर रहा हूं। अब html जैसा दिखता है: <img ng-src = "data :," class = "img-responsive" src = "data:," के बजाय वास्तविक base64 url

— hakuna

6

अगर आपको सिर्फ मेल, टेली और एसएमएस की जरूरत है तो इसका इस्तेमाल करें:

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

— Ivasyliv
स्रोत

2

Google Chrome को सहयोग करने के लिए इसके एक्सटेंशन की आवश्यकता होती है Content Security Policy (CSP)।

की आवश्यकताओं को पूरा करने के लिए आपको अपना विस्तार संशोधित करना होगा CSP।

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

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

इसके अलावा, कोणीयजेएस का ngCspनिर्देश है जिसे आपको उपयोग करने की आवश्यकता है।

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

— उमूर कोंटाकी
स्रोत

मेरे पास उस पृष्ठ '<html ng-app = "myApp" ng-csp>' के लिए पहले से ही ngCsp निर्देश है। यह मेरे प्रकट से CSP है: "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", क्या मुझे प्रकट में csp को बदलने की आवश्यकता है?

— ईबी

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

        }]);

— डीसी
स्रोत

2

के लिए Angular 2+आप उपयोग कर सकते हैं DomSanitizerकी bypassSecurityTrustResourceUrlविधि।

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

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

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

— रमन
स्रोत

नमस्ते, क्या आप उसी के लिए अधिक विस्तृत उदाहरण प्रदान कर सकते हैं।

— जयेश चौधरी

हाय @ जयेश चौधरी, क्या आप मुझे बता सकते हैं कि आप विशेष रूप से क्या देख रहे हैं और मैं आपकी बेहतर मदद करने में सक्षम हो सकता हूं।

— रमन