2011-01-12 12 views
15

मेरे पास pixie.strd6.com पर चल रही साइट है और छवियों.pixie.strd6.com के लिए एक CNAME के ​​साथ अमेज़ॅन S3 के माध्यम से होस्ट की गई छवियां हैं।एचटीएमएल 5 कैनवास getImageData और समान उत्पत्ति नीति

मैं एक HTML5 कैनवास के लिए इन छवियों को आकर्षित और getImageData विधि कॉल करने में सक्षम होना चाहते हैं, लेकिन यह Error: SECURITY_ERR: DOM Exception 18

मैं window.domain = "pixie.strd6.com" स्थापित करने की कोशिश की है फेंकता है, लेकिन यह है कि कोई प्रभाव नहीं है।

साथ ही, $.get("http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982", function(data) {console.log(data)}) भी एक त्रुटि फेंकता है: XMLHttpRequest cannot load http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982 . Origin http://pixie.strd6.com is not allowed by Access-Control-Allow-Origin.

आदर्श रूप में एचटीएमएल 5 कैनवास उप डोमेन से getImageData बुला ब्लॉक नहीं होगा। मैंने एस 3 में एक्सेस-कंट्रोल-ऑब्जेक्ट-हेडर हेडर सेट करने की कोशिश की है, लेकिन सफल नहीं हुआ है।

कोई भी मदद या कामकाज की सराहना की जाती है।

+34

यह वही मूल नीति ज़्यादा बेवकूफ़ी भरी बात कभी है । अगर मैं जावास्क्रिप्ट का एक दुर्भावनापूर्ण टुकड़ा हूं और मैं दुर्भावनापूर्ण डेटा लोड करना चाहता हूं तो मैं पेज में एक मनमाना स्क्रिप्ट टैग शामिल करूंगा, छवि डेटा से "s3kri7 c0mm4nd5" नहीं पढ़ूंगा। एकमात्र लोग जो छवि डेटा पढ़ना चाहते हैं वे क्लाइंट साइड देव हैं। एक वीपीएन से "शीर्ष गुप्त छवि डेटा" चोरी करने के लिए, यदि आपकी साइट पहले ही xss'd हो चुकी है तो कीलॉगिंग अधिक विनाशकारी होगी। यह सब "सुरक्षा" करने के लिए कार्य करता है, जो वैध डेवलपर्स को कार्यों के सबसे सरल कार्य करने के लिए जावास्क्रिप्ट प्राप्त करने का प्रयास कर रहा है। –

+7

एसओपी यहां एक वैध हमले वेक्टर के खिलाफ सुरक्षा कर रहा है।मान लीजिए कि आपके पास फोटो-शेयरिंग साइट पर एक निजी फोटो एलबम है (या अपनी ऑनलाइन बैंकिंग में संग्रहीत छवियों की जांच करें): गंदे कैनवास सुरक्षा के बिना, * वेब पर किसी भी पेज पर * आपके पास उन छवियों को पकड़ने की शक्ति होगी यदि उन्हें पता था यूआरएल और आप लॉग इन थे, क्योंकि ' 'टैग से भेजे गए अनुरोध ** आपकी कुकीज़ का उपयोग ** **। यहां समस्या XSS'd साइटों से समझौता नहीं है; समस्या यह है कि * वेब पर कोई भी पृष्ठ * आपकी प्रमाणीकरण कुकीज़ का उपयोग करके कैनवास पर छवियां ला सकता है और पढ़ सकता है। – apsillers

+2

** tl; dr: ** जैसा कि यह अभी खड़ा है, कोई भी क्रॉस-डोमेन साइट * 'टैग में * आपकी लेख-आवश्यक छवियों (निजी फ़ोटो, छवियों की जांच आदि) प्रदर्शित कर सकती है, लेकिन, धन्यवाद एसओपी, वे कैनवास में उन छवियों की सामग्री को * पढ़ नहीं सकते हैं, उदाहरण के लिए, उन्हें सर्वर पर सहेजें। – apsillers

उत्तर

