HTML <script>: 스크립트 요소

HTML <script> 요소는 임의의 데이터나 실행 가능한 코드를 문서에 포함할 때 사용합니다. 보통 JavaScript 코드를 삽입할 때 쓰이지만, GLSL 셰이더 프로그래밍 언어(WebGL)와 JSON처럼 다른 언어도 사용할 수 있습니다.

특성

전역 특성만 포함합니다.

async

일반 스크립트에 async 속성이 존재하면 파싱 중에 병렬로 스크립트를 불러오며, 다 불러오면 즉시 코드 평가를 수행합니다.

모듈 스크립트에 async 속성이 존재하면 모듈 스크립트와 그 모든 의존성 스크립트를 지연 큐에서 실행하므로 모두 파싱 중에 병렬로 불러오며, 다 불러오면 즉시 코드 평가를 수행합니다.

async 특성을 사용하면 스크립트 평가가 브라우저 파서의 작업을 막지 않습니다. defer도 이런 측면에서는 비슷한 효과를 가집니다.

async는 불리언 특성입니다. 특성이 존재하면 참이고 특성이 존재하지 않으면 거짓입니다.

브라우저 호환성을 참고하세요.

crossorigin

일반 <script> 요소는 표준 CORS 검사를 통과하지 못했을 때 window.onerror에 최소한의 정보만 제공합니다. 정적 미디어를 별도의 도메인에서 서빙하는 경우에 오류 기록이 필요하면 이 특성을 지정하세요. CORS 설정 특성에서 자세한 설명과, 사용 가능한 값을 확인하세요.

defer

이 스크립트를 문서 파싱 후, 그러나 DOMContentLoaded 이벤트 발생 전에 실행할 것을 지정합니다.

이 특성을 지정한 스크립트들은 평가가 끝나기 전까지 DOMContentLoaded 이벤트의 발생을 지연시킵니다.

defer 특성을 인라인 스크립트처럼 src가 없는 <script>에 사용해도 아무 효과가 없습니다.

모듈 스크립트는 기본적으로 지연 실행되므로 defer 특성을 지정해도 달라지지 않습니다.

defer 특성을 지정한 스크립트는 문서 상 순서대로 실행됩니다.

defer 특성을 사용하면 스크립트 평가가 브라우저 파서의 작업을 막지 않습니다. async도 이런 측면에서는 비슷한 효과를 가집니다.

fetchpriority

스크립트를 가져올 때의 우선순위에 대한 힌트를 브라우저에 제공합니다. 가능한 값은 다음과 같습니다.

high

다른 스크립트에 비해 높은 우선순위로 가져와야 함을 표시합니다.

low

다른 스크립트에 비해 낮은 우선순위로 가져와야 함을 표시합니다.

auto

기본 값입니다. 브라우저가 우선순위를 자동으로 판단합니다.

integrity

가져온 리소스에 변형이 존재하는지 검사할 때 사용자 에이전트가 사용할 값입니다. 하위 리소스 무결성 문서를 참고하세요.

nomodule

ES2015 모듈을 지원하는 브라우저에서 실행해선 안될 스크립트임을 나타내는 불리언 특성입니다. JavaScript 모듈을 지원하지 않는 오래된 브라우저에서 실행할 대체 스크립트로 사용할 수 있습니다.

nonce

script-src Content-Security-Policy의 화이트리스트에 스크립트를 등록하기 위한 논스(일회용 숫자 값)입니다. 서버는 정책을 매번 전송할 때마다 항상 고유 논스를 생성해야 합니다. 논스 값을 예측할 수 있으면 매우 쉽게 리소스 정책을 우회할 수 있으므로, 알아낼 수 없는 값을 생성하는 것이 중요합니다.

referrerpolicy

스크립트를 가져올 때, 또는 스크립트가 다른 리소스를 가져올 때 전송할 리퍼러를 나타냅니다.

• no-referrer: Referer 헤더를 전송하지 않습니다.

• no-referrer-when-downgrade: TLS(HTTPS) 지원을 하지 않는 출처에 대해서는 Referer 헤더를 전송하지 않습니다.

• origin: Referer 헤더가 요청의 출처, 즉 스킴, 호스트, 포트를 포함합니다.

• origin-when-cross-origin: 다른 출처로 요청할 땐 리퍼러 데이터를 스킴, 호스트, 포트로 제한합니다. 동일 출처로 요청할 땐 전체 경로도 포함합니다.

