क्रॉसोरिगिन विशेषता का उद्देश्य ...?

Question 1

छवि और स्क्रिप्ट टैग दोनों में।

मेरी समझ यह थी कि आप अन्य डोमेन पर स्क्रिप्ट और चित्र दोनों का उपयोग कर सकते हैं। तो कोई इस विशेषता का उपयोग कब करता है?

क्या यह तब है जब आप अपनी स्क्रिप्ट और छवि तक पहुंचने के लिए दूसरों की क्षमता को सीमित करना चाहते हैं?

इमेजिस:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin

स्क्रिप्ट:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

Question 2

कोर में सक्षम छवियों को दागी किए बिना तत्व में पुन: उपयोग किया जा सकता है। अनुमत मान हैं:

पृष्ठ पहले से ही आपके प्रश्न का उत्तर देता है।

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

MDN में इस चीज़ के बारे में एक पृष्ठ भी है: https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

क्या यह तब है जब आप अपनी स्क्रिप्ट और छवि तक पहुंचने के लिए दूसरों की क्षमता को सीमित करना चाहते हैं?

नहीं।

Question 3

इसका जवाब स्पेसिफिकेशन में मिल सकता है ।

के लिए img:

crossoriginविशेषता एक है CORS सेटिंग्स विशेषता । इसका उद्देश्य तृतीय-पक्ष साइटों से छवियों को अनुमति देना है जो क्रॉस-ऑरिजिन एक्सेस का उपयोग करने की अनुमति देते हैं canvas।

और इसके लिए script:

crossoriginविशेषता एक है CORS सेटिंग्स विशेषता । यह उन लिपियों के लिए नियंत्रित करता है, जो अन्य मूल से प्राप्त होती हैं , चाहे त्रुटि जानकारी सामने आएगी।

Question 4

इस तरह हमने crossoriginइसे एक scriptटैग में सफलतापूर्वक प्रयोग किया है :

समस्या हमारे पास थी: हम सर्वर का उपयोग करके js त्रुटियों को लॉग करने की कोशिश कर रहे थे window.onerror

लगभग सभी त्रुटियां जो हम लॉग कर रहे थे उनमें यह संदेश था: Script error.और हमें इन js त्रुटियों को हल करने के बारे में बहुत कम जानकारी मिल रही थी।

यह पता चला है कि क्रोम में मूल कार्यान्वयन त्रुटियों की रिपोर्ट करने के लिए

if (securityOrigin()->canRequest(targetUrl)) {
        message = errorMessage;
        line = lineNumber;
        sourceName = sourceURL;
} else {
        message = "Script error.";
        sourceName = String();
        line = 0;
}

भेज देंगे messageके रूप में Script error.अनुरोध किया स्थिर संपत्ति ब्राउज़र की उल्लंघन करता है तो एक ही मूल नीति ।

हमारे मामले में हम एक सीडीएन से स्थैतिक संपत्ति की सेवा कर रहे थे।

जिस तरह से हमने इसे हल किया वह टैग में crossoriginविशेषता जोड़ रहा था script।

PS को इस उत्तर से सारी जानकारी मिल गई

Question 5

यदि आप स्थानीय स्तर पर एक त्वरित कोड विकसित कर रहे हैं, और आप क्रोम का उपयोग कर रहे हैं, तो एक समस्या है। यदि आपका पृष्ठ फ़ॉर्म "फ़ाइल: // xxxx" के URL का उपयोग करके लोड करता है, तो कैनवास पर getImageData () का उपयोग करने का प्रयास विफल हो जाएगा, और क्रॉस-ऑरिजनल सुरक्षा त्रुटि को फेंक देगा, भले ही आपकी छवि उसी से प्राप्त हो रही हो। एचटीएमएल पेज को कैनवास प्रदान करते हुए अपने स्थानीय मशीन पर निर्देशिका। इसलिए यदि आपका HTML पृष्ठ कहा से आया है:

file: // डी: /wwwroot/mydir/mytestpage.html

और आपकी जावास्क्रिप्ट फ़ाइल और छवियों को कहा से लाया जा रहा है:

file: // डी: /wwwroot/mydir/mycode.js

file: // डी: /wwwroot/mydir/myImage.png

तब इस तथ्य के बावजूद कि इन माध्यमिक संस्थाओं को एक ही मूल से प्राप्त किया जा रहा है, सुरक्षा त्रुटि अभी भी फेंक दी गई है।

किसी कारण से, मूल को ठीक से सेट करने के बजाय, क्रोम अपेक्षित संस्थाओं की मूल विशेषता को "शून्य" करने के लिए सेट करता है, इसे getImageData () में अपने ब्राउज़र में HTML पेज खोलने और स्थानीय रूप से डीबगिंग करके परीक्षण कोड को असंभव बनाना प्रदान करता है।

इसके अलावा, छवि के क्रॉसऑरिजिन संपत्ति को "अनाम" पर सेट करने से काम नहीं होता है, इसी कारण से।

मैं अभी भी इसके लिए वर्कअराउंड ढूंढने का प्रयास कर रहा हूं, लेकिन एक बार फिर, ऐसा लगता है कि ब्राउज़र डिबगर्स द्वारा स्थानीय डिबगिंग को यथासंभव दर्दनाक रूप दिया जा रहा है।

मैंने फ़ायरफ़ॉक्स में अपना कोड चलाने की कोशिश की, और फ़ायरफ़ॉक्स को यह सही है, यह पहचान कर कि मेरी छवि HTML और जेएस स्क्रिप्ट के समान मूल से है। इसलिए मैं कुछ संकेतों का स्वागत करता हूं कि क्रोम में समस्या को कैसे प्राप्त किया जाए, जैसे कि फ़ायरफ़ॉक्स काम करता है, यह डिबगर बहुत धीमी गति से है, सेवा हमले के इनकार से हटाए गए एक कदम के बिंदु तक।

Question 6

मैंने पाया है कि क्रॉस-ऑरिजनल एरर को फेंकने के बिना Google क्रोम को फाइल की अनुमति देने के लिए कैसे राजी किया जाए: // संदर्भ।

चरण 1: अन्य ऑपरेटिंग सिस्टम में एक शॉर्टकट (विंडोज) या समकक्ष बनाएं;

चरण 2: लक्ष्य को कुछ इस तरह सेट करें:

"C: \ Program Files (x86) \ Google \ Chrome \ Application \ chrome.exe" --allow-file-access-from-files

वह विशेष कमांड लाइन तर्क, --allow-file-access-from-files, क्रोम को बताता है कि आप फाइल का उपयोग करने दें: // वेब पेज, इमेज आदि के संदर्भ में, हर बार जब आप उन को स्थानांतरित करने की कोशिश करते हैं, तो क्रॉस-ऑरिजनल त्रुटियों को फेंकने के बिना। उदाहरण के लिए, HTML कैनवास पर छवियां। यह मेरे विंडोज 7 सेटअप पर काम करता है, लेकिन यह देखने लायक है कि क्या यह विंडोज 8/10 और विभिन्न लिनक्स डिस्ट्रोस पर भी काम करेगा। यदि यह करता है, तो समस्या हल हो गई - ऑफ़लाइन विकास सामान्य रूप से शुरू होता है।

अब मैं छवियों और JSON डेटा को फ़ाइल से संदर्भित कर सकता हूं: // URI, यदि मैं एक कैनवास पर छवि डेटा स्थानांतरित करने या JSON डेटा को एक फार्म तत्व में स्थानांतरित करने का प्रयास करता हूं, तो क्रोम ने क्रॉस-ऑरिजनल त्रुटियों को फेंक दिया।