কেন ক্যানভাস.টোডাটা ইউআরএল () সুরক্ষা ব্যতিক্রম ছুঁড়ে ফেলে?


90

আমি কি পর্যাপ্ত ঘুম পেয়েছি না কি? এই নিম্নলিখিত কোড

var frame=document.getElementById("viewer");
frame.width=100;
frame.height=100;

var ctx=frame.getContext("2d");
var img=new Image();
img.src="http://www.ansearch.com/images/interface/item/small/image.png"

img.onload=function() {
    // draw image
    ctx.drawImage(img, 0, 0)

    // Here's where the error happens:
    window.open(frame.toDataURL("image/png"));
}

এই ত্রুটি নিক্ষেপ করছে:

SECURITY_ERR: DOM Exception 18

এটি কাজ করার কোন উপায় নেই! দয়া করে কেউ কি এটি ব্যাখ্যা করতে পারেন?



4
এই সমাধানটি অ্যাডোব আকাশ ব্যবহার করে না এমন লোকদের পক্ষে কার্যকর বলে মনে হচ্ছে না।
স্পষ্টরবোট

উত্তর:


68

ইন চশমা এটা বলেছেন:

যখনই কোনও ক্যানভাস উপাদানের টোডাআরএলআউট () পদ্ধতিটি বলা হয়েছে যার মূল-পরিষ্কার পতাকাটি মিথ্যাতে সেট করা হয়, তখন পদ্ধতিটিকে অবশ্যই একটি SECURITY_ERR ব্যতিক্রম বাড়াতে হবে।

যদি চিত্রটি অন্য সার্ভার থেকে আসে তবে আমি মনে করি না আপনি ডেটা ইউআরএল () ব্যবহার করতে পারবেন


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

4
মনে রাখবেন সাবডোমেনটিও গুরুত্বপূর্ণ। আমার অভিজ্ঞতায়, ক্রোমে কমপক্ষে, একটি SECURITY_ERR: ডোম এক্সেপশন 18 উত্সাহিত করা হয়েছে এমন একটি কল করার সময় উত্থাপিত হবে যা সাবডোমেনগুলি জুড়ে রয়েছে: ১. উদাহরণস্বরূপ @some/path/index.html foo- এ কোনও ভিডিও বা চিত্রের জন্য .example.com 2. যখন 1 তে একই পৃষ্ঠায় যাচ্ছেন তবে URL উদাহরণ. com/some/path/index.html URL লিখে এবং তারপরে www.example.com এ কোনও ভিডিও বা চিত্রের জন্য ডেটআরল () এ কল করার চেষ্টা করবেন
স্যাম ডটন

4
@ অ্যালফোনসএমএল, সম্ভবত আমি ভুল, তবে "যদি কোনও আক্রমণকারী আপনার কোনও ব্যক্তিগত সাইটে থাকা কোনও ছবির নামটি অনুমান করতে সক্ষম হয়" তবে সম্ভবত তিনি ব্রাউজারের সাথে কার্ল নন এমন চিত্রটি ধরবেন। আমার দৃষ্টিকোণ: সর্বজনীন ইউআরএল পাবলিক সামগ্রী।
আত্মঘাতী

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

6
@ কিলিয়ান্যাক কোনও আক্রমণকারীকে আপনার ব্রাউজারকে (প্রমাণীকরণের কুকিজ সহ) একটি চিত্র আনতে এবং আক্রমণকারীকে এর সামগ্রীগুলি প্রেরণ করা থেকে বিরত রাখতে এই বিধিনিষেধটি বিদ্যমান ; আক্রমণকারীটির কাছে আপনার কুকিজ নেই, তাই আপনার পাওয়ার অধিকারী একই সংস্থানগুলি পেতে তিনি কার্ল ব্যবহার করতে পারবেন না। "পাবলিক ইউআরএল, পাবলিক কন্টেন্ট" চিন্তার একটি বরং ত্রুটিযুক্ত উপায়: আমার ফেসবুক পৃষ্ঠাতে জনসাধারণের মুখোমুখি উপাদান রয়েছে, তবে এমন অনেক কিছুই রয়েছে যা কেবলমাত্র সঠিক প্রমাণীকরণের টোকেন সহ অ্যাক্সেসযোগ্য।
অ্যাপসিলাররা

18