• same-origin: 동일 출처 요청에는 리퍼러를 전송하고, 교차 출처 요청에는 전송하지 않습니다.

• strict-origin: 보안 수준이 동일(HTTPS→HTTPS)할 땐 문서의 출처를 리퍼러로 전송하고, 더 낮을(HTTPS→HTTP) 땐 전송하지 않습니다.

• strict-origin-when-cross-origin (기본 값): 동일 출처 요청에는 전체 URL을 전송합니다. 교차 출처 요청에 대해서는 보안 수준이 동일(HTTPS→HTTPS)할 땐 문서의 출처를 리퍼러로 전송하고, 더 낮을(HTTPS→HTTP) 땐 전송하지 않습니다.

• unsafe-url: 리퍼러가 항상 출처, 경로, 쿼리 문자열을 포함합니다. 프래그먼트, 비밀번호, 사용자 이름은 포함하지 않습니다. 안전하지 않은 값입니다. TLS로 보호받는 리소스에서 보호 없는 출처로 정보가 누출될 수 있습니다.

빈 문자열 값은 기본 값이자, referrerpolicy를 지원하지 않는 브라우저에서의 대체 값입니다. <script> 요소에 referrerpolicy를 명시하지 않은 경우 상위에서 설정한 리퍼러 정책, 예컨대 문서나 도메인의 정책을 따라갑니다. 상위 정책도 존재하지 않을 때의 빈 문자열은 strict-origin-when-cross-origin으로 취급합니다.

src

외부 스크립트의 URI를 지정합니다. 스크립트를 문서에 직접 삽입하는 대신 사용할 수 있는 방법입니다.

type

<script>가 나타내는 스크립트의 유형을 지정합니다. 다음 범주 중 하나에 속하는 값을 사용할 수 있습니다.

• 생략하거나 JavaScript MIME 유형: 스크립트가 JavaScript임을 나타냅니다. 명세에서는 이 값을 불필요하게 JavaScript MIME 유형으로 설정하지 말고 아예 생략하는 것을 권장하고 있습니다.
• module: 스크립트를 JavaScript 모듈로 취급합니다. 이 스크립트의 처리가 defer 특성의 영향을 받지 않게 됩니다. module 사용법에 대해서는 JavaScript 모듈 안내서를 참고하세요. 일반 스크립트와 달리, 모듈 스크립트는 교차 출처 가져오기에 CORS 프로토콜의 사용을 요구합니다.
• 다른 모든 값: 스크립트를 브라우저가 처리하지 않습니다. JavaScript를 제외한, 유효한 MIME 유형을 지정해야 합니다. src 특성은 무시됩니다.

참고

async, defer, type="module", 인라인 스크립트는 가져오는 즉시 브라우저의 파싱을 막고 먼저 실행됩니다.

스크립트는 text/javascript MIME 유형을 가지고 있어야 하지만, 브라우저의 기준은 관대하여 이미지(image/*), 비디오(video/*), 오디오(audio/*), text/csv만 아니라면 실행을 막지 않습니다.

예제

기본 사용법

아래 코드는 <script> 요소를 사용해 외부 스크립트를 가져옵니다.

<script src="javascript.js"></script>

그리고 아래 코드에서는 <script> 요소로 인라인 스크립트를 추가합니다.

<script>
  alert('안녕하세요!');
</script>

모듈 대체

type="module"을 지원하는 브라우저는 nomodule 특성을 포함한 스크립트를 모두 무시합니다. 이 점을 이용하면 모듈 스크립트를 제공하면서, 모듈을 지원하지 않는 브라우저에서 사용할 대체 스크립트를 따로 포함할 수 있습니다.

<script type="module" src="main.js"></script>
<script nomodule src="fallback.js"></script>

HTML에 데이터 삽입

<script> 요소를 사용하면 서버에서 HTML에 데이터를 렌더링 시점에 삽입할 수도 있습니다. type에 JavaScript를 제외한 MIME 유형을 지정하세요.

<!-- 서버에서 렌더링 -->
<script id="data" type="application/json">{"userId":1234,"userName":"John Doe","memberSince":"2000-01-01T00:00:00.000Z"}</script>

<!-- 정적 코드 -->
<script>
  const userInfo = JSON.parse(document.getElementById("data").text);
  console.log("사용자 정보: %o", userInfo);
</script>

명세

HTML Living Standard

브라우저 호환성

같이 보기

• <noscript>