CSS 사용자 지정 속성을 사용하여 JavaScript 공격 벡터 주입

이번 주 초에 저는 @Sansec float가 다음과 같이 트윗한 것을 보았습니다.









산섹


@sansecio






지난주에 SVG 파일에서 스키머를 찾은 후 이제 완벽하게 유효한 CSS에서 스키머를 발견했습니다. 체크아웃하는 동안 구문 분석되고 실행됩니다. cloud-iq[.]net에서 로드된 맬웨어(가짜)


오전 10:13 - 2020년 12월 9일





53

121



이것은 내가 말해야 할 꽤 좋은 것이고 찾기가 약간 어렵습니다.

the syntax for CSS Custom Properties is overly permissive과 같이 사용자 정의 속성을 사용하여 JavaScript 공격 벡터를 저장할 수 있습니다.

:root {
  --script: console.log('Attack!');
}

그런 다음use window.getComputedStyle to extract the contents out of the Custom Property 함수 생성자와 IIFE를 결합하면 실행할 수 있습니다.

const scriptContents = window.getComputedStyle(document.documentElement)?.getPropertyValue('--script');
new Function(scriptContents)();

다음은 설명된 방법을 사용하여 원격 색종이 스크립트를 로드하는 펜입니다.




이 원격 평가를 방지하려면 적절한Content Security Policy이 필요합니다. 나는 CSP 전문가가 아니기 때문에 알아내는 데 시간이 좀 걸렸지만 CSP의 소스 목록에 있는 unsafe-inline 키워드가 JS-IN-CSS 실행을 차단하기에 충분하다는 것이 밝혀졌습니다.

here은 4개의 허용된 키워드입니다.

'none' 예상할 수 있듯이 아무 것도 일치하지 않습니다.

'self'는 현재 원본과 일치하지만 해당 하위 도메인은 일치하지 않습니다.

'unsafe-inline'는 인라인 JavaScript 및 CSS를 허용합니다.

'unsafe-eval'는 eval과 같은 텍스트-자바스크립트 메커니즘을 허용합니다.

코드가 eval을 호출하지 않기 때문에 처음에는 unsafe-inline가 불충분할 것이라고 생각했지만 분명히 함수 생성자는 (올바르게!) 똑같이 유해한 것으로 간주되어 차단되었습니다.

다음은 스크립트 평가를 차단하는 업데이트된 데모입니다.



사용되는 CSP는 다음과 같습니다.

<meta
  http-equiv="Content-Security-Policy"
  content="script-src 
    https://cpwebassets.codepen.io
    https://cdpn.io
    https://cdn.jsdelivr.net
    'unsafe-inline'
  ;"
>

다음과 같이 작동합니다.

https://cpwebassets.codepen.io 및 https://cdpn.io는 CodePen 데모가 작동하도록 하기 위한 것입니다

.

https://cdn.jsdelivr.net는 해당 CDN에서 필요할 수 있는 jQuery와 같은 스크립트의 합법적인 로드를 허용하기 위해 존재합니다.

unsafe-inline는 함수 생성자에 대한 호출을 차단하여 JS-IN-CSS 정의 스크립트의 실행을 방지하는 것입니다.

이제 색종이 조각이 필요합니다! 🤪


💁‍♂️ 이 글first appeared on my blog bram.us . 루프에 머물고 싶습니까? 방법은 다음과 같습니다.

Follow bram.us using RSS