6

Amazon recently announced CORS support

We're delighted to announce support for Cross-Origin Resource Sharing (CORS) in Amazon S3. You can now easily build web applications that use JavaScript and HTML5 to interact with resources in Amazon S3, enabling you to implement HTML5 drag and drop uploads to Amazon S3, show upload progress, or update content. Until now, you needed to run a custom proxy server between your web application and Amazon S3 to support these capabilities.

How to enable CORS

0 के लिए एक प्राप्त पैरामीटर हो सकता है

To configure your bucket to allow cross-origin requests, you create a CORS configuration, an XML document with rules that identify the origins that you will allow to access your bucket, the operations (HTTP methods) will support for each origin, and other operation-specific information. You can add up to 100 rules to the configuration. You add the XML document as the cors subresource to the bucket.

1

यह व्यवहार डिज़ाइन है। एचटीएमएल 5 spec के अनुसार, जैसे ही आप एक कैनवास में क्रॉस-मूल छवि खींचते हैं, यह गंदा है और अब आप पिक्सल नहीं पढ़ सकते हैं। उत्पत्ति-मिलान योजना, पूरी तरह से योग्य मेजबान, और गैर-आईई ब्राउज़र, बंदरगाह की तुलना करता है।

+0

तो वर्कअराउंड मेरे वेबसर्वर के माध्यम से प्रॉक्सी को शामिल करना है? –

+4

हां, छवियों को प्रॉक्सी करने के लिए सर्वर कोड काम करेगा, लेकिन यह दुख की बात है कि हमें उस चीज़ पर भरोसा करना होगा जिसकी आवश्यकता नहीं होगी। उन्हें फ्लैश के साथ किए गए लक्ष्य सर्वर पर एक एक्सएमएल फ़ाइल के माध्यम से कम से कम क्रॉस डोमेन नीतियों को लागू करना चाहिए। – Omiod

3

एक संभावित समाधान प्रॉक्सी के रूप में कार्य करने के लिए nginx का उपयोग करना है। यहां S3 तक जाने के लिए http://pixie.strd6.com/s3/ पर जाने वाले यूआरएल को कॉन्फ़िगर करने का तरीका बताया गया है, लेकिन ब्राउज़र अभी भी विश्वास कर सकता है कि यह गैर-क्रॉस डोमेन है।

location /s3/ { 
    proxy_pass http://images.pixie.strd6.com/; 
} 
2

हाल ही में, मैक्स नोवाकोविच द्वारा $.getImageData पर आया था। पृष्ठ में कुछ कोड उदाहरणों के साथ फ़्लिकर फ़ोटो पर लाने और संचालन के कुछ साफ-सुथरे डेमो शामिल हैं।

यह आपको एक मनमानी साइट से जावास्क्रिप्ट-मैनिपुलेट योग्य रूप में एक छवि लाने की अनुमति देता है। यह पृष्ठ पर एक स्क्रिप्ट संलग्न करके काम करता है। स्क्रिप्ट तब Google ऐप इंजन सर्वर से छवि का अनुरोध करती है। सर्वर अनुरोधित छवि प्राप्त करता है और इसे रिले में बेस 64 में परिवर्तित करता है। जब स्क्रिप्ट को बेस 64 प्राप्त होता है, तो यह डेटा को कॉलबैक में पास करता है, जो इसे कैनवास पर खींच सकता है और इसके साथ गड़बड़ करना शुरू कर सकता है।

1

बस एक ही समस्या में फंस गया। मुझे सीओआरएस के बारे में पता चला जो सहायक हो सकता है।

http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#14

इसके बाद से मैं फ़्लिकर से एक छवि हेरफेर करने के लिए कोशिश कर रहा हूँ मेरे लिए काम नहीं किया। तो, मैं अभी भी समाधान की तलाश में हूं।

+0

सीओआरएस ने 'html2canvas' का उपयोग करते समय भी मेरे लिए काम नहीं किया –

2

