핵심 구성 요소의 임베디드 구성 요소를 통해 AEM 콘텐츠 페이지에서 외부 콘텐츠를 임베드할 수 있습니다.
콘텐츠 작성자는 핵심 구성 요소의 임베디드 구성 요소를 통해 AEM 콘텐츠 페이지 내에 임베드할 외부 콘텐츠를 선택하고 정의할 수 있습니다. 또한, 임베드할 자유 형식의 HTML을 정의하는 옵션이 있습니다.
현재 버전의 임베디드 구성 요소는 2022년 2월 핵심 구성 요소 릴리스 2.18.0과 함께 도입된 v2입니다. 이 문서에서는 해당 구성 요소에 대해 설명합니다.
다음 표에서 구성 요소의 모든 지원 버전, 구성 요소 버전과 호환되는 AEM 버전 및 이전 버전에 대한 설명서 링크에 대해 자세히 살펴볼 수 있습니다.
구성 요소 버전 | AEM 6.4 | AEM 6.5 | AEM as a Cloud Service |
---|---|---|---|
v2 | - | 호환 가능 | 호환 가능 |
v1 | 호환 가능 | 호환 가능 | 호환 가능 |
핵심 구성 요소 버전 및 릴리스에 대한 자세한 내용은 핵심 구성 요소 버전을 참조하십시오.
임베디드 구성 요소를 경험하고 구성 옵션의 샘플뿐만 아니라 HTML 및 JSON 출력을 확인하려면 구성 요소 라이브러리를 참조하십시오.
임베디드 구성 요소에 대한 최신 기술 설명서는 GitHub에서 확인할 수 있습니다.
핵심 구성 요소 개발에 대한 자세한 내용은 핵심 구성 요소 개발자 설명서를 참조하십시오.
콘텐츠 작성자는 구성 대화 상자를 통해 페이지에 임베드할 외부 리소스를 정의할 수 있습니다.
우선 임베드해야 할 리소스 유형을 선택합니다.
임베드가 가능한 유형의 경우 ID를 정의할 수 있습니다. 이 옵션을 통해 HTML과 데이터 레이어에서 구성 요소의 고유 식별자를 제어할 수 있습니다.
가장 단순한 임베드는 URL입니다. 간단히 URL 필드에서 임베드하려는 리소스의 URL을 붙여넣습니다. 구성 요소가 리소스 액세스를 시도하고, 프로세서 중 하나에서 구성 요소를 렌더링하는 경우 아래 URL 필드에 확인 메시지가 표시됩니다. 그렇지 않으면 필드에 오류가 표시됩니다.
임베디드 구성 요소에는 다음 유형의 리소스를 위한 프로세서가 포함됩니다.
개발자는 임베디드 구성 요소 개발자 설명서에 따라 URL 프로세서를 추가할 수 있습니다.
임베디드 기능을 사용하여 임베디드 리소스를 추가로 사용자 정의할 수 있습니다. 해당 리소스는 매개 변수화되고 리소스에 추가 정보가 포함될 수 있습니다. 작성자는 사전 구성된 임베디드 기능 중 하나를 선택할 수 있으며, 구성 요소에는 즉시 사용 가능한 YouTube 임베디드 기능이 포함됩니다.
임베디드 기능 필드는 사용하려는 프로세스 유형을 정의합니다. YouTube 임베디드 기능의 경우 다음 항목을 정의할 수 있습니다.
다른 임베디드 기능은 유사 필드를 제공하고 임베디드 구성 요소 개발자 설명서에 따라 개발자에 의해 정의될 수 있습니다.
페이지 작성자가 사용할 수 있는 디자인 대화 상자를 통해 템플릿 수준에서 임베디드 기능을 활성화해야 합니다.
임베디드 구성 요소를 사용하여 자유 형식의 HTML을 페이지에 추가할 수 있습니다.
스크립트와 같은 불안전한 태그는 입력한 HTML에서 필터링되고 결과 페이지에서는 렌더링되지 않습니다.
(예로 작성자에게 관리 권한을 부여할 수 있는) 크로스 사이트 스크립팅 공격을 방지하려면 작성자가 보안용으로 입력할 수 있는 HTML 마크업을 필터링합니다.
일반적으로 출력에서 모든 스크립트와 style
요소뿐 아니라 모든 on*
및 style
속성을 제거합니다.
임베디드 구성 요소는 AEM의 HTML AntiSamy 정리 프레임워크 필터링 규칙 세트를 준수하기 때문에 전역 규칙은 더 복잡합니다. 해당 규칙 세트는 /libs/cq/xssprotection/config.xml
에서 확인할 수 있습니다. 필요한 경우 개발자에 의해 프로젝트별 구성에 오버레이될 수 있습니다.
추가 보안 정보는 AEM 개발자 설명서(온프레미스 설치 및 AEM as a Cloud Service 설치용)에서 확인할 수 있습니다.
/libs/cq/xssprotection/config.xml
오버레이를 통해 HTML AntiSamy 정리 프레임워크 규칙을 구성할 수 있지만 해당 변경 사항은 핵심 임베디드 구성 요소뿐 만 아니라 모든 HTL 및 JSP 비헤이비어에 영향을 줄 수 있습니다.
임베디드 구성 요소는 AEM 스타일 시스템을 지원합니다.
드롭다운을 사용하여 구성 요소에 적용할 스타일을 선택합니다. 편집 대화 상자에서 선택한 항목은 구성 요소 툴바에서 선택한 항목과 동일한 효과를 가집니다.
드롭다운 메뉴를 사용하려면 디자인 대화 상자에서 이 구성 요소에 대한 스타일을 구성해야 합니다.
템플릿 작성자는 디자인 대화 상자를 통해 임베디드 구성 요소를 사용하는 콘텐츠 작성자에게 제공되는 옵션을 정의할 수 있습니다. 그리고 임베디드 구성 요소가 배치되면 기본값이 설정됩니다.