crossorigin 속성의 목적…?

crossorigin 속성의 목적…?

---

이미지 및 스크립트 태그 모두에서.

내 이해는 다른 도메인의 스크립트와 이미지에 모두 액세스 할 수 있다는 것입니다. 그렇다면 언제이 속성을 사용합니까?

다른 사람이 귀하의 스크립트와 이미지에 액세스하는 것을 제한하려는 경우입니까?

이미지 :

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

스크립트 :

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

---

CORS 지원 이미지는 오염되지 않고 요소에서 재사용 할 수 있습니다. 허용되는 값은 다음과 같습니다.

페이지는 이미 질문에 대한 답변입니다.

교차 출처 이미지가있는 경우 캔버스에 복사 할 수 있지만 이로 인해 캔버스가 "오염"되어 읽을 수 없습니다 (예 : 사이트 자체가 액세스 할 수없는 인트라넷에서 이미지를 "훔칠"수 없음). ). 그러나 CORS를 사용하면 이미지가 저장된 서버가 브라우저에 교차 출처 액세스가 허용됨을 알릴 수 있으므로 캔버스를 통해 이미지 데이터에 액세스 할 수 있습니다.

MDN은 또한 이것에 대한 페이지를 가지고 있습니다 : https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

다른 사람이 귀하의 스크립트와 이미지에 액세스하는 것을 제한하려는 경우입니까?

아니.

---

대답은 사양 에서 찾을 수 있습니다 .

대상 img:

crossorigin속성은입니다 CORS 설정 속성 . 그 목적은 교차 출처 액세스를 허용하는 타사 사이트의 이미지를 canvas.

및 script:

crossorigin속성은입니다 CORS 설정 속성 . 다른 출처 에서 가져온 스크립트의 경우 오류 정보가 노출되는지 여부를 제어합니다.

---

다음은 태그 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.요청 된 고정 자산은 브라우저의 위반하면 동일 출처 정책을 .

우리의 경우에는 cdn에서 정적 자산을 제공했습니다.

우리가 해결 한 방법 crossorigin은 script태그에 속성을 추가하는 것이 었습니다 .

PS 이 답변 에서 모든 정보를 얻었습니다.

---

로컬에서 빠른 코드를 개발하고 Chrome을 사용하는 경우 문제가 있습니다. 페이지가 "file : // xxxx"형식의 URL을 사용하여로드되는 경우 캔버스에서 getImageData ()를 사용하려고하면 실패하고 이미지를 동일한 위치에서 가져 오더라도 출처 간 보안 오류가 발생합니다. 캔버스를 렌더링하는 HTML 페이지로 로컬 컴퓨터의 디렉토리. 따라서 HTML 페이지를 가져온 경우 다음과 같이 말하십시오.

file : // D : /wwwroot/mydir/mytestpage.html

다음과 같이 Javascript 파일과 이미지를 가져오고 있습니다.

file : // D : /wwwroot/mydir/mycode.js

file : // D : /wwwroot/mydir/myImage.png

그런 다음 이러한 보조 엔터티가 동일한 출처에서 가져와진다는 사실에도 불구하고 보안 오류가 여전히 발생합니다.

어떤 이유로 든 원본을 올바르게 설정하는 대신 Chrome은 필수 항목의 원본 속성을 "null"로 설정하여 브라우저에서 HTML 페이지를 열고 로컬에서 디버깅하는 것만으로는 getImageData ()와 관련된 코드를 테스트 할 수 없습니다.

또한 같은 이유로 이미지의 crossOrigin 속성을 "익명"으로 설정해도 작동하지 않습니다.

나는 여전히 이것에 대한 해결 방법을 찾으려고 노력하고 있지만 다시 한번, 브라우저 구현자가 가능한 한 로컬 디버깅을 고통스럽게 렌더링하는 것 같습니다.

방금 Firefox에서 코드를 실행 해 보았고 Firefox에서 내 이미지가 HTML 및 JS 스크립트와 동일한 출처임을 인식하여 올바르게 작동합니다. 따라서 현재 Firefox가 작동하는 동안 디버거가 서비스 거부 공격에서 한 단계 제거 될 정도로 느리기 때문에 Chrome에서 문제를 해결하는 방법에 대한 몇 가지 힌트를 환영합니다 .

---

교차 출처 오류없이 file : // 참조를 허용하도록 Google 크롬을 설득하는 방법을 알아 냈습니다.

1 단계 : 바로 가기 (Windows) 또는 다른 운영 체제에서 이에 상응하는 것을 만듭니다.

2 단계 : 대상을 다음과 같이 설정합니다.

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

That special command line argument, --allow-file-access-from-files, tells Chrome to let you use file:// references to web pages, images etc., without throwing cross-origin errors every time you try to transfer those images to an HTML canvas, for example. It works on my Windows 7 setup, but it's worth checking to see if it will work on Windows 8/10 and various Linux distros too. If it does, problem solved - offline development resumes as normal.

Now I can reference images and JSON data from file:// URIs, without Chrome throwing cross-origin errors if I attempt to transfer image data to a canvas, or transfer JSON data to a form element.

참고URL : https://stackoverflow.com/questions/18336789/purpose-of-the-crossorigin-attribute