এনজি-বাইন্ড-এইচটিএমএল-অনিরাপদ সরানো হয়েছে, আমি কীভাবে এইচটিএমএল ইনজেক্ট করব?

Question

আমি আমার নিয়ামককে একটি ডিআইভিতে এইচটিএমএল ইনজেক্ট করার অনুমতি দেওয়ার জন্য $sanitizeসরবরাহকারী এবং ng-bind-htm-unsafeনির্দেশিকাটি ব্যবহার করার চেষ্টা করছি ।

তবে, আমি এটি কাজ করতে পারি না।

<div ng-bind-html-unsafe="{{preview_data.preview.embed.html}}"></div>

আমি আবিষ্কার করেছি যে এটি এঙ্গুলারজেএস (ধন্যবাদ) থেকে সরানো হয়েছে কারণ।

তবে ছাড়া ng-bind-html-unsafe, আমি এই ত্রুটিটি পেয়েছি:

http://errors.angularjs.org/undefined/$sce/unsafe

Comments

1.2.23+ এর জন্য একটি সহজ সমাধান রয়েছে, পোস্ট দেখুন

— জন হেন্কেল

স্ট্যাকওভারফ্লো

— 35813932/

Answer 1

1. আপনার নিশ্চিত করতে হবে যে স্যানিটাইজ.জেগুলি লোড হয়েছে। উদাহরণস্বরূপ, https://ajax.googleapis.com/ajax/libs/angularjs/selLAST_VERSION +/ angular-sanitize.min.js থেকে এটিকে লোড করুন
2. ngSanitizeআপনার app উদাহরণ হিসাবে মডিউল অন্তর্ভুক্ত করা প্রয়োজন :var app = angular.module('myApp', ['ngSanitize']);
3. আপনার কেবলমাত্র ng-bind-htmlমূল htmlবিষয়বস্তুর সাথে আবদ্ধ হওয়া দরকার । আপনার নিয়ামকটিতে আর কিছু করার দরকার নেই। বিশ্লেষণ এবং রূপান্তর স্বয়ংক্রিয়ভাবে ngBindHtmlনির্দেশ দ্বারা সম্পন্ন হয় । (এই How does it workবিভাগটি পড়ুন :) দৃশ্য )। সুতরাং, আপনার ক্ষেত্রে <div ng-bind-html="preview_data.preview.embed.html"></div>কাজ করবে।

Comments

নিরাপদে এটি করা সবচেয়ে পরিষ্কার বিকল্প। এটি আরও নির্ভরতা নিয়ে এসেছিল তবে এটি সুরক্ষা সম্পর্কে তাই কোনও দ্বিধা নেই!

— পিয়েরে মাউই

আয়নিক 1.0.0-beta.13 এর সাথে এটি ব্যবহার করুন

— জেসনফ্লাহার্টি

এটি কিছু ট্যাগ যেমন ইনপুট দিয়ে কাজ করে না। অবশ্যই এটির কাছাকাছি যাওয়ার কোনও সহজ উপায় নেই। সত্যিই হতাশাবোধ।

— কেসি

সর্বাধিক সাধারণ এবং সুরক্ষিত উপায়। আপনি যদি ডাইরেন্ট ভিউতে বাইন্ড-এইচটিএমএল ব্যবহারের পরিকল্পনা করেন তবে এটিকে পছন্দ করুন।

— এডুয়ার্ডোবার্সা

Answer 2

অ্যালেক্সের পরামর্শ অনুসারে আপনার স্কোপে কোনও ফাংশন ঘোষণার পরিবর্তে আপনি এটিকে একটি সাধারণ ফিল্টারে রূপান্তর করতে পারেন:

angular.module('myApp')
    .filter('to_trusted', ['$sce', function($sce){
        return function(text) {
            return $sce.trustAsHtml(text);
        };
    }]);

তারপরে আপনি এটি ব্যবহার করতে পারেন:

<div ng-bind-html="preview_data.preview.embed.html | to_trusted"></div>

এবং এখানে একটি কার্যকারী উদাহরণ: http://jsfiddle.net/leeroy/6j4Lg/1/

Comments

আমার কাছে গিথুবে কৌণিক জন্য দরকারী সরঞ্জামগুলির একটি ছোট সংগ্রহ রয়েছে , আপনি যদি আপত্তি না করেন তবে আমি এই সরঞ্জামগুলিতে এই ফিল্টারটি অন্তর্ভুক্ত করব। আপনি এইচটিএমএলকে বিশ্বাস করলে এটিই সেরা সমাধান IM

— কপাজ

@ কপাজ কোনও সমস্যা নেই তবে আপনি যদি এই উত্তরের একটি লিঙ্ক যুক্ত করেন তবে এটি প্রশংসিত হবে। :-) stackoverflow.com/a/21254635

— লিয়ারয় ব্রুন

খুব সুন্দর. এটি নেস্টেড পুনরাবৃত্তিগুলিতে কবজির মতো কাজ করে!

— জেলি ভার্জিজডেন

এটি প্রতিটি নিয়ামকের কোডিংয়ের চেয়ে অনেক বেশি ভাল সমাধান বলে মনে হয়। মাত্র একটি দ্রুত ফিল্টার এবং সম্পন্ন! আমি এটি টেবিলের সারিগুলি পুনরাবৃত্তি করে পাই হিসাবে সহজ হিসাবে ব্যবহার করেছি .... <td ng-bind-html="representative.primary | to_trusted"></td>

— ফিল নিকোলাস

কৌণিক.মোডুল ('মাই অ্যাপ')। ফিল্টার ('trustAsHtml', ['$ দৃশ্য', ফাংশন ($ দৃশ্য) {প্রত্যাবর্তন $ sce.trustAsHtml}]);

— bradw2k

Answer 3

আপনি ইঙ্গিত করেছেন যে আপনি কৌনিক 1.2.0 ব্যবহার করছেন ... অন্য যে কোনও মন্তব্য হিসাবে চিহ্নিত হয়েছে, হ্রাস ng-bind-html-unsafeকরা হয়েছে।

পরিবর্তে, আপনি এই জাতীয় কিছু করতে চাইবেন:

<div ng-bind-html="preview_data.preview.embed.htmlSafe"></div>

আপনার নিয়ামকটিতে, $sceপরিষেবাটি ইনজেক্ট করুন এবং এইচটিএমএলকে "বিশ্বস্ত" হিসাবে চিহ্নিত করুন:

myApp.controller('myCtrl', ['$scope', '$sce', function($scope, $sce) {
  // ...
  $scope.preview_data.preview.embed.htmlSafe = 
     $sce.trustAsHtml(preview_data.preview.embed.html);
}

নোট করুন যে আপনি 1.2.0-rc3 বা আরও নতুন ব্যবহার করতে চাইবেন। (তারা আরসি 3 এ একটি বাগ ঠিক করেছে যা "নজরদারিদের" বিশ্বস্ত এইচটিএমএলে সঠিকভাবে কাজ করা থেকে বিরত করেছিল))

Comments

আমি উপরেরটি ব্যবহার করার চেষ্টা করেছি তবে এটি আমার কোডটি ভেঙে দেয়। মনে হয় আপনাকে ফাংশন সংজ্ঞা দেওয়ার আগে '$ স্কোপ' প্রিপেন্ড করা দরকার - সম্ভবত এটি একসময় "বোঝা" ছিল, তবে আর নেই। নিম্নলিখিত কাজ করা উচিত:myApp.controller('myCtrl', ['$scope', '$sce', function($scope, $sce) {

— অক্সিজেন

আপনি কৌতূহল অনুসরণ করতে এখানে $ দৃশ্য সম্পর্কে আরও তথ্য দেখতে পারেন ! ;)

— জেনুইনফাফা

মনে রাখবেন যে এটি আপনার কোডে একটি এক্সএসএস সুরক্ষা সমস্যার কারণ হতে পারে। বিকল্প, নিরাপদ স্থির করার জন্য ngSanitizeনীচে ( stackoverflow.com/a/25679834/22227 ) পরামর্শ দেওয়ার উত্তরটি দেখুন ।

— মার্টিন প্রোবস্ট

কেন একটি খারাপ ধারণা docs.google.com/presentation/d/...

— user857990

trustAsHtmlএটি যা বলে তা করে, এটি যে কোনও আগত এইচটিএমএল কোডকে বিশ্বাস করে , যার ফলে ক্রস-সাইট স্ক্রিপ্টিং (এক্সএসএস) আক্রমণ হতে পারে

— আলেকসি সলোভই

Answer 4

আমার জন্য, সবচেয়ে সহজ এবং সবচেয়ে নমনীয় সমাধান হ'ল:

<div ng-bind-html="to_trusted(preview_data.preview.embed.html)"></div>

এবং আপনার নিয়ামকের সাথে ফাংশন যুক্ত করুন:

$scope.to_trusted = function(html_code) {
    return $sce.trustAsHtml(html_code);
}

$sceআপনার নিয়ামকের প্রারম্ভিককরণে যুক্ত ভুলবেন না ।

Comments

কন্ট্রোলার বিশ্বাসযোগ্য এইচটিএমএলকে $ সুযোগে ফিরিয়ে আনার জন্য আরও সহজবোধ্য বলে মনে হচ্ছে

— 22-28 এ প্রভাবিত করুন

এটি $ দৃশ্যে অসীম লুপ নিক্ষেপ করতে পারে, এর মতো কিছু করুন: $ સ્કોপ.ট্রেস্ট = {}; $ স্কোপ.টো_ট্রেস্ট = ফাংশন (এইচটিএমএল_কোড) {রিটার্ন $ স্কোপ.টিস্টেড [এইচটিএমএল_কোড] || ($ স্কোপ.ট্রেস্ট [এইচটিএমএল_কোড] = $ sce.trustAsHtml (এইচটিএমএল_কোড)); };

— এও_

এইচটিএমএলকে বিশ্বস্ত হিসাবে আশীর্বাদযুক্ত প্রতিটি সমাধান একটি এক্সএসএস দুর্বলতার পরিচয় দেয়। নিরাপদ স্থির করার জন্য দয়া করে নীচে এনজি সানাইটিজ (স্ট্যাকওভারফ্লো.com/a/25679834/22227) পরামর্শ দেওয়ার উত্তরটি দেখুন।

— মিশেল স্প্যাগনোলো

Answer 5

আমার মতে এটির সেরা সমাধানটি হ'ল:

1. একটি কাস্টম ফিল্টার তৈরি করুন যা সাধারণ.মডিউল.জেএস ফাইল হতে পারে - উদাহরণস্বরূপ - আপনার অ্যাপ্লিকেশনটির মাধ্যমে ব্যবহৃত:

   var app = angular.module('common.module', []);
   
   // html filter (render text as html)
   app.filter('html', ['$sce', function ($sce) { 
       return function (text) {
           return $sce.trustAsHtml(text);
       };    
   }])

2. ব্যবহার:

   <span ng-bind-html="yourDataValue | html"></span>

এখন - আমি কেন দেখছি না কেন নির্দেশিকাটি এর কার্যকারিতার অংশ হিসাবে ng-bind-htmlনা trustAsHtmlকরে - এটি আমার কাছে কিছুটা বোকা বলে মনে হয় যা তা হয় না

যাইহোক - এইভাবেই আমি এটি করি - 67% সময়, এটি সদা সময় কাজ করে।

Comments

অনুসন্ধান এবং প্রতিস্থাপনের জন্য আপনি নীচের রেজেক্স ব্যবহার করতে পারেন: regex: ng-bind-html-unsafe = "((? :( ?!")।) *) "প্রতিস্থাপন: এনজি-বাইন্ড-এইচটিএমএল =" ($ 1) | এইচটিএমএল "উপরের ফিল্টার সহ

