동적으로 생성된 스크립트를 다른 도메인에서 로드하는 경우, 브라우저의 Same-Origin Policy 제한으로 인해 CORS(Cross-Origin Resource Sharing) 설정이 필요합니다. 이는 자바스크립트로 생성된 스크립트가 안전한 방식으로 로드되고 실행될 수 있도록 해줍니다.

1. 서버 측의 CORS 설정

동적으로 생성된 스크립트를 로드할 서버에서는 CORS를 활성화해야 합니다. 서버는 HTTP 응답에 Access-Control-Allow-Origin 헤더를 포함시켜야 합니다. 이 헤더는 웹 페이지 도메인의 값을 갖는데, 이렇게 하면 스크립트가 해당 도메인 이외에서 로드될 수 있게 됩니다.

예를 들어, 서버에서 모든 도메인에서 스크립트를 로드할 수 있도록 하려면 다음과 같이 헤더를 설정할 수 있습니다:

Access-Control-Allow-Origin: *

더 정확한 제어를 위해 특정 도메인만 허용하려면 도메인 이름을 명시해야 합니다:

Access-Control-Allow-Origin: https://example.com

2. 자바스크립트로 동적 스크립트 생성 및 로드

클라이언트 측에서는 자바스크립트를 사용하여 동적으로 스크립트를 생성하고 로드할 수 있습니다. 일반적인 방법은 document.createElement('script') 메서드를 사용하여 스크립트 요소를 생성한 후, src 속성을 설정하여 원격 스크립트의 경로를 지정하는 것입니다.

아래는 CORS를 통해 동적 스크립트를 로드하는 예시 코드입니다:

var script = document.createElement('script');
script.src = 'https://example.com/remote-script.js';
document.body.appendChild(script);

위의 코드에서 생성된 스크립트는 현재 페이지에 동적으로 추가됩니다. 이 스크립트는 CORS 설정이 제대로 이루어져 있을 경우, 해당 도메인에서 원격 스크립트를 로드하고 실행합니다.

3. 보안 주의사항

CORS를 통해 동적으로 생성된 스크립트를 로드하는 경우 보안 상 주의해야 합니다. 악성 스크립트가 들어올 수 있는 위험을 감안하여 원격 스크립트를 신뢰할 수 있는 소스에서 가져와야 합니다. 특히, 외부 도메인의 스크립트를 로딩하는 경우, 해당 도메인의 신뢰성을 검증해야 합니다.

요약

CORS를 통해 자바스크립트로 동적으로 생성된 스크립트를 로드하는 방법에 대해 알아보았습니다. 서버 측에서는 CORS 설정을 활성화하고, 클라이언트 측에서는 스크립트를 생성하고 로드하는 자바스크립트 코드를 사용합니다. 하지만 보안에 대한 주의가 필요하며, 신뢰할 수 있는 소스에서 스크립트를 가져와야 합니다.