চিত্রের অবজেক্টগুলিতে ক্রস অরিজিন অ্যাট্রিবিউট সেট করা আমার পক্ষে কাজ করেছিল (আমি ফ্যাব্রিক ব্যবহার করছিলাম)

    var c = document.createElement("img");
    c.onload=function(){
        // add the image to canvas or whatnot
        c=c.onload=null
    };
    c.setAttribute('crossOrigin','anonymous');
    c.src='http://google.com/cat.png';

যারা ফ্যাব্রিক ব্যবহার করছেন তাদের জন্য, এখানে চিত্র.প্রেমআরএল কীভাবে প্যাচ করবেন

// patch fabric for cross domain image jazz
fabric.Image.fromURL=function(d,f,e){
    var c=fabric.document.createElement("img");
    c.onload=function(){
        if(f){f(new fabric.Image(c,e))}
        c=c.onload=null
    };
    c.setAttribute('crossOrigin','anonymous');
    c.src=d;
};

ধন্যবাদ, এটি ক্রোমে আমার জন্য কাজ করে। যদিও আমি ফ্যাব্রিক.জেএস ব্যবহার করছি না
ফিলিপ 007

আমি ফ্যাব্রিক ব্যবহার করি কিন্তু সমাধান করতে পারিনি। আপনি এই কোডটি দিয়ে কীভাবে এটি করবেন? ফাংশন wtd_load_bg_image (img_url) {if (img_url) {var bg_img = নতুন চিত্র (); বিজি_আইএমজি.অনলোড = ফাংশন () vas ক্যানভাসবজ.সেটব্যাকগ্রাউন্ড ইমেজ (বিজি_আইএমজি.সিআরসি, ক্যানভাসবজ.রেন্ডিআল.বাইন্ড (ক্যানভাস ওবিজে), {অরিজিনএক্স: 'বাম', আদি: 'শীর্ষ', বাম: 0, শীর্ষ: 0}); }; bg_img.src = img_url; }}
HOY

ফায়ারফক্সেও কাজ করে।
ভ্যানোম

16

যদি চিত্রটি কোনও হোস্টে হোস্ট করা থাকে যা অ্যাক্সেস-নিয়ন্ত্রণ-অনুমতি-উত্স বা অ্যাক্সেস-নিয়ন্ত্রণ-অনুমতি দিন - শংসাপত্রগুলির মধ্যে দুটি সেট করে, আপনি ক্রস অরিজিন রিসোর্স শেয়ারিং (সিওআরএস) ব্যবহার করতে পারেন। আরও তথ্যের জন্য এখানে (ক্রসরিগিন বৈশিষ্ট্য) দেখুন।

