'Nepavyko gauti vaizdų duomenų iš drobės, nes drobė buvo sutepta kryžminio kilmės duomenimis'

Unable Get Image Data From Canvas Because Canvas Has Been Tainted Cross Origin Data



Pirma, problemos aprašymas:

Paleiskite „JavaScript“ scenarijų naršyklėje, palaikančioje HTML5. Scenarijus daugiausia skirtas manipuliuoti etiketės drobe tinklalapyje. Klaidos operacija yra„getImageData“ (img, ……),



„Chrome“ klaidos pranešimas yra toks: 'Nepavyko gauti vaizdo duomenų iš drobės, nes drobė buvo sutepta kryžminės kilmės duomenimis',



Klaidos pranešimas „Firefox“ yra: 'Apsaugos klaidos kodas: „1000'



Pagrindinis kodas yra toks:

vaizdas
init:function(){ var img=new Image()  img.src='http://10.0.5.199:8080/hadoopWebGis2/jsp/map.jsp?img=0_0_0' var ctx=this.context3D img.onload=function(){ ctx.drawImage(img,0,0) var imgData=ctx.getImageData(0,0,img.width,img.height) //Error line ctx.putImageData(imgData,50,50) } },
vaizdas

Antra, tyrinėjimas ir atsakymas

Kai ieškojau internete, pastebėjau, kad dauguma jų taip sakė„GetImageData“ funkcija turi būti vykdoma serverio pusėje. Jei nėra serverio aplinkos (pvz., Tik vietinis HTML puslapis, valdykite vietinį vaizdą), jis pranešNepavyko gauti vaizdų duomenų iš drobės, nes drobė buvo sutepta kryžminio kilmės duomenimis'klaida.



Bet akivaizdu, kad aukščiau pateikta mano pavyzdinė programa veikia runų serveryje ir vis tiek pranešė apie šią klaidą. Taigi, kokia yra problema?

Vėliau radau „stackoverflow“ problemos priežastį.„Stoveroverflow“ svetainė yra labai rekomenduojama. Tai labai gerai žinoma techninė klausimų ir atsakymų svetainė, apimanti įvairiausias temas, įskaitant C, C ++, Java, internetą ir Linux. Dauguma Kinijos studentų nemėgsta skaityti internetinių puslapių angliškai, tačiau iš tikrųjų yra daug problemų, susijusių su kinų tinklalapiais. Yra daug būdų, kaip rasti atsakymus daugelyje puikių angliškų svetainių, pavyzdžiui, „stackoverflow“. )

Štai atsakymas į šį klausimą apie srautą:

Išversta taip: Siekdama išvengti apgaulės, naršyklė stebės vaizdo duomenis. Kai įdėsite vieną'Skiriasi nuo drobės domeno'Kai vaizdas dedamas ant drobės, drobė tampa „sutepta“ (užteršta, purvina) ir naršyklė neleidžia jums manipuliuoti jokiais drobės pikseliais. Tai labai naudinga blokuojant kelių tipų XSS / CSRF atakas (dvi tipines kelių svetainių atakas).

Svarbiausias minėtų žodžių punktas yra tas, kad raudonai pažymėtas tekstas „skiriasi nuo drobės domeno“, todėl patikrinau savo vaizdo užklausos ir puslapio užklausos adresą ir pastebėjau, kad jų laukai tikrai skiriasi.

Image request address: http://10.0.5.199:8080/hadoopWebGis2/jsp/map.jsp?img=0_0_0  Enter the page in the browser to stop at: http://summer1:8080/hadoopWebGis2/jsp/map3D.html

(Nors „hosts“ failo atvaizdavimas yra: 10.0.5.199: summer1, yra tikslinga sakyti, kad naršyklė automatiškai konvertuos abu, bet aš nežinau, kodėl, bet jis pripažįstamas kaip kitas domenas.)

Po to, kai modifikacija bus tokia, problema bus išspręsta

vaizdas
Image request address: http://summer1:8080/hadoopWebGis2/jsp/map.jsp?img=0_0_0 Enter the page in the browser to stop at: http://summer1:8080/hadoopWebGis2/jsp/map3D.html  -----------------or------------------------- Image request address: http://10.0.5.199:8080/hadoopWebGis2/jsp/map.jsp?img=0_0_0  Enter the page in the browser to stop at: http://10.0.5.199:8080/hadoopWebGis2/jsp/map3D.html
vaizdas

-------------------------------------------------- -------------------------------------------------- -------------------------------------------------- ---

Ne tema: Kodėl nėra serverio aplinkos (pavyzdžiui, tiesiog vietinis HTML puslapis, valdantis vietinį vaizdą), jis pranešNepavyko gauti vaizdų duomenų iš drobės, nes drobė buvo sutepta kryžminio kilmės duomenimis„Klaida?

Asmeninis supratimas: vietinio tinklalapio domenas yrabyla: //,Toks kaip: failas: ///home/summer/Desktop/test.html Vietinis paveikslėlis tikrai neprasideda failu: //. Pvz., Paveikslėlis „Linux“ aplinkoje yra: /home/summer/Desktop/test.png, o paveikslėlis „Windows“ aplinkoje yra: c: tmp test .png.

Originalas iš: http://www.cnblogs.com/jdksummer/articles/2565998.html

Perspausdinta: https://www.cnblogs.com/9546-blog/p/3392897.html