[html] crossorigin 속성의 목적…?

Program / 글쓴이

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

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

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

이미지 :

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 : // 참조를 허용하도록 Chrome을 설득하는 방법을 알아 냈습니다.

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

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

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

이 특별한 명령 줄 인수 인 –allow-file-access-from-files는 파일을 전송할 때마다 출처 간 오류를 발생시키지 않고 웹 페이지, 이미지 등에 대한 file : // 참조를 사용할 수 있도록 Chrome에 지시합니다. 예를 들어 이미지를 HTML 캔버스에 추가합니다. 내 Windows 7 설정에서 작동하지만 Windows 8/10 및 다양한 Linux 배포판에서도 작동하는지 확인하는 것이 좋습니다. 문제가 해결되면 오프라인 개발이 정상적으로 재개됩니다.

이제 이미지 데이터를 캔버스로 전송하거나 JSON 데이터를 양식 요소로 전송하려고 할 때 Chrome에서 교차 출처 오류를 발생시키지 않고 file : // URI에서 이미지와 JSON 데이터를 참조 할 수 있습니다.

답변