보안 ThingWorx 위젯 만들기
사용자 정의된 위젯을 만들 때 보안 위젯을 만들어야 합니다. XSS(교차 사이트 스크립팅) 및 CSRF(교차 사이트 요청 위조) 취약점을 고려해야 합니다. 자세한 내용은
CSRF 보호를 위한 요청 방법 업데이트 및 콘텐츠 유형 필터링 단원을 참조하십시오.
다음 단원에서는 보안 위젯을 만드는 모범 사례를 제공합니다.
위젯에서 HTML 출력 값에 대한 인코딩 사용
위젯을 사용하여 사용자 인터페이스에 값을 표시하는 경우 HTML 인코딩을 사용하는 것이 좋습니다. 다음 샘플 코드를 참조하십시오.
this.updateProperty = function (updatePropertyInfo) {
if (updatePropertyInfo.TargetProperty === 'Text') {
var labelText = Encoder.htmlEncode(updatePropertyInfo.SinglePropertyValue);
thisWidget.setProperty('Text', labelText);
showLabelText(thisWidget.getProperty('Text'));
}
}
이 예에서는 다음과 같습니다.
• 위젯 속성에 대한 바인딩된 값이 변경될 때마다 updatePropery() 함수가 호출됩니다.
• 위젯의 값은 인코더 라이브러리를 사용하여 HTML 인코딩됩니다.
• 인코딩 후에는 Get 및 Set 메소드를 사용하여 이 새 값에 액세스합니다.
• 이 단계를 수행하면 Get 메소드가 사용자 인터페이스에 반환되는 값에 대해 추가 정화 작업을 수행할 수 있습니다.
위젯에서 HTML 출력 값에 대한 디코딩 및 jQuery 사용
위젯을 사용하여 사용자 인터페이스에 값을 표시하고 HTML 인코딩을 사용하여 값을 인코딩한 경우 인코딩된 값을 원래 값으로 변환하려면 HTML 디코딩을 사용합니다. 다음 샘플 코드를 참조하십시오.
function showLabelText(labelText) {
labelText = Encoder.htmlDecode(labelText);
var spanText = thisWidget.jqElement.find('.label-text');
spanText.text(labelText);
}
이 예에서는 다음과 같습니다.
• showLabelText 함수는 위젯의 DOM 요소를 가져오고 값을 업데이트하는 데 사용됩니다.
• 인코더 라이브러리를 사용하여 값을 디코딩합니다.
• DOM 요소에 있는 jQuery와 함께 text() 메소드를 사용하여 값을 표시합니다. 이 메서드에는 응용 프로그램을 XSS 취약점으로부터 보호하는 데 유용한 이스케이프 함수가 기본 제공되어 있습니다.
JSP(JavaServer Pages)에서 HTML 출력에 대한 인코딩 사용
JSP를 사용하여 사용자 인터페이스에 값을 표시하는 경우 HTML 인코딩을 사용하는 것이 좋습니다. OWASP의 ESAPI 유틸리티를 사용하여 컨텍스트에 따라 인코딩을 처리할 수 있습니다. 다음 샘플 코드를 참조하십시오.
이 예에서는 다음과 같습니다.
• 사용자는 ThingWorx에 대한 자신만의 로그인 페이지를 만들 수 있습니다.
• 다음 필드에는 로그인 화면에 대한 사용자 입력이 필요합니다.
◦ orgName
◦ loginPrompt
• 이러한 필드의 데이터는 신뢰할 수 없는 데이터입니다. 사용자가 이러한 필드에 대해 악의적인 문자를 입력할 수 있다는 잠재적인 위협이 있습니다. 따라서 HTML 인코딩에 대한 ESAPI 유틸리티를 통해 이 데이터를 실행해야 합니다.
보안 사용자 정의 사용자 인터페이스
확장을 개발하여 자신만의 사용자 정의 사용자 인터페이스를 빌드하거나 ThingWorx REST API를 사용하는 자체 호스팅된 웹 응용 프로그램을 가질 수 있습니다. 이러한 경우 데이터가 브라우저에 표시되기 전에 정화되고 인코딩되었는지 확인해야 합니다.
구현 중인 프레임워크를 이해하고 있는지 확인하고 XSS 취약점으로부터 응용 프로그램을 보호하기 위해 해당 환경에 대한 모범 사례를 사용합니다.
다음 예에서는 AngularJS 응용 프로그램이 확장으로 가져온 템플릿을 사용합니다. ThingWorx Utilities를 사용하여 이 워크플로를 빌드할 수 있습니다.
이 예에서는 다음과 같습니다.
• node.label은 신뢰할 수 없는 사용자 입력입니다. 이는 임의의 문자열입니다. 사용자는 워크플로 노드에 대한 레이블 이름을 제공합니다.
• AngularJS 응용 프로그램의 템플릿에서 신뢰할 수 없는 입력을 이중 중괄호 표기법({{}})으로 래핑하는 경우(예: {{node.label}}) 문자열 보간을 강제 적용합니다. 이 값은 문자열로 처리되며 스크립트 컨텍스트에서 실행되지 않습니다.
HTML 응답
PTC는 ESAPI 유틸리티를 통해 출력을 필터링하는 공통 클래스의 HTML 응답을 문서화합니다.
public void writeTableCell(String value, String id, String sClass, String sStyle) throws Exception {
startTableCell(id, sClass, sStyle);
writeValue(value);
endTableCell();
}
public void writeValue(String value) throws Exception {
write(ESAPIUtilities.getEncoder().encodeForHTML(value));
}