crossorigin 속성의 목적 ...? 이미지 태그와 스크립트 태그 모두

Question

나의 이해는 다른 도메인에 두 스크립트와 이미지에 액세스 할 수 있도록했다. 언제이 속성을 사용합니까? 당신이 당신의 스크립트와 이미지에 액세스하기 위해 다른 사람의 능력을 제한 할 때

이 있습니까?

이미지

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

스크립트

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

Answer 1

CORS 가능 이미지 오염시키지 않고 소자에 재사용 될 수있다. 허용되는 값은 다음과 같습니다 페이지가 이미 귀하의 질문에 대답을

.

원산지 이미지가있는 경우 캔버스에 복사 할 수 있지만 캔버스를 읽지 못하게합니다 (예 : 인트라넷에서 이미지를 훔칠 수 없기 때문에 사이트 자체가 ')에 대한 액세스 권한이 있습니다. 그러나 CORS에게 이미지 출처 간 액세스가 허용 된 브라우저를 말할 수있는 저장되고, 따라서 당신은 캔버스를 통해 이미지 데이터에 액세스 할 수있는 서버를 사용하여. 당신이 당신의 스크립트와 이미지에 액세스하기 위해 다른 사람의 능력을 제한 할 때 https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

이인가 :

MDN도 바로이 일에 대한 페이지가?

번호

Answer 2

대답은 the specification에서 찾을 수 있습니다. img를 들어

:

crossorigin 속성은 CORS settings attribute이다. 이 기능의 목적은 교차 원점 액세스를 canvas과 함께 사용할 수있는 타사 사이트의 이미지를 허용하는 것입니다.

및 script에 대한

:

crossorigin 속성은 CORS settings attribute이다. 오류 정보가 노출 될지 여부를 다른 origins에서 얻은 스크립트에 대해 제어합니다.

Answer 3

이것은 우리가 성공적으로 crossorigin가 script 태그에 속성 사용했던 방법입니다

문제 우리는했다 : 우리는 window.onerror

를 사용하여 서버에 JS 오류를 기록하려고했던 거의 모든 오류 우리는이 메시지를 가지고 로깅이 있다고 : Script error. 우리는 이러한 JS 오류를 해결하는 방법에 대한 약간의 정보를 얻을 수 있었다.

은 크롬의 기본 구현이 요구 된 고정 자산이 브라우저의 same-origin policy을 위반하는 경우 Script error.로 message를 보내드립니다 오류

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

를보고하는 것으로 나타났다.

우리의 경우 우리는 cdn에서 정적 자산을 서비스하고있었습니다.

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

P. 모든 정보를 얻었습니다 this answer

Answer 4

코드를 로컬에서 빠르게 개발하고 있고 Chrome을 사용하는 경우 문제가 있습니다. 페이지가 "file : // xxxx"형식의 URL을 사용하여로드 된 경우 캔버스에서 getImageData()를 사용하면 이미지가 동일한 위치에서 가져 오는 경우에도 실패하고 원본 교차 보안 오류가 발생합니다 디렉토리를 캔버스를 렌더링하는 HTML 페이지로 사용하십시오. HTML 페이지를 가져올 경우에 따라서에서 말 :

파일 : // D :

/wwwroot/mydir/mytestpage.html과 자바 스크립트 파일과 이미지에서 반입되고 말 :

파일 : // D는 :

파일을 /wwwroot/mydir/mycode.js : // D : /wwwroot/mydir/myImage.png

다음

이 보조 기관이 동일한에서 반입되고 있다는 사실에도 불구하고 보안 오류가 여전히 발생합니다.

어떤 이유로 원점을 올바르게 설정하는 대신 Chrome이 필수 엔티티의 origin 특성을 "null"로 설정하여 브라우저에서 HTML 페이지를 열고 디버깅하기 만하면 getImageData()와 관련된 코드를 테스트 할 수 없습니다. 장소 상에서.

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

나는이 문제를 해결하기 위해 여전히 노력하고 있지만, 다시 한번 로컬 디버깅이 브라우저 구현 자들에 의해 가능한 고통스럽게 렌더링되고있는 것 같습니다.

Firefox에서 코드를 실행하려고 시도했지만 Firefox가 내 이미지가 HTML 및 JS 스크립트와 동일한 출처임을 인식하여 Firefox를 올바르게 가져옵니다. Firefox에서 작동하는 동안 Chrome에서 문제를 해결하는 방법에 대한 몇 가지 힌트를 환영합니다. Firefox가 작동하는 동안 디버거는 입니다. 고통스럽게은 서비스 거부 공격으로부터 한 단계 떨어지게됩니다.

Answer 5

원본 교차 오류를 발생시키지 않고 file : // 참조를 허용하도록 Google 크롬을 설득하는 방법을 알아 냈습니다.

1 단계 : 다른 운영 체제에서 바로 가기 (Windows) 또는 이에 준하는 도구를 만듭니다.

2 단계 :

"C : 다음과 같은 뭔가 목표를 설정 \ 프로그램 파일 구글 \ 크롬 \ 응용 프로그램 \ 크롬 \ (86).exe "--allow-file-access-from-files

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

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