HTML <script>: 스크립트 요소

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

특성

전역 특성만 포함합니다.

async

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

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

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

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

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

attributionsrc

브라우저가 Attribution-Reporting-Eligible 헤더를 보내도록 합니다. 서버에서는 이 헤더를 확인 후 Attribution-Reporting-Register-Source 또는 Attribution-Reporting-Register-Trigger 헤더를 응답에 포함하여 JavaScript 기반 기여 소스와 기여 트리거를 등록할 수 있습니다. 어떤 헤더를 보낼지는 등록을 유도한 Attribution-Reporting-Eligible 헤더의 값에 따라 달라집니다.

이 특성은 두 가지 종류의 값을 가질 수 있습니다.

• 불리언, i.e. attributionsrc 특성 이름만. Attribution-Reporting-Eligible 헤더를 src 특성이 가리키는 것과 같은 서버로 전송합니다. 기여 소스와 트리거 등록을 같은 서버에서 처리할 때는 이렇게 지정해도 됩니다. 기여 트리거 등록 시에는 특성의 값이 선택 사항이며, 값을 지정하지 않으면 빈 문자열을 사용합니다.

• 한 개 이상의 URL을 포함한 문자열.

  attributionsrc="https://a.example/register-source https://b.example/register-source"
  

  요청하는 리소스가 외부 서버거나, 기여 소스 등록을 다른 서버에서 처리하는 경우에 사용할 수 있습니다. 리소스 요청이 발생하면, 리소스 출처 외에도 지정한 URL들에도 Attribution-Reporting-Eligible 헤더를 전송합니다. 각 URL들에서는 Attribution-Reporting-Register-Source 또는 Attribution-Reporting-Register-Trigger 헤더를 응답해 등록을 마칠 수 있습니다.

blocking

이 스크립트를 가져오는 동안 중단할 작업을 명시합니다. 중단 토큰들의 공백 구분 리스트를 지정해야 합니다. 중단 토큰은 다음과 같습니다.

render

화면에 콘텐츠를 렌더링 하는 것을 중단합니다.

crossorigin

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

defer

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

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

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

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

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

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

fetchpriority

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

high

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

low

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

auto

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

HTMLScriptElement.fetchPriority 문서를 참고하세요.

integrity

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

nomodule

ES 모듈을 지원하는 브라우저에서 실행해선 안될 스크립트임을 나타내는 불리언 특성입니다. 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 유형을 명시하지 말고 type 특성을 생략하는 것이 권장됩니다.

importmap

요소의 내용이 임포트 맵임을 나타냅니다. 임포트 맵은 브라우저가 JavaScript 모듈의 지정자를 분석하는 방법을 개발자가 제어할 수 있는 JSON 객체입니다. importmap 문서를 참고하세요.

module

코드를 JavaScript 모듈로 취급합니다. 스크립트 내용의 처리가 지연됩니다. charset과 defer 특성의 영향을 받지 않게 됩니다. module 사용법에 대해서는 JavaScript 모듈 안내서를 참고하세요. 클래식 스크립트와 달리, 모듈 스크립트는 교차 출처 가져오기에 CORS 프로토콜의 사용을 요구합니다.

speculationrules

요소의 내용이 예측 규칙임을 나타냅니다. 예측 규칙은 브라우저가 미리 가져오거나 미리 렌더링할 리소스를 결정할 때 사용하는 JSON 객체입니다. Speculation Rules API의 일부입니다. speculationrules 문서를 참고하세요.

다른 모든 값

요소의 내용을 데이터 블록으로 취급합니다. 브라우저는 아무 처리도 하지 않습니다. 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 Standard

브라우저 호환성

같이 보기

• <noscript>