iframe과 sandbox로 콘텐츠를 안전하게 임베드하려면 어떻게 하나요?

sandbox는 어떻게 동작하는가

값이 없는 sandbox는 최대 제한을 적용합니다. 스크립트 없음, form 없음, 팝업 없음, 콘텐츠를 고유 origin으로 취급합니다. 그런 다음 토큰을 나열하여 기능을 선택적으로 다시 활성화합니다.

흔한 토큰:

• allow-scripts — JavaScript를 실행하게 함.
• allow-forms — form을 제출하게 함.
• allow-same-origin — 자신의 origin을 유지함(이것이 없으면 null origin이 되어 스토리지/쿠키 차단).
• allow-popups, allow-modals, allow-top-navigation.

보안 참고: allow-scripts와 allow-same-origin을 함께 두면, same-origin인 경우 프레임이 자신의 sandbox를 제거할 수 있습니다. 신뢰할 수 없는 콘텐츠에는 그 조합을 피하십시오.

그 밖의 안전 attribute

왜 중요한가

iframe은 여러분이 제어하지 못하고 완전히 신뢰해서는 안 되는 서드파티 또는 사용자 생성 콘텐츠를 임베드합니다. sandbox(기본 거부, 필요한 것만 허용)에 referrerpolicy/allow를 더하면 그 콘텐츠를 격리하여, 원치 않는 스크립트 실행, 페이지 내비게이션, 기기 기능 접근을 막을 수 있습니다.

accessibility를 위해 title을, 성능을 위해 loading="lazy"를 추가하십시오.