আপনার অন্যান্য বিকল্পটি আপনার সার্ভারের জন্য একটি এন্ডপয়েন্ট রয়েছে যা একটি চিত্র আনবে এবং পরিবেশন করবে। (যেমন। http: //? your_host / শেষবিন্দু URL = URL টি ) যে পদ্ধতির লেটেন্সি হচ্ছে downside হয় এবং তাত্ত্বিক অপ্রয়োজনীয় আনা হচ্ছে।

যদি আরও বিকল্প সমাধান থাকে তবে আমি সেগুলি সম্পর্কে আগ্রহী হব।


হাই, আমি কেবল এটিই করেছি, আমার অ্যাক্সেস-কন্ট্রোল-অলজন-অরিজিন রয়েছে: * ছবিগুলিতে আমার ক্রসরিগিন = 'বেনামে' রয়েছে, তারপরে আমি ক্যানভাসে ছবিটি আঁকি, তারপরে আমি ডেটাআরএল কল করি এবং আমি এখনও নিরাপদ_আরআর পাচ্ছি : ডিওএম ব্যতিক্রম 18
স্ক্রাট

13

মনে হচ্ছে এটি প্রতিরোধের একটি উপায় আছে যদি চিত্রের হোস্টিং চিত্রের সংস্থান এবং ব্রাউজারের জন্য নিম্নলিখিত HTTP শিরোনামগুলি সরবরাহ করতে সক্ষম হয় CORS সমর্থন করে:

অ্যাক্সেস-নিয়ন্ত্রণ-অনুমতি-উত্স: *
অ্যাক্সেস-নিয়ন্ত্রণ-অনুমতি-শংসাপত্রসমূহ: সত্য

এটি এখানে বলা হয়েছে: http://www.w3.org/TR/cors/#use-cases


4
অ্যাক্সেস-নিয়ন্ত্রণ-অনুমতি-শংসাপত্রসমূহ: সত্য অ্যাক্সেস-নিয়ন্ত্রণ-অনুমতি-উত্স সঙ্গে কাজ করবে না: *। যখন সাবেক সেট করা থাকে, আধুনিক একটি মূল মান, না থেকে একটি ওয়াইল্ড কার্ড মান থাকা উচিত developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS
সিলভার গনজালেস

4

অবশেষে আমি সমাধানটি খুঁজে পেলাম। শুধু যোগ দরকার crossOriginতৃতীয় PARAM যেমন fromURLfunc

fabric.Image.fromURL(imageUrl, function (image) {
            //your logic
    }, { crossOrigin: "Anonymous" });

2

আমার একই সমস্যা ছিল এবং সমস্ত চিত্র একই ডোমেনে হোস্ট করা হয় ... সুতরাং, যদি কারও একই সমস্যা হয় তবে আমি কীভাবে সমাধান করেছি তা এখানে:

আমার দুটি বোতাম ছিল: একটি ক্যানভাস উত্পন্ন করার জন্য এবং অন্যটি ক্যানভাস থেকে চিত্র উত্পন্ন করার জন্য। এটি কেবল আমার পক্ষে কাজ করেছিল, এবং দুঃখিত যে আমি কেন জানি না, যখন আমি প্রথম কোডটিতে সমস্ত কোড লিখেছিলাম। সুতরাং আমি যখন এটি ক্লিক করি এটি একই সাথে ক্যানভাস এবং চিত্র উত্পন্ন করে ...

কোডগুলি যখন বিভিন্ন ফাংশনে ছিল তখন আমার সবসময় এই সুরক্ষা সমস্যা থাকে ... = /


2

আমি এটি ব্যবহার করে এটি কাজ করতে সক্ষম হয়েছি:

.htaccessআপনার উত্স সার্ভারে আপনার প্রথম লাইনে এটি লিখুন

Header add Access-Control-Allow-Origin "*"

তারপরে কোনও <img>উপাদান তৈরি করার সময় , এটি নিম্নলিখিত হিসাবে করুন:

// jQuery
var img = $('<img src="http://your_server/img.png" crossOrigin="anonymous">')[0]

// or pure
var img = document.createElement('img');
img.src='http://your_server/img.png';
img.setAttribute('crossOrigin','anonymous');

1

আপনি আপনার আইডিতে স্পেস রাখতে পারবেন না

হালনাগাদ

আমার ধারণা হ'ল চিত্রটি যেখানে আপনি স্ক্রিপ্টটি চালাচ্ছেন তার চেয়ে আলাদা সার্ভারে রয়েছে। আপনার নিজের পৃষ্ঠায় এটি চালানোর সময় আমি আপনার ত্রুটিটির সদৃশ করতে সক্ষম হয়েছি, তবে একই ডোমেনে হোস্ট করা একটি চিত্র ব্যবহার করার মুহুর্তে এটি কার্যকর হয়েছে। সুতরাং এটি সুরক্ষা সম্পর্কিত - আপনার সাইটে ছবিটি রাখুন। কেহ কেন জানেন কেন এই ঘটনা?


0

আপনি যদি কেবল কোনও ক্যানভাসে কিছু চিত্র আঁকেন তবে নিশ্চিত হন যে আপনি একই ডোমেন থেকে চিত্রগুলি লোড করছেন।

www.example.com করার ভিন্ন example.com

সুতরাং আপনার ঠিকানা বারে থাকা আপনার চিত্র এবং url একই, www বা না তা নিশ্চিত করুন।


0

আমি ফ্যাব্রিক.জেএস ব্যবহার করছি এবং টুডাআরএল ইউএল-এর পরিবর্তে ট্যাটলেসজেএসএন ব্যবহার করে এটি সমাধান করতে পারছি:

canvas.toDatalessJSON({ format: 'jpeg' }).objects[0].src

সম্পাদনা: কিছু নয়। উপরের অঙ্কন ছাড়াই কেবল পটভূমি চিত্রটি জেপিজিতে রফতানির ফলস্বরূপ এটি সর্বোপরি কার্যকর ছিল না।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.