AngularJS ইউআরএলগুলিকে এক্সটেনশন পৃষ্ঠায় "অনিরাপদ:" এ পরিবর্তন করে

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

আপনাকে নিয়মিত অভিব্যক্তি ব্যবহার করে অ্যাংুলারের শ্বেত তালিকাতে স্পষ্টভাবে ইউআরএল প্রোটোকল যুক্ত করতে হবে। শুধু http, https, ftpএবং mailtoডিফল্ট ভাবে সক্ষম করা আছে। কৌণিক 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 $ compilaProvider 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):/);
}]);

— আর সালিসবারি
সূত্র

আমি এইচটিএমএল 2 ক্যানভাসের সাথে ক্যাপচার করছি এমন চিত্রের স্ক্রিন শটগুলিকে সাদা করার জন্য নিয়মিত অভিব্যক্তিটি ব্যবহার করার চেষ্টা করেছি, এখন কোনও ত্রুটি নেই যা নিরাপদ বলেছে: ডেটা; তবে চিত্রটি ধরা পড়ছে না। কোন নিয়মিত ভাবটি আমি ব্যবহার করব? বেস / ইউআরএল হিসাবে আমি একটি চিত্র / পিএনজি ক্যাপচার করছি। এখন এইচটিএমএল দেখে মনে হচ্ছে: <img ng-src = "data :," class = "img-প্রতিক্রিয়াশীল" src = "ডেটা:,"> আসল বেস 64 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

— উমুর কনটাসে
সূত্র

আমার কাছে ইতিমধ্যে সেই পৃষ্ঠার << এইচটিএমএল এনজি-অ্যাপ = "মাই অ্যাপ" এনজি-সিএসপি> 'এর জন্য এনজিসিএসপি নির্দেশনা রয়েছে। এটি আমার ম্যানিফেস্টের সিএসপি: আমার কি সিএসপি "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", পরিবর্তন করতে হবে?

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

        }]);

— ডিসি
সূত্র

2

আপনি এর পদ্ধতি Angular 2+ব্যবহার করতে পারেন ।DomSanitizerbypassSecurityTrustResourceUrl

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

class ExampleComponent {
    sanitizedURL : SafeResourceUrl;

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

— রমন
সূত্র

হাই, আপনি কি এর জন্য আরও বিস্তৃত উদাহরণ প্রদান করতে পারেন?

— জয়েশ চৌধারি

হাই @ জয়েশ চৌধুরী, আপনি কি দয়া করে আমাকে বিশেষভাবে যা খুঁজছেন তা আমাকে জানান এবং আমি আপনাকে আরও ভালভাবে সহায়তা করতে সক্ষম হতে পারি।

— রমন