— জর্জ ডোনেভ

এইচটিএমএলকে বিশ্বস্ত হিসাবে আশীর্বাদযুক্ত প্রতিটি সমাধান একটি এক্সএসএস দুর্বলতার পরিচয় দেয়। নিরাপদ স্থির করার জন্য দয়া করে নীচে এনজি সানাইটিজ (স্ট্যাকওভারফ্লো.com/a/25679834/22227) পরামর্শ দেওয়ার উত্তরটি দেখুন।

— মিশেল স্প্যাগনোলো

Answer 6

আপনি নিজের সাধারণ অনিরাপদ এইচটিএমএল বাঁধাই তৈরি করতে পারেন, অবশ্যই যদি আপনি ব্যবহারকারীর ইনপুট ব্যবহার করেন তবে এটি কোনও সুরক্ষা ঝুঁকি হতে পারে।

App.directive('simpleHtml', function() {
  return function(scope, element, attr) {
    scope.$watch(attr.simpleHtml, function (value) {
      element.html(scope.$eval(attr.simpleHtml));
    })
  };
})

Comments

এই নির্দেশিকাটি কি ব্যবহার করতে পারে না $sce.trustAsHtml?

— কান্টুর

Answer 7

আপনাকে এনজি-বাইন্ড-এইচটিএমএল-অনিরাপদ ভিতরে {{} use ব্যবহার করার দরকার নেই:

<div ng-bind-html-unsafe="preview_data.preview.embed.html"></div>

এখানে একটি উদাহরণ: http://plnkr.co/edit/R7JmGIo4xcJoBc1v4iki?p= পূর্বরূপ

} {}} অপারেটরটি মূলত এনজি-বাইন্ডের জন্য কেবলমাত্র একটি শর্টহ্যান্ড, সুতরাং আপনি যা চেষ্টা করেছিলেন তা একটি বাঁধার ভিতরে বাঁধার সমান, যা কাজ করে না।

Comments

যাইহোক, আমি এটি সরিয়ে ফেললে আমি কোনও ইনজেকশন পাই না। এবং দস্তাবেজ অত্যন্ত বিভ্রান্তিকর হয় একটি একক} ব্যবহার করে, docs-angularjs-org-dev.appspot.com/api/...

— metalaureate

খুব অদ্ভুত. আমি এটি নিশ্চিত হওয়ার জন্য কেবল এটি পরীক্ষা করেছি এবং আমার জন্য এটি প্রত্যাশা অনুযায়ী কাজ করেছে। আমি সম্মত হই যে একক {the ডক্সে কিছুটা বিভ্রান্তিকর, তবে সেগুলি স্ট্রিংয়ের আক্ষরিক হিসাবে নয়, অভিব্যক্তির প্রতিনিধিত্ব হিসাবে বোঝানো হয়েছে। আমি আমার উত্তরটি একটি পরিশ্রমী প্লঙ্কের সাথে আপডেট করেছি।

— ksimons

এছাড়াও, আপনি যদি ইতিমধ্যে 1.2.0 ব্যবহার করে থাকেন তবে এখানে মন্তব্যগুলি দেখুন যেমন এনজি-বাইন্ড-এইচটিএমএল-অনিরাপদ সরানো হয়েছে: docs.angularjs.org/api/ng.directive:ngBindHtml

— ksimons

আমি 1.2 ব্যবহার করছি। :( গ্রার! কীভাবে কোনও অনিরাপদ এইচটিএমএল ইনজেক্ট করতে পারেন? আমি এটি ছাড়াই এই ত্রুটিটি পেয়েছি

— metalaureate

{{}}অপারেটর বাঁধাই ব্যর্থ, ইঙ্গিতটি জন্য ধন্যবাদ আমার সমস্যা ঘটাচ্ছে ছিল!

— ক্যাম্পবেলন

Answer 8

আমারও একই সমস্যা ছিল তবুও গিথুবটিতে হোস্ট করা আমার মার্কডাউন ফাইলগুলি থেকে সামগ্রী পাওয়া যায়নি।

অ্যাপ্লিকেশনটিতে D sceDelegateProvider- এ একটি শ্বেতলিস্ট (যুক্ত গিথুব ডোমেন সহ) স্থাপন করার পরে এটি একটি কবজির মতো কাজ করেছে।

বর্ণনা: আপনি যদি অন্য কোনও ইউআরএল থেকে সামগ্রী লোড করেন তবে বিশ্বস্ত হিসাবে মোড়কের পরিবর্তে একটি শ্বেত তালিকাটি ব্যবহার করা।

দস্তাবেজ: D মন্বন্তরে ডিজিটালপ্রাইডার এবং এনজিইনক্লুড (আনতে, সংকলন এবং বাহ্যিক এইচটিএমএল খণ্ড সহ)

Answer 9

কঠোর প্রাসঙ্গিক এস্কেপিং সম্পূর্ণরূপে অক্ষম করা যেতে পারে, আপনাকে এইচটিএমএল ব্যবহার করে ইনজেক্ট করার অনুমতি দেয় ng-html-bind । এটি একটি অনিরাপদ বিকল্প, তবে পরীক্ষার সময় সহায়ক।

এঙ্গুলারজেএস ডকুমেন্টেশন$sce থেকে উদাহরণ :

angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) {
  // Completely disable SCE.  For demonstration purposes only!
  // Do not use in new projects.
  $sceProvider.enabled(false);
});

উপরের কনফিগারেশন বিভাগটি আপনার অ্যাপ্লিকেশনটিতে সংযুক্ত করা আপনাকে এইচটিএমএল ইনজেক্ট করার অনুমতি দেবে ng-html-bind, কিন্তু ডক মন্তব্য হিসাবে:

সামান্য কোডিং ওভারহেডের জন্য এসসিই আপনাকে প্রচুর সুরক্ষা সুবিধা দেয়। এসসিই অক্ষম অ্যাপ্লিকেশন নেওয়া এবং এটি নিজেই সুরক্ষিত করা বা পরবর্তী পর্যায়ে এসসিই সক্ষম করা আরও শক্ত হবে। এসসিই নিষ্ক্রিয় করার জন্য এটি বোধগম্য হতে পারে যেখানে আপনার কাছে প্রচুর বিদ্যমান কোড রয়েছে যা এসসিই চালু হওয়ার আগে লেখা হয়েছিল এবং আপনি সেগুলিতে একটি সময়ে মডিউল স্থানান্তর করছেন।

Comments

সম্পর্কে জেনে রাখা ভাল তবে অবশ্যই এমন কিছু যা যত্ন সহকারে পরিচালনা করা উচিত।

— আইকনোক্লাস্ট

Answer 10

আপনি এটির মতো ফিল্টার ব্যবহার করতে পারেন

angular.module('app').filter('trustAs', ['$sce', 
    function($sce) {
        return function (input, type) {
            if (typeof input === "string") {
                return $sce.trustAs(type || 'html', input);
            }
            console.log("trustAs filter. Error. input isn't a string");
            return "";
        };
    }
]);

ব্যবহার

<div ng-bind-html="myData | trustAs"></div>

এটি অন্যান্য সংস্থার ধরণের জন্য ব্যবহার করা যেতে পারে, উদাহরণস্বরূপ iframes এবং এখানে ঘোষিত অন্যান্য ধরণের জন্য উত্স লিঙ্ক