अतीत में अमेज़ॅन एस 3 ने आपको एक्सेस-कंट्रोल-अनुमति-उत्पत्ति और एक्सेस-कंट्रोल-प्रो-क्रेडेंशियल HTTP हेडर को संशोधित या जोड़ने की अनुमति नहीं दी है, इसलिए रैकस्पेस जैसी विभिन्न सेवाओं पर स्विच करना बेहतर हो सकता है क्लाउड फ़ाइलें या कुछ अन्य सेवा जो करता है।

जोड़ने या संशोधित इस तरह HTTP हेडर:

access-control-allow-origin: [your site] 
access-control-allow-credentials: true 

अधिक जानकारी के लिए http://www.w3.org/TR/cors/#use-cases देखें।

एक ऐसी सेवा का उपयोग करना जो आपको HTTP शीर्षकों को संशोधित करने की अनुमति देता है पूरी तरह से वही मूल समस्या हल करता है।

3

आप PHP का उपयोग कर रहे हैं, तो आप की तरह कुछ कर सकते हैं:

function fileExists($path){ 
     return (@fopen($path,"r")==true); 
    } 
    $ext = explode('.','https://cgdev-originals.s3.amazonaws.com/fp9emn.jpg'); 
    if(fileExists('https://cgdev-originals.s3.amazonaws.com/fp9emn.jpg')){ 
     $contents = file_get_contents('https://cgdev-originals.s3.amazonaws.com/fp9emn.jpg'); 
     header('Content-type: image/'.end($ext)); 
     echo $contents; 
    } 

और, कि php फ़ाइल का उपयोग करता है, तो फ़ाइल generateImage.php कहा जाता है आप <img src="http://GENERATEPHPLOCATION/generateImage.php"/> करते हैं और बाहरी छवि कर सकते हैं की तरह से छवि को एक्सेस यूआरएल फ़ाइल

2

जो लोग एस 3 का उपयोग नहीं करते हैं, वे छवि छवि को एन्कोड करने और इसे JSON ऑब्जेक्ट में लपेटने के लिए एक छवि प्रॉक्सी बनाने का प्रयास कर सकते हैं।

फिर आप JSONP का उपयोग कर सकते हैं जो JSON ऑब्जेक्ट लाने के लिए क्रॉस डोमेन का समर्थन करता है और छवि डेटा को img.src पर असाइन करता है।

मैंने Google App Engine के साथ छवि प्रॉक्सी सर्वर का नमूना कोड लिखा था। https://github.com/flyakite/gae-image-proxy

इस

{ 
    'height': 50, 
    'width' : 50, 
    'data' : 'data:image/jpeg;base64,QWRarjgk4546asd...QWAsdf' 
} 

'डेटा' की तरह प्रारूप में JSON ऑब्जेक्ट रिटर्न बेस 64 प्रारूप में छवि डेटा है। इसे एक छवि को सौंपें।

img.src = result.data; 

छवि अब आपके कैनवास के लिए "साफ" है।

2

अपने S3 बाल्टी अनुमतियों को संपादित करने के लिए:

1) एडब्ल्यूएस प्रबंधन कंसोल में प्रवेश करें और https://console.aws.amazon.com/s3/

2) बाल्टी सूची में से अमेज़न S3 कंसोल खोलें, बाल्टी जिसका गुण आप चाहते हैं खोलने देख सकते हैं और क्लिक करने के लिए

amazon-screen-shot

3 "CORS विन्यास जोड़ने") नियम आप टैग के बीच में जोड़ने के लिए तैयार हैं लिखें <CORSConfiguration>

<CORSConfiguration> 
    <CORSRule> 
    <AllowedOrigin>*</AllowedOrigin> 
    <AllowedMethod>GET</AllowedMethod> 
    <MaxAgeSeconds>3000</MaxAgeSeconds> 
    <AllowedHeader>*</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration> 

आपको कम से नियमों के बारे में अधिक जान सकते हैं छवि पर = गुमनाम http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

4) निर्दिष्ट करें crossorigin आप अपने कैनवास में इस्तेमाल करेंगे