다른 출처에서 이미지를 그릴 때 `canvas.toDataURL()`에서 `SECURITY_ERR`이 발생하는 이유는 무엇입니까?-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

다른 출처에서 이미지를 그릴 때 `canvas.toDataURL()`에서 `SECURITY_ERR`이 발생하는 이유는 무엇입니까?

Oct 31, 2024 pm 10:32 PM

Why does `canvas.toDataURL()` throw a `SECURITY_ERR` when drawing images from a different origin?

<h2>'canvas.toDataURL()'의 보안 예외 이해</h2>

다음 코드를 고려하세요.

&lt;pre&gt;
var frame=document.getElementById("viewer");
frame.width=100;
frame.height=100;

var ctx=frame.getContext("2d");
var img=new Image();
img.src="http://www.ansearch.com/images/interface/item/small/image.png"

img.onload=function() {
    // draw image
    ctx.drawImage(img, 0, 0)

    // Here's where the error happens:
    window.open(frame.toDataURL("image/png"));
}
&lt;/pre&gt;

로그인 후 복사

이 코드는 'toDataURL()' 메서드를 사용하여 캔버스 요소를 데이터 URL로 변환하려고 시도합니다. 그러나 이로 인해 'SECURITY_ERR: DOM Exception 18' 오류가 발생합니다.

이 오류가 발생하는 이유는 웹 브라우저의 보안 제한 때문입니다. HTML Canvas 사양에 따르면 캔버스에 그려지는 이미지가 다른 출처(이 경우 'http://www.ansearch.com')에서 가져온 경우 브라우저는 캔버스를 다음으로 변환하는 것을 방지합니다. 데이터 URL. 이는 원본 간 데이터 액세스 및 잠재적인 보안 취약성을 방지하기 위해 수행됩니다.

따라서 다른 원본의 이미지가 포함된 캔버스 요소에서 데이터 URL을 생성하려고 하면 이러한 보안 문제가 발생합니다. 예외. 이 문제를 해결하려면 이미지가 웹 애플리케이션과 동일한 출처에서 제공되는지 확인하거나 이미지 변환의 대체 방법을 모색해야 합니다.

위 내용은 다른 출처에서 이미지를 그릴 때 `canvas.toDataURL()`에서 `SECURITY_ERR`이 